持久化jquery移动navbar [英] Persistent jquery mobile navbar
问题描述
我想让持久化的Jquery Mobile导航栏页脚工作。我想使用javascript动态绘制（它是为PhoneGap应用程序），而不是使用PHP模板页脚。
I'm trying to get the persistent Jquery Mobile navbar footer working. I would like it to be drawn dynamically with javascript (it's for a PhoneGap application) rather than using PHP for templating the footer.
以下改编自：
http://the-jquerymobile-tutorial.org/jquery-mobile- tutorial-CH21.php
然而，jquery样式不适用于页面2和3.它就像$（＃navbar） .navbar（）没有被调用这些页面或被调用过早。
however, the jquery styling isn't being applied to pages 2 and 3. It's as if $("#navbar").navbar() isn't being called for these pages or is being called too early.
任何人都可以帮助我，我可能会错在哪里？或者指向一个具有动态持续导航条的代码示例，最好是具有活动按钮持久化？
Can anyone help me out with where I might be going wrong? Or point me to a code example which has a dynamic persistent navbar, preferably with active button persistence?
<!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>
推荐答案
在您的代码中， （）看起来很奇怪。因为我从来没有见过这些方法在jquery移动官方文档。还有一件事，你从来没有向listview的div元素提到 data-role =navbar。
In your code, navbar() looks very odd to me. Because i never seen these method in jquery mobile official documentation. And one more thing, you never mentioned the data-role="navbar" to the listview div element.
您可以使用noramal jquery .append（）方法动态附加jquery navbar。
You can dynamically append jquery navbar with noramal jquery .append() method.
在jquery中的动态导航栏。这将解决您的问题。
I will give you the sample code of dynamic navbar in jquery. It will solve your problem.
$navbar="";
$navbar+="<div data-role='navbar'>";
$navbar+="<ul><li><a href='a.html' class='ui-btn-active ui-state-persist'>One</a></li>";
/*This class="ui-btn-active ui-state-persist" is to highlight the first tab*/
$navbar+="<ul><li><a href='b.html'>Two</a></li>";
$navbar+="<li><a href='c.html'>Three</a></li></ul></div>";
$("#page1").append ($navbar); /*First append to page 1 of the footer*/
$("#page1").trigger("pagecreate"); /*To refresh the page and load the dynamic append navbar*/
在按钮中执行相同的过程单击page2和page3更改 class ='ui-btn-active ui-state-persist'相应页面。
Do the same process in the button click of page2 and page3 change the class='ui-btn-active ui-state-persist' repective pages.
这篇关于持久化jquery移动navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
