툴바는 일반적으로 어떤 action 을 취하기 위해 버튼 역할을 합니다. navigation bar navbar인 경우 <li>
elements로 이뤄 집니다. 아이템을 클릭 했을 경우 이 클릭을 handle 하기 위해 click event (or the associated
vclick virtual event)를 사용할 수 있습니다.
Use the click event in a navigation bar
<!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 data-position=fixed>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
<div data-role=footer data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#>Menu 1</a></li>
<li><a href=#>Menu 2</a></li>
<li><a href=#>Menu 3</a></li>
<li><a href=#>Menu 4</a></li>
<li><a href=#>Menu 5</a></li>
<li><a href=#>Menu 6</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
$("li").bind ("click", function (event)
{
alert ($(this).find ("a").text ());
});
</script>
|
|
tistory568_01.htmlnavigation bar에서 두번째 버튼을 클릭하면 아래와 같이 될 겁니다.
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| GPS 와 구글 맵 사용하기 (0) | 2012.12.29 |
|---|---|
| Client side 데이터 베이스 이용하기 (0) | 2012.12.28 |
| 툴바 만드는 예제들 (0) | 2012.12.28 |
| 툴바 customize 하기 (0) | 2012.12.27 |
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |