자바스크립트로 footer toolbar를 다이나믹하게 생성하는 대신 Ajax로 서버로부터 HTML 코드를 다운받아서 insert 해 보겠습니다.
Insert a 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 ();
}
});
</script>
<div>에 사용한 fixHeaderFooter () method call 을 잘 보세요. 이렇게 함으로서 data-position="fixed" attribute를 search 하고 거기에 따라 포지션을 정하도록 하는 겁니다. (여기서는 화면의 bottom 부분에 위치하게 되죠)
action.php file
<?
$html = "";
$html .= "<div id=footer class='ui-bar-e ui-footer' data-position=fixed>";
$html .= "<h1 class=ui-title>Footer part</h1>";
$html .= "</div>";
echo utf8_encode ($html);
?>
|
|
action28.php
tistory565_01.html툴바는 ui-bar-e
and ui-footer
CSS classes들에서 꾸며줍니다. 그리고 자바스크립트 코드내에서 fixHeaderFooter
() method에 의해
data-position="fixed"
attribute가 사용되게 될 거구요. 또한 내용을 중앙으로 맞추기 위해 <h1>
element를 사용해 ui-title
class를 사용하도록 합니다.
|
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Client side 데이터 베이스 이용하기 (0) | 2012.12.28 |
|---|---|
| 툴바 만드는 예제들 (0) | 2012.12.28 |
| 툴바 customize 하기 (0) | 2012.12.27 |
| 툴바에서 이벤트 다루기 (2) | 2012.12.27 |
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
| 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 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |