持久jquery移动导航栏

我试图让持久的Jquery Mobile导航栏脚工作。 我希望它是用javascript（它是用于PhoneGap应用程序）动态绘制的，而不是使用PHP来模板页脚。

以下内容改编自： http ： //the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH21.php

但是，jquery样式没有应用于第2页和第3页。就像$（“＃navbar”）。navbar（）没有为这些页面调用或过早调用。

任何人都可以帮我解决我可能出错的地方吗？ 或者指向一个具有动态持久导航栏的代码示例，最好使用活动按钮持久性？

         
 
 
1
 
 
 
 Window content 
 
 
 
 
 
2
 
 
 
 Window content 
 
 
 
 
 
3
 
 
 
 Window content 
 
 
    var html = ""; html += "
"; html += "
 Footer part 
"; html += "
"; html += "
"; html += "
Refresh
"; html += "
Help
"; html += "
Close
"; html += "
"; html += "
"; html += "
"; $("#page1").append (html); $("#page2").append (html); $("#page3").append (html); $("#navbar").navbar();   $("li").bind ("click", function (event) { alert ($(this).find ("a").text ()); });  

Answer 1

在你的代码中， navbar()看起来很奇怪。 因为我从未在jquery移动官方文档中看到过这些方法。 还有一件事，你从来没有向listview div元素提到data-role="navbar" 。

您可以使用noramal jquery .append()方法动态附加jquery navbar。

我将在jquery中给你动态navbar的示例代码。 它会解决你的问题。

 $navbar=""; $navbar+="
"; $navbar+="
One
"; /*This class="ui-btn-active ui-state-persist" is to highlight the first tab*/ $navbar+="
Two
"; $navbar+="
Three
"; $("#page1").append ($navbar); /*First append to page 1 of the footer*/ $("#page1").trigger("pagecreate"); /*To refresh the page and load the dynamic append navbar*/ 

在第2页和第3页的按钮单击中执行相同的过程会更改class='ui-btn-active ui-state-persist'页面。