Question

jquery mobile newbie - 我继承了这个项目。

我有很多页面＆＃39;在我的jquery移动应用程序中。在每个页面上我都有一个导航面板。每个页面都设置如下：

<div data-role="page" id="help_manual" data-theme="d">
    <div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
        <div data-role="controlgroup" data-corners="false">
            <a href="#userPage" data-role="button">Home</a>
            <a href="#MainMenu" data-role="button">User main menu</a>
        </div>
    </div>

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
           data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->

        <h3>User Manual</h3>
    </div>
    <div data-role="content">
        BLAH BLAH CONTENT
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <a href="#MainMenu" data-icon="arrow-l" class="ui-btn-lef ui-btn-inline" data-role="button">Back to main    menu</a>
    </div>
</div>

这一切都运作良好。然后你再做一个页面。 ......然后是另一个......然后另一个......突然间，你已经有了几十页，都有他们自己的菜单＆＃39;。它们都有效，但是由于所有菜单都相同，所以有很多冗余代码。

现在我想对所有菜单进行更改....而不是修改一个导航面板＆＃39;我必须在几十个容易发生错误的时候做出改变。

我试过简单地选择＆＃39;面板＆＃39;代码并将其移到＆＃39;页面之外＆＃39; div ...但这实际上导致了一个新的＆＃39; ＆＃39;页面＆＃39;单击按钮时。其他尝试移动此代码的各个部分同样被打破。

包含可以删除＆＃39;列表＆＃39;来自＆＃39;核心＆＃39;控制组...不幸的是，这仍然留下了很多冗余的代码，我有一个有趣的调整：这个页面需要能够脱机工作。这个应用程序的目的是为了能够离线，在现场收集数据，然后返回并上传。所以SSI不是一个好选择。

帮助？

Answer 1

这是一个JsFiddle，有多个页面，面板只写一次。

您应该在页面外编写一次面板。（如果每页有一个文件，只需将索引页面外的面板写为页面的兄弟）：

<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
    ...
</div>
<div data-role="page" id="help_manual" data-theme="d">
    ...
</div>

这样做并成为external panel。然后，您应该手动初始化它。

$('#navpanel_help_manual').panel();

以下面板均位于页面外。页面外部的面板必须手动初始化，并且不会由auto init处理。只要您使用Ajax导航，页面外的面板将保留在DOM中（除非手动删除），并且可以从任何页面打开或关闭。

如何使用jquery mobile处理多个导航面板菜单？

1 个答案: