jQuery Mobile 一个菜单（只有一个 HTML 代码）答案

【问题标题】：jQuery Mobile one menu (only one HTML code)jQuery Mobile 一个菜单（只有一个 HTML 代码）
【发布时间】：2012-04-02 16:34:30
【问题描述】：

我现在在 jQuery Mobile (JQM) 中做菜单的方式是这样的：为每个页面 (data-role="page") 我创建一个导航 (data-role="navbar")，所以有重复，这违背了不要重复自己的原则。

有没有办法只创建一个菜单并在所有页面中显示？

【问题讨论】：

标签： jquery jquery-mobile navigation

【解决方案1】：

创建一个作为您的菜单的页面，然后从所有其他页面链接到“菜单页面”。我要么将“菜单页面”的代码添加到站点中的每个文档中，要么编写一些将“菜单页面”动态注入 DOM 的 JS 代码（每次整页加载仅一次）。

<body>

    <div data-role="page" id="home">
        <div data-role="content">
            <a data-role="button" href="#menu">Menu</a>
        </div>
    </div>

    <div data-role="page" id="menu">
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#home">Home</a></li>
                ...
            </ul>
        </div>
    </div>

</body>

这种方法很好，因为它不需要自定义编码，并且您可以像任何其他页面一样为菜单的输入/输出动画设置动画。现在 jQuery Mobile 1.1.0+ 可以通过设备功能检测和提供转换，这更好用。

你也可以像这样通过JS添加菜单页面：

//wait for the DOM.ready event
$(function () {
    $('body').append('\
        <div data-role="page" id="menu">\
            <div data-role="content">\
                <ul data-role="listview">\
                    <li><a href="#home">Home</a></li>\
                    ...\
                </ul>\
            </div>\
        </div>');
});

请注意，我已经转义了结束行，所以这不会引发错误。

【讨论】：

这对我不起作用。您的解决方案（在 jsfiddle 上：jsfiddle.net/JHbBm）有一个菜单作为页面，在其他页面上不可见，您必须先导航到它，这是错误的。而且我怀疑您的 javascript 解决方案是否会起作用，因为 JQM 在 HTML 成为菜单（添加类和诸如此类）之前对 HTML 做了一些魔术。