在jQuery Mobile和PhoneGap中创build模板/持久页眉/页脚模板
我正在用jQuery Mobile / PhoneGap来编写移动应用程序。 我正在使用这个示例模板 ，它使用HTML / JS来创build页面。 在一个单独的html文件中没有所有的<page>标签，他把它分开了，所以编辑起来更容易。
由于每个页面都有一个单独的文件，包含temped的页眉/页脚的最佳方法是什么？ 我只看到它需要复制并粘贴到每个HTML页面的整个页脚 – >导航栏代码。 这似乎不应该是。 例如，如果您想更改一个菜单项，则需要进入每个页面并进行更改。
我错过了什么解决scheme？
也许我只是不了解jQuery Mobile。 例如，他们的侧边栏用于他们的文档 – 是侧边栏代码复制并粘贴到每个页面上？ 这没有意义。 这跟我在这里问的关于页脚的问题是一样的。
http://jquerymobile.com/test/docs/pages/page-cache.html
这是我得到的似乎不正确（和$.live('pageinit')不工作）。 这个HTML是每个HTML页面上的内容：
<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">
和JS
$.live('pageinit', function (event) { displayFooter(); }); function displayFooter() { $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' + '<ul>' + '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' + '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' + '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' + '</ul>' + '</div>'); }
我一直在试图解决这个问题几天，现在我已经非常接近解决scheme了。 我使用下面的HTML：
<body> <div data-role="page" id="page"> <div data-role="header"> <h1 id="title">Title</h1> </div><!-- /header --> <div data-role="content" id="content"> <p>Loading...</p> </div><!-- /content --> <div data-role="footer" id="footer" data-position="fixed"> <div data-role="navbar" id="navbar"> </div> </div><!-- /footer --> </div><!-- /page --> </body>
我已经创build了以下函数来使用ajax加载菜单/内容：
$(document).on('pageinit', "#page", function() { // for example: displayFooter(); loadContent("main"); loadMenu("default"); }); function loadContent(location) { return $('#content').load("views/content/"+location+".html", function() { $(this).trigger('create'); }); } function loadMenu(location) { $("#menu").remove(); $("#navbar").remove(); $("#footer").html('<div data-role="navbar" id="navbar">'); $("#navbar").html('<ul id="menu"></ul>'); $("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); }); return true; }
.trigger('create'); 和.navbar(); 是保持JQM样式正确所需的方法，但是，仍然有一个小错误。 菜单的位置（使用css top：… px设置）有时不正确，并在第一次敲击后将其自身移动到正确的位置。 真的很接近！
编辑：通过将#footer设置为position: fixed; 我上面提到的小错误已经消失了。 另外，如果由JQM引起的top值导致的位置不正确，那么很容易就可以计算出#footer的top （以px为#footer ）。
像这样的东西：
function getText() { //return footer text here } $("div:jqmData(role='page')").live("pagebeforecreate",function() { // get find the footer of the page var $footer =$(this).page().find('div:jqmData(role="footer")') // insert it where you want it... }
你可以在getText中定义angular色= footer，然后检查它是否被定义了…如果没有，就添加它。
如果你真的想正确地做到这一点，你需要看看像Thorax或JavaScriptMVC的js框架。
在JMVC应用程序中，您可以从任何视图执行此操作：
<div data-role="page"> <%== $.View('./header.ejs') %> <div data-role="content"> ... </div> <%== $.View('./footer.ejs') %> </div>
jQuery Mobile实际上仅用于移动设备的渐进式标记增强和样式。 对于实际的MVC部分，您需要一个MVC框架。
jQuery Mobile的例子也主要面向构build移动网站，因为他们从服务器获取页面假设你的代码重用发生在服务器端。 phonegap应用程序是一个完整的野兽，因为你将生成这些页面或从本地静态文件。 这就是MVC框架，因为您将使用控制器，视图，视图助手和模型类来构build页面。 通过监听脚本页面上的jQm文档页面上显示的pagebeforeshow事件，将所有这些信息绑定到jQuery Mobile
我们还没有find一个很好的方法来做到这一点。 所以我们实际上在我们的自定义js文件中dynamic地处理这个。 查找结束容器 – 然后在最后一个内容divclosures后dynamic添加页脚。
取决于你如何加载相应的页面。
如果你使用rel =“external” – 没有AJAX，每个页面将被重新加载。
如果您使用常规的JQM – AJAX，JQM将抓取页面并将其附加到您现有的DOM。 把你的第一页看作你的“主播”页面，随后的所有页面都被添加/删除。
在第二种情况下，您可以为每个页面上的元素指定一个data-append-to-all-pages =“true”属性。
然后，只要听取相应的事件（pagebeforeshow？），并在显示之前将具有上述标签的元素添加到新页面。 这种方式只需要在第一页上设置元素，然后自动添加到任何后续页面被拉入和添加到DOM。
我现在用一个login表单来查看这个表单，这个login表单在login之外的每个页面上都需要，并且必须避免以重复input＃someID结尾。
编辑 – 可能的解决scheme
把相应的元素放在第一页，并添加独特的属性，如下所示：
<div data-role="navbar" data-unique="true" data-unique-id="log"> // full navbar </div>
所有其他页面只是获得独特的元素容器
<div data-role="navbar" data-unique="true" data-unique-id="log"></div>
然后使用这个脚本：
$('div:jqmData(role="page")').live('pagebeforehide', function(e, data) { // check page you are leaving for unique items $(this).find('div:jqmData(unique="true")').each(function(){ // more or less 1:1 stickyFooter var uniqueID = $(this).jqmData("unique-id"), nextPage = data.nextPage, nextUnique = nextPage && nextPage.find( "div:jqmData(unique-id='"+uniqueID+"')" ), nextMatches = nextUnique.length && nextUnique.jqmData('unique-id') === uniqueID; // if unique items on previous and new page are matching if ( uniqueID && nextMatches ) { nextUnique.replaceWith( uniqueID ); $(this).jqmData("unique-id").empty(); } }); });
当然，这意味着你需要每个页面上的独特容器。 但是，当你遍历应用时，你只需要携带它的内容。 应该为我工作，并避免在DOM内部具有相同的loginforms2+次。
另外你可以自由地编辑它的内容，例如添加活动类。
不要使用pageinit，你应该听的事件是pagecreate和pageshow，pagecreate在第一次加载页面的时候被调用，但是当你回到页面时，例如在后退button上，pagecreate就不会被调用。 每次显示页面时都会触发页面显示，因此只需将实时监听器绑定到添加页脚的每个页面的页面显示事件（假设您的页脚可能会更改，否则使用pagecreate）。
我有一个更长的例子，告诉你如何正确绑定到另一个问题的事件： https : //stackoverflow.com/a/9085014/737023
是的，一个很好的解决scheme就是使用一个PHP / CF包括，这是我使用，而不是JS。
编辑我的坏，似乎pageinit现在使用，而不是pagecreate （见这里） ，但它仍然认为，页面显示每次显示页面时触发 – 所以你可以使用这些，因为你需要
