이전 글에 있는 소스를 이용하겠습니다. 5개의 element들이 있죠. 이것을 firefox 브라우저에 있는 firebug로 jQuery Mobile에 의해 생성된 HTML 을 보겠습니다.
각각의 list item은 ui-li
CSS class 를 가지고 있습니다. <ul>
가 감싸고 있는 리스트는 ui-listview
CSS class를 가지고 있습니다. 이 두개의 클래스를 지난번 작업했던 HTML 소스 안에 코딩해 넣어서 새로운 리스트 모양을 꾸미겠습니다.
Change the style of list items
<!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-li {
color : #0099FF;
font-size : 20px;
font-style : italic;
}
.ui-listview {
padding : 10px;
background-color : black;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<ul data-role=listview data-inset=true>
<li> Element 1.1 </li>
<li> Element 1.2 </li>
<li> Element 1.3 </li>
<li> Element 1.4 </li>
<li> Element 1.5 </li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li").bind ("vclick", function (event)
{
alert (this.innerHTML);
});
</script>
tistory426_01.html리스트의 각 element의 높이가 커졌습니다. (새 글자 폰트에 맞게 조정이 된거죠.) 그리고 이 리스트는 검은 border로 감싸져 있습니다. 이것은 ui-listview CSS class 에서 정의한 것입니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |
|---|---|
| Ajax 로 버튼 insert 하기 (0) | 2012.10.30 |
| HTML element를 jQuery Mobile 버튼으로 변환하기 (0) | 2012.10.30 |
| 다이나믹하게 버튼 생성하기 (0) | 2012.10.29 |
| 리스트 다루기 예제 (0) | 2012.10.29 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |
| HTML element 를 jQuery Mobile list 로 바꾸기 (0) | 2012.10.23 |