持久的jquery移动导航栏答案

【问题标题】：Persistent jquery mobile navbar持久的jquery移动导航栏
【发布时间】：2012-06-19 14:43:11
【问题描述】：

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

以下内容改编自： 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>

【问题讨论】：

您正在添加三个具有相同 id 的元素，然后基于 id 创建导航栏，该导航栏将仅在第一次运行。在创建 html 内容时尝试class='navbar'，然后使用$('.navbar').navbar()

标签： jquery mobile cordova persistence navbar

【解决方案1】：

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

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

我会给你jquery中动态导航栏的示例代码。它会解决你的问题。

$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*/

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

【讨论】：