Question

我在jQuery Mobile（JQM）中执行菜单的方式现在是这样的：对于每个页面（data-role="page"），我创建了一个导航（data-role="navbar"），所以有重复，这违反了不要重复自己的原则。

有没有办法只创建一个菜单，它会在所有页面上显示？

Answer 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>');
});

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

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

1 个答案: