jQuery | javascript | CSS

jQuery Mobile - 06.리스트(List)

Godffs 2012. 9. 17. 00:24
반응형

리스트로 보여주는 예제입니다.
많이 사용되되는 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>
[그림 06-1]

 
리스트를 표현 할 때 앞에 숫자를 넣고 싶다면...
<div data-role="content">
    <ol data-role="listview">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ol>
</div>

반응형