Question

我正在使用静态页脚和标题。我使用javascript设置这些内容。他们很有活力。

<body>
    <div data-role="page" id="page">

        <div data-role="header">
            <h1>App name</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">  
            <p>Loading...</p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" id="menu1">Menu1</a></li>
                    <li><a href="#" id="menu2">Menu2</a></li>
                    <li><a href="#" id="menu3">Menu3</a></li>
                </ul>
            </div>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

我抓住菜单项上的点击事件，然后开始使用$("#page").live('pageinit', mainMenu);

然后我想使用以下内容更改$("#content") html：

$.mobile.changePage( "main-menu.html", { transition: "slideup" } );

然而，这会改变整个页面。如何将其设置为仅更改#content的内容？

Answer 1

JQM本身并不支持只替换#content html。

但是，可以滚动自己的系统，基本上编写自己的加载内容的函数。

$('#content').load('main-menu.html');

您必须使用我在此处描述的结构：Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

Phonegap＆amp; jQuery Mobile，如何更改内容的html而不是页面？

1 个答案: