保持查询移动标头相同

Question

我正在编写一个在多个页面上具有相同标题的小应用程序，因此我不想再次编写相同的代码，我想要包含一个变量，类似于'include（'header.php'）'在php。

我目前已经完成了：

  //Set header for each page
  var fund_header = '<div data-role="header" data-theme="z" data-position="inline"><a href="javascript:void(0)" onclick="javascript: reset(); $.mobile.changePage("#fund_1");" data-icon="delete" class="restart">Restart</a><h1>Funding</h1><a href="index.html" data-icon="home" class="ui-btn-right" data-iconpos="notext" rel="external" data-ajax="false">Home</a></div>';

然后在页面上添加：

<div data-role="page" id="fund_2" data-theme="z">
    <script type="text/javascript">document.write(fund_header);</script>

这是最佳做法吗？或者有更好的方法吗？

Answer 1

您可能希望创建一个单独的标头html文件并使用Ajax加载它，而不是将标头存储在变量中。

我自己没有尝试过，但是看看jQuery Mobile的API，看来你可以使用$.mobile.loadPage，而不是自己编写ajax请求。

请求可能看起来像： $.mobile.loadPage( 'header.html', { pageContainer: $('header') });

请参阅：http://code.jquery.com/mobile/latest/demos/docs/api/methods.html

如果这不起作用，你也可以使用jQuery的.ajax（http://api.jquery.com/jQuery.ajax/）。

很高兴听到JQM提供更好的解决方案。