jQuery Mobile one菜单（仅一个HTML代码）

我现在在jQuery Mobile（JQM）中创建菜单的方式是这样的：对于每个页面（

data role=“page”

），我创建一个导航（

data role=“navbar”

），因此存在重复，这违反了不要重复自己的原则

---

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

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

...

这种方法很好，因为它不需要自定义编码，而且您可以像其他页面一样设置菜单的输入/输出动画。现在，jquerymobile1.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>');
});

//等待DOM.ready事件
$（函数（）{
$（'body'）。追加（'\
\
\
\
\
...\
\
\
');
});

---

请注意，我已转义了结束行，因此不会引发错误。

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

...

这种方法很好，因为它不需要自定义编码，而且您可以像其他页面一样设置菜单的输入/输出动画。现在，jquerymobile1.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>');
});

//等待DOM.ready事件
$（函数（）{
$（'body'）。追加（'\
\
\
\
\
...\
\
\
');
});

---

请注意，我已转义了结束行，因此不会抛出错误。

这对我不起作用。您的解决方案（在JSFIDLE:）有一个菜单作为页面，在其他页面上不可见，您必须首先导航到它，这是错误的。我怀疑你的javascript解决方案会像JQM在HTML变成菜单（添加类等等）之前在HTML上做的那样起作用。这对我不起作用。您的解决方案（在JSFIDLE:）有一个菜单作为页面，在其他页面上不可见，您必须首先导航到它，这是错误的。我怀疑您的javascript解决方案是否能像JQM在HTML变成菜单（添加类等等）之前在HTML上做的那样发挥作用。