jQuery | javascript | CSS

jQuery Mobile - 07. 탭(Tab) 만들기

Godffs 2012. 9. 17. 01:15
반응형

리스트 항목을 만들어주는 태그를 입력하고 <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>
[그림 07-1]

탭 항목이 너무 붙어있는데요. 공간을 줘서 띄어주는 방법은  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> 

[그림 07-2]

 

 

반응형