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

【问题标题】："Masterpage"-Layout with jQuery Mobile in a PhoneGap app“Masterpage”-在 PhoneGap 应用程序中使用 jQuery Mobile 进行布局
【发布时间】：2012-02-11 10:41:46
【问题描述】：

是否有可能在 jQuery Mobile 中创建类似母版页 (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>

【问题讨论】：

此功能处于提案阶段。看看这个stackoverflow.com/questions/6875404/…
HTML "includes" 例如在 PHP 中可能很有趣，但不是我想要的……我现在也可以使用 iFrame。我想要做的是使用 jQuery Mobile 导航作为它提供的，但我不想改变整个页面，而只是页面的一部分。

标签： jquery-mobile cordova

【解决方案1】：

你可以看看这个很好的教程here，它解释了如何构造你的代码，这样你就可以重用页眉和页脚。

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

【讨论】：

【解决方案2】：

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

更多信息见：

http://backbonejs.org/

http://backbonetutorials.com/

也是我在研究过程中发现的：

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

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

【讨论】：

【解决方案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 和web.Config 中的enableviewstate=false 构建的，所以您实际上是在创建基本的html 页面——没有臃肿。

【讨论】：

我正在使用 PhoneGap 开发一个移动应用程序（如解释 ;)）。在那里，您的页面没有服务器部分......您必须开发部署在移动设备上的 html+javascript。所以 .html 和 .js 文件在设备上是“硬”的 => 没有 asp.net =/