jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1)

2016.03.15 10:11language/jquery mobile

 

 

listview 는 가장 많이 사용되는 기능입니다.

리스트 뷰 강좌는 여러 강좌로 나눌 계획입니다.

가장 많이 사용되는 많큼 조금더 디테일하게 속성들을 하나하나 살펴볼 예정입니다.

 

 

 

jquery mobile 은 순서 업는 목록 (ul 태그) 또는 순서 있는 목록 (ol 태그)을 모두 표현할 수 있습니다.

 

data-role="listview" 속성을 사용하면 가능합니다.

 



 

목록 버튼 만들기

목록 태그의 item (li 태그)에 a 태그를 넣으면 버튼 목록으로 사용할 수 있습니다.

 

평범한 목록을 원한다면 a 태그를 사용하지 않으면 됩니다.

 

목록 섹션 해더 ( 그룹 구분 ) 만들기

data-role="list-divider" 속성을 사용하면 해더를 목록 중간중간에 삽입할 수 있습니다.

 

 

위의 속성을 모두 사용한 기본적인 목록을 출력하는 소스입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
</head>
<body>
 
<section id="page1" data-role="page">
    <header data-role="header"><h1>CSS3 Animations</h1></header>                   
    <div class="content" data-role="content">
        <h3>가나다 List</h3>
        <ul data-role="listview">
            <li data-role="list-divider">자음</li>
            <li><a href="#">가나다</a></li>
            <li><a href="#">라마바</a></li>
            <li data-role="list-divider">모음</li>
            <li><a href="#">아야어여</a>
            </li>
            <li><a href="#">오요우유</a></li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
 
</body>
</html>
cs

 



 

결과입니다.