Question

我是否真的必须在每个页面DIV上重复“Navbar”？或者是否有一个解决方案只能在多页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>

任何想法的Thx！

Answer 1

是的，您的navbar / footer / header必须出现在所有page-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-templating，而不是编写自己的库。

Answer 2

NO，在以后的jqm版本中，例如版本1.4.0 ，您不需要在每个page-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();
});

JQuery Mobile - 在多页模板中修复导航

2 个答案: