반응형
기본버튼과 버튼 아이콘을 사용합니다.
| 버튼의 종류 |
| <!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="euc-kr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/> <link rel="shortcut icon" href="../FrameWork/images/icons-18-black.png" /> <link rel="apple-touch-icon" href="../FrameWork/images/icons-18-black.png" /> <link href="../framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" /> <script src="../framework/jquery-1.6.4.js"></script> <script src="../framework/jquery.mobile-1.0.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Hoe</h1> </div> <div data-role="content"> <a href="#" data-role="button">기본버튼</a> <a href="#" data-role="button" data-inline="true">글짜길이만큼</a> <a href="#" data-role="button" style="width:180px">길이지정</a> <a href="#" data-role="button" data-icon="home">집모양 버튼</a> <a href="#" data-role="button" data-icon="plus">+ 버튼</a> <a href="#" data-role="button" data-icon="star">별모양 버튼</a> <a href="#" data-role="button" data-icon="plus" data-iconpos="top">+위</a> <a href="#" data-role="button" data-icon="plus" data-iconpos="bottom">+아래</a> <a href="#" data-role="button" data-icon="plus" data-iconpos="notext">+이미지만</a> 버튼의 그룹으로 표시 <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">1번</a> <a href="#" data-role="button">2번</a> <a href="#" data-role="button">3번</a> </div> </div> </div> </body> </html> |
결과화면
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| jQuery Mobile - 05.전체 화면보기 (0) | 2012.09.14 |
|---|---|
| jQuery Mobile - 04.toolbar (Header, footer) (0) | 2012.09.13 |
| jQuery Mobile - 02. 버튼 클릭시 페이지 이동 (0) | 2012.09.11 |
| jQuery Mobile - 01.jQuery Mobile 시작 (1) | 2012.09.10 |
| jQuery Mobile - 00. Visual Studio 2010에서 jQuery Mobile 기본 구성 프로젝트 (0) | 2012.09.10 |
Comments