아래 샘플 코드가 있습니다. 이 코드는 엘리먼트의 그룹들을 구분해서 리스트를 display 합니다.
A selection list with groups of elements
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment type: </span>
<select data-native-menu=false>
<optgroup label=Basic>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
</optgroup>
<optgroup label=Premium>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
|
|
tistory475_01.html이 selection list 는 아래와 같이 display 될 겁니다.
Firebug에서 보시면 jQuery Mobile 에 의해 생성된 HTML code 를 보실 수 있습니다.
ui-selectmenu
CSS class 가 있는 <div>
element 안에는 ui-selectmenu-list
class 가 있는 <ul>
element 가 있습니다. 그 안에는 display 된 리스트 아이템들에 해당하는 <li>
elements 들이 있구요. 각
<li>
elements 들에는 ui-li
and ui-btn
classes 들이 있습니다. 그리고 그 리스트 안에 selected 된 아이템에는 ui-btn-active
class 가 있구요.
<optgroup> element를 사용해서 jQuery MObile에 의해 삽입된 separator element 에는 ui-li, ui-li-divider, ui-btn and ui-bar-b classe 들이 있습니다.
이 CSS class들을 이용해서 selection list 를 새롭게 꾸며보겠습니다.
Styling elements of the selection list
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-selectmenu {
padding : 15px;
}
.ui-li-divider.ui-bar-b {
color : red;
background : black;
}
.ui-li:not(.ui-li-divider) {
font-style : italic;
}
.ui-li.ui-btn-active {
color : white;
background : grey;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment type: </span>
<select data-native-menu=false>
<optgroup label=Basic>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
</optgroup>
<optgroup label=Premium>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
|---|---|
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |
| selection list 관련 예제들 (0) | 2012.11.18 |
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |
| selection list 추가하기와 지우기 (0) | 2012.11.15 |
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |