반응형
리스트 항목을 만들어주는 태그를 입력하고 <li> 태그 안에 <a> 태그를 넣어주면 간단하게 탭 항목을 만들수 있습니다.
| 탭(Tab) 만들기 |
| <!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>탭(Tab)</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="연결할 페이지">A 항목</a></li> <li><a href="연결할 페이지">B 항목</a></li> <li><a href="연결할 페이지">C 항목</a></li> </ul> </div> </div> </body> </html>  |
탭 항목이 너무 붙어있는데요. 공간을 줘서 띄어주는 방법은 data-inset="true" 를 추가 해주시면 됩니다.
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="연결할 페이지">A 항목</a></li>
<li><a href="연결할 페이지">B 항목</a></li>
<li><a href="연결할 페이지">C 항목</a></li>
</ul>
</div>
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| jQuery Mobile - 09.리스트에 이미지, 아이콘 추가하기 (0) | 2012.09.19 |
|---|---|
| jQuery Mobile - 08.중첩 리스트 (0) | 2012.09.18 |
| jQuery Mobile - 06.리스트(List) (0) | 2012.09.17 |
| jQuery Mobile - 05.전체 화면보기 (0) | 2012.09.14 |
| jQuery Mobile - 04.toolbar (Header, footer) (0) | 2012.09.13 |
Comments