Question

在jQuery Mobile中以某种方式创建类似masterpage（asp.net）的东西是否可行？我正在开发一个移动应用程序（如果重要的话，使用phonegap），并且我在所有页面上都有相同的页眉和页脚（在应用程序中导航的一些按钮）。我想要做的只是创建一个页脚...而不是在每个div（页面容器）中。

问候

编辑：这就是我想要的标记，但显示的只是page1或page2，没有页眉/页脚

<div data-role="header">
        <h1>Header</h1>
</div>

    <div data-role="content">
        <div data-role="page" id="page1" data-title="Page 1">
            Page 1
        </div>
        <div data-role="page" id="page2" data-title="Page 2">
            Page 2
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <table>
            <tr>
                <td>
                    <a href="#page1">Page 1</a>
                </td>
                <td>
                    <a href="#page2">Page 2</a>
                </td>
            </tr>
        </table>
    </div>

Answer 1

您可以查看这个好的教程here，它解释了如何构建代码以便重用页眉和页脚。

它基本上创建了一个名为Load的包装器方法，它将页面动态加载到dom中的给定位置（通常是您的内容占位符）。

Answer 2

回到这个问题后，我决定使用backbone.js。这是一个javascript MVC框架。

有关更多信息，请参阅：

http://backbonejs.org/

http://backbonetutorials.com/

我在研究期间也发现了一些事情：

http://kmalakoff.github.com/knockback/ 还没试过，但听起来很不错。该框架将backbone.js和knockout.js（MVVM框架）结合在一起。

希望这可以帮助其他人解决同样的问题！

Answer 3

如果您使用Asp.Net开发JQM，只需使用Asp.Net母版页。身体可能看起来像......

<body>

<div data-role="page" data-theme="c" id="pgMaster">
    <div data-role="header" data-nobackbtn="true" data-theme="a">
        <asp:ContentPlaceHolder ID="PageTitleContent" runat="server" />
    </div>
    <div data-role="content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    <div data-role="footer" data-id="nav" data-theme="a">
        <h4 style="font-size: 75%">
            <%= AppCode.Common.CGlobals.CopyRight %>
        </h4>
    </div>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</div>
</body>

我在http://Cta.yyyz.com的网站是使用Aps.Net在enableviewstate=false中使用web.Config构建的，因此您真正创建了基本的html页面 - 没有膨胀。

“Masterpage” - 在PhoneGap应用程序中使用jQuery Mobile进行布局

3 个答案: