툴바 만드는 예제들
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 |
|
|