footer toolbar 를 바꿔서 navigation bar (navbar) 를 넣어 보겠습니다.
Insert a navigation bar in the footer toolbar 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>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
$.ajax (
{
url : "action.php",
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home").append (response);
$("#home").fixHeaderFooter ();
$("#navbar").navbar ();
}
});
</script>
이 소스코드는 이전 글의 소스 코드와 거의 같습니다. 단지 element 를 navigation bar 로 변환하기 위해 navbar
() method 를 사용한 것만 다릅니다.
action.php file
<?
$html = "";
$html .= "<div id=footer class='ui-bar-a ui-footer' data-position=fixed>";
$html .= "<h1 class=ui-title>Footer part</h1>";
$html .= "<div id=navbar>";
$html .= "<ul>";
$html .= "<li><a href=# data-icon=refresh>Refresh</a></li>";
$html .= "<li><a href=# data-icon=info>Help</a></li>";
$html .= "<li><a href=# data-icon=delete>Close</a></li>";
$html .= "</ul>";
$html .= "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
|
|
action29.php
tistory567_01.html이 navigation bar 는 서버에 의해 return 된 HTML 에 전통적인 방법으로 간단하게 describe 돼 있습니다.
만약 여기서 navbar
() method 를 없애면 HTML 은 jQuery Mobile 에 의해 변환되지 않게 됩니다. 그러면 아래와 같이 되죠.
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| GPS 와 구글 맵 사용하기 (0) | 2012.12.29 |
|---|---|
| Client side 데이터 베이스 이용하기 (0) | 2012.12.28 |
| 툴바 만드는 예제들 (0) | 2012.12.28 |
| 툴바 customize 하기 (0) | 2012.12.27 |
| 툴바에서 이벤트 다루기 (2) | 2012.12.27 |
| 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 |
