■ jQueyr Mobile 리스트 구분자
jQuery Mobile에서는 ul 태그나 ol 태그 같은 리스트 태그의 data-role 속성을 listview로 입력하면 스마트폰의 리스트와 같은 모습으로 바꿀 수 있다.
그리고 리스트 안에는 리스트의 요소를 구분할 구분자 라는 것이 있는데. jQuery Mobile에서 구분자를 만들려면 li 태그의 jQuery Mobile 속성값을 list-divider로 입력하면 바꿀 수 있다.
01. list-divider 구분자를 사용하여 리스트를 구분하기 위한 코드는 아래와 같다.
list_drivider.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="center">
<ul data-role="listview">
<li data-role="list-divider">TWICE</li>
<li><a href="javascript:">나연</a></li>
<li><a href="javascript:">사나</a></li>
<li><a href="javascript:">모모</a></li>
<li><a href="javascript:">미나</a></li>
<li data-role="list-divider">LOVELIZ</li>
<li><a href="javascript:">KEI</a></li>
<li><a href="javascript:">유지애</a></li>
<li><a href="javascript:">정예인</a></li>
<li data-role="list-divider">APINK</li>
<li><a href="javascript:">윤보미</a></li>
<li><a href="javascript:">박초롱</a></li>
<li><a href="javascript:">정은지</a></li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 위에서 생성한 파일을 브라우저에서 실행하면 아래와 같은 리스트가 만들어진다. 중간에 리스트를 구분하는 것이 구분자 이다.
■ jQueyr Mobile 리스트 그룹화 하기
· 리스트를 하나의 그룹으로 구분하고 싶을 때는 data-inset 속성을 true로 입력합니다.
· data-inset 속성의 기본 설정은 false이므로 따로 입력할 필요가 없다.
· 〈h3〉 태그와 〈p〉태그를 넣으면 자동으로 리스트의 요소에 제목과 내용이 지정된다.
01. 리스트르리 그룹화 하기위한 코드는 아래와 같다.
data_inset.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div> <!-- 그룹화된것을 나타내기 위해 padding 속성 사용 --> <div data-role="center" style="padding:10px;">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">TWICE</li>
<li>
<a href="javascript:">
<h3>나연</h3>
<p>맏내, 나부기, 나숭</p>
</a>
</li>
<li>
<a href="javascript:">
<h3>사나</h3>
<p>큐티, 섹시</p>
</a>
</li>
<li data-role="list-divider">LOVELIZ</li>
<li>
<a href="javascript:">
<h3>KEI</h3>
<p>애교 노동자, 애교의 정석</p>
</a>
</li>
<li>
<a href="javascript:">
<h3>유지애</h3>
<p>비주얼 막내</p>
</a>
</li>
<li data-role="list-divider">APINK</li>
<li>
<a href="javascript:">
<h3>윤보미</h3>
<p>먹보미, 바보미, 뽀미</p>
</a>
</li>
<li>
<a href="javascript:">
<h3>박초롱</h3>
<p>벅헉박사</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
■ jQueyr Mobile 리스트 에 추가 설명과 카운터 추가하기
〈span〉 태그의 class 속성에 ui-li-aside와 ui-li-count를 입력하면 자동으로 리스트 요소에 추가 설명과 카운터가 붙는다.
01. 추가설명과 카운터를 나타내기위한 코드는 아래와 같다.
data_inset_aside_count.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<!-- 그룹화된것을 나타내기 위해 padding 속성 사용 -->
<div data-role="center" style="padding:10px;">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">TWICE</li>
<li>
<a href="javascript:">
<h3>나연</h3>
<p>맏내, 나부기, 나숭</p>
<span class="ui-li-aside">임나연</span>
<span class="ui-li-count">21</span> </a>
</li>
<li>
<a href="javascript:">
<h3>사나</h3>
<p>큐티, 섹시</p>
<span class="ui-li-aside">미나토자키 사나</span>
<span class="ui-li-count">20</span> </a>
</li>
<li data-role="list-divider">LOVELIZ</li>
<li>
<a href="javascript:">
<h3>KEI</h3>
<p>애교 노동자, 애교의 정석</p>
<span class="ui-li-aside">김지연</span>
<span class="ui-li-count">21</span> </a>
</li>
<li>
<a href="javascript:">
<h3>유지애</h3>
<p>비주얼 막내</p>
<span class="ui-li-aside">유지애</span>
<span class="ui-li-count">23</span> </a>
</li>
<li data-role="list-divider">APINK</li>
<li>
<a href="javascript:">
<h3>윤보미</h3>
<p>먹보미, 바보미, 뽀미</p>
<span class="ui-li-aside">윤보미</span>
<span class="ui-li-count">23</span> </a>
</li>
<li>
<a href="javascript:">
<h3>박초롱</h3>
<p>벅헉박사</p>
<span class="ui-li-aside">박초롱</span>
<span class="ui-li-count">25</span> </a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html> |
02. 실행하면 추가 설명과 카운터가 생성된다.
■ jQueyr Mobile 리스트 에 추가 설명과 카운터 추가하기
data-filter 속성을 true로 사용하면 리스트의 요소를 검색하는 검색어 입력창을 만들 수 있다.
01. 검색창을 추가하기 위한 코드는 아래와 같다.
data_filter.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="center" style="padding:10px;">
<ul data-role="listview" data-filter="true" data-inset="true">
<li data-role="list-divider">TWICE</li>
<li><a href="javascript:">나연</a></li>
<li><a href="javascript:">정연</a></li>
<li><a href="javascript:">모모</a></li>
<li><a href="javascript:">사나</a></li>
<li><a href="javascript:">지효</a></li>
<li><a href="javascript:">미나</a></li>
<li><a href="javascript:">다현</a></li>
<li><a href="javascript:">채영</a></li>
<li><a href="javascript:">쯔위</a></li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 아래 출력결과를 보면 검색어 입력창이 만들어 지고 해당 리스트를 검색할 수 있는것을 확인 할 수 있다.
