반응형
리스트로 보여주는 예제입니다.
많이 사용되되는 UI 입니다.
| 목록(List) |
| <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></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>리스트</h1> </div> <div data-role="content"> <ul data-role="listview"> <li>리스트1</li> <li>리스트2</li> <li>리스트3</li> </ul> </div> </div> </body> </html>  |
리스트를 표현 할 때 앞에 숫자를 넣고 싶다면...
<div data-role="content">
<ol data-role="listview">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ol>
</div>
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| jQuery Mobile - 08.중첩 리스트 (0) | 2012.09.18 |
|---|---|
| jQuery Mobile - 07. 탭(Tab) 만들기 (0) | 2012.09.17 |
| jQuery Mobile - 05.전체 화면보기 (0) | 2012.09.14 |
| jQuery Mobile - 04.toolbar (Header, footer) (0) | 2012.09.13 |
| jQuery Mobile - 03.버튼의 종류 (0) | 2012.09.12 |
Comments