2

我真的必须在每个页面 DIV 上重复“导航栏”吗？或者是否有一种解决方案可以为多页 html 中的所有页面仅使用一个页脚？

 <div data-role="page" id="page11">
        <div data-role="header"> <h1>Home</h1> </div>

        <div data-role="content"> <h3>TEST</h3>
            <p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
        </div>

        <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header"> <h1>Hilfe </h1> </div>
        <div data-role="content"> <h3>TEST </h3> </div>

         <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

感谢您的任何想法！

4

2 回答 2

2

是的，您的导航栏/页脚/页眉必须出现在所有页面 DOM 元素中。但是为了避免重复自己，您在客户端和/或服务器端有很多选择。我总是建议在这种情况下使用某种模板。

在客户端，您可以将导航栏放入<script>标签下方的<body>标签中。为这个脚本标签分配一个唯一的 id 属性并添加一些 JavaScript，如下所示：

模板片段：

<script type="text/template" id="myFooterTemplateID">
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <div data-role="navbar">
            <ul>
                <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
            </ul>
        </div> 
    </div>
</script>

JavaScript：

jQuery('*[data-role="page"]').on("pagebeforecreate", function(e) {
    var page = jQuery(this);
    // please replace this part with a template engine ...
    var header = jQuery(jQuery("#myFooterTemplateID").html()); 

    // bind some events to the header's content here - if any
    // for example: 
    // header.find('.myButtonClass').bind('tap', onButtonClicked);

    // append to page
    page.append(header);
});

查看Handlebars.js或Underscore-Templates以获得生产就绪的 JS 模板，而不是编写自己的库。

于 2012-10-04T19:53:40.780 回答
2

不，在以后的 jqm 版本中，例如 1.4.0 版本，您不需要在每个页面 DOM 元素中包含导航栏。

这是一个出现在所有页面上的导航栏示例，并且只包含一次，在页面元素之外： http: //demos.jquerymobile.com/1.4.0/toolbar-fixed-persistent/

基本上，您只需要添加data-position="fixed"到页眉/页脚，并使用以下命令启动工具栏：

$(function() {
    $( "[data-role='navbar']" ).navbar();
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});
于 2015-05-21T11:45:38.690 回答