jquery - Phonegap 和 jQuery Mobile,如何更改内容而不是页面的 html?

标签 jquery ajax jquery-mobile cordova

我使用静态页脚和页眉。我使用 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 的内容?

最佳答案

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

但是,可以推出自己的系统,基本上是编写自己的加载内容的函数。

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

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

关于jquery - Phonegap 和 jQuery Mobile,如何更改内容而不是页面的 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9210674/

相关文章:

javascript - 谷歌地图无限线/增加长度或纬度lng计算

javascript - jQuery 值属性选择器未返回正确数量的元素

javascript - Ajax 获取请求在使用 HTTPS 的 Safari 中不起作用

html - 如何在 jquery mobile 中为单个 select.option 元素指定字体系列?

javascript - jquery mobile 使自定义元素可聚焦

jquery - 如何使用 jquery 在水平导航菜单上滑动这些按钮?

javascript - 连接到 php 类时出现 ajax 错误

javascript - 从输入元素获取表单和 FormData 对象?

php - jQuery 和 PHP 的聊天功能不写入数据库

javascript - 为什么我的标题文本被 chop 了?