Manage a tab system in a navigation bar
navigation bar의 버튼을 클릭할 때마다 다른 content 를 보여주려고 합니다. 물론 page 이동 없이 각 버튼이 선택될 따마다 해당 page 에서 content 만 바꿔서 display 할 겁니다.
Manage tabs in the 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 id=menu1><a href=#>Menu 1</a></li>
<li id=menu2><a href=#>Menu 2</a></li>
<li id=menu3><a href=#>Menu 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
$("li").bind ("vclick", function (event)
{
var id = this.id;
if (id == "menu1") $("#home div:jqmData(role=content)")
.html ("<p> Content menu 1 </p>");
else if (id == "menu2") $("#home div:jqmData(role=content)")
.html ("<p> Content menu 2 </p>");
else if (id == "menu3") $("#home div:jqmData(role=content)")
.html ("<p> Content menu 3 </p>");
});
</script>
tistory570_01.htmlnavigation bar에 있는 버튼을 클릭할 때마다 화면의 contents 가 바뀝니다. 그리고 처음 화면이 뜰 때는 아무 버튼도 selected 돼 있지 않은 상태죠. 화면이 뜬 후 버튼을 클릭할 때마다 content를 바꾸는 로직이 실행 됩니다.
Simulate a click on the first button
$("div:jqmData(role=navbar)").bind ("navbarcreate", function (event)
{
$("li#menu1 a.ui-btn").trigger ("vclick");
});
이 코드는 navigation bar 가 생성될 때 (navbarcreate event) 실행됩니다. 그 이전에는 ui-btn
class의 <a>
link는 존재하지가 않습니다. 왜냐하면 아직 jQuery Mobile 에 의해서 HTML 코드가 변환되지 않았으니까요.
Manage the content of the tabs by Ajax
HTML 에 있는 자바스크립트 코드로 tab들의 contents들을 수정하는 대신 Ajax를 통해서 서버로부터 HTML 코드를 받아 오는 것을 구현하겠습니다.
Retrieve the contents of the tabs by Ajax
<!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 id=menu1><a href=#>Menu 1</a></li>
<li id=menu2><a href=#>Menu 2</a></li>
<li id=menu3><a href=#>Menu 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("pagecreate", function (event)
{
$("li#menu1 a.ui-btn").trigger ("vclick");
});
$("li").bind ("vclick", function (event)
{
var id = this.id;
$.ajax (
{
url : "action.php",
data : { menu : id },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").html (response);
}
});
});
</script>
action.php file
<?
$menu = $_REQUEST["menu"];
$html = "";
if ($menu == "menu1")
$html .= "<p> Content menu 1 </p>";
else if ($menu == "menu2")
$html .= "<p> Content menu 2 </p>";
else if ($menu == "menu3")
$html .= "<p> Content menu 3 </p>";
echo utf8_encode ($html);
?>
|
|
action30.php
data-position="fixed" attribute를 사용한 fixed type 의 toolbar 들을 관리하기 위해 jQuery Mobile은 아래 메소드들을 제공합니다.
Methods managing fixed toolbars
|
Method |
Signification |
|
$(selector) |
Search toolbars with the data-position = "fixed" attribute in the descendants of the elements represented by the specified selector, and transforms them into fixed toolbars. This allows to dynamically create these toolbars (see an earlier example in this chapter) |
|
$.mobile |
Enables
(if enable is true) or disables (if enable is false) the ability
to display and hide fixed toolbars by clicking in the window. By
default, clicking in the window displays or hides fixed toolbars
present in it. To disable this default, use
$.mobile |
|
$.mobile |
Allows you to reposition the fixed toolbars in the window, if the modification of the contents of the window has changed their position. The immediately parameter indicates whether repositioning occurs immediately (if true) or if it is done by a fade effect (if false, the default). |
|
$.mobile |
Allows
to hide the fixed toolbars in the window. They are redisplayed at
the next click in the window (unless this function has been
disabled by $.mobile |
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| GPS 와 구글 맵 사용하기 (0) | 2012.12.29 |
|---|---|
| Client side 데이터 베이스 이용하기 (0) | 2012.12.28 |
| 툴바 customize 하기 (0) | 2012.12.27 |
| 툴바에서 이벤트 다루기 (2) | 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 |