永続的な Jquery Mobile navbar フッターを機能させようとしています。フッターのテンプレート化に PHP を使用するのではなく、javascript (PhoneGap アプリケーション用) を使用して動的に描画したいと考えています。
以下は、http: //the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH21.phpから改作されています。
ただし、jquery スタイルはページ 2 と 3 に適用されていません。まるで $("#navbar").navbar() がこれらのページに対して呼び出されていないか、呼び出されるのが早すぎます。
私が間違っている可能性がある場所で誰かが私を助けることができますか? または、できればアクティブなボタンの永続性を備えた、動的な永続的なナビゲーションバーを持つコード例を教えてください。
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile.css />
<script src=lib/jquery.js></script>
<script src=lib/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=page1>
<div data-role=header>
<h1>1</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
<div data-role=page id=page2>
<div data-role=header>
<h1>2</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
<div data-role=page id=page3>
<div data-role=header>
<h1>3</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<div data-role=footer data-position=fixed>";
html += "<h1> Footer part </h1>";
html += "<div id=navbar>";
html += "<ul>";
html += "<li><a href=#page1 data-icon=refresh>Refresh</a></li>";
html += "<li><a href=#page2 data-icon=info>Help</a></li>";
html += "<li><a href=#page3 data-icon=delete>Close</a></li>";
html += "</ul>";
html += "</div>";
html += "</div>";
$("#page1").append (html);
$("#page2").append (html);
$("#page3").append (html);
$("#navbar").navbar();
</script>
<script>
$("li").bind ("click", function (event)
{
alert ($(this).find ("a").text ());
});
</script>