jquery mobile动态更改内容(不是整个页面)

时间:2013-07-09 09:07:47

标签: jquery-mobile

我有一个普通的jquery页面,包含标题,内容和面板

<div id="myPage" data-role="page">
    <nav id="myPanel" data-role="panel">...menu...</nav>
    <div id="myHeader" data-role="header">...button...text...</div>
    <div id="myContent" data-role="content">...welcome text...</div>
</div>

页面最初在面板中加载了一个菜单(带有自定义ajax调用),欢迎文本作为内容加载。除文字外,标题还包含一个用于打开菜单面板的按钮。

当用户点击菜单项时,我只想替换内容,而不是整个页面。

我一直在尝试

$.mobile.changePage('my/valid/url', {
    pageContainer : $('#myPage')
});

我可以在网络日志中看到我从JQM ajax调用中获取了正确的内容。但是当我查看DOM时,唯一发生的事情就是将div附加到#myPage,即未插入来自ajax的内容。而旧的内容仍然存在。见下文:

<div id="myPage" data-role="page">
    <nav id="myPanel" data-role="panel">...menu...</nav>
    <div id="myHeader" data-role="header">...button...text...</div>
    <div id="myContent" data-role="content">...welcome text...</div>
    <div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>

另一件事是整个页面#myPage被隐藏(display="none")。似乎JQM想要显示一个完整的新页面,而不是仅允许我更改#myPage内的一个div的内容。

是否可以使用JQM更改JQM页面的一部分?

我已经使用自定义ajax调用完成了它,然后自己将标记附加到DOM。但是我需要手动执行许多其他操作,例如增强,显示/隐藏负载指示器等。

0 个答案:

没有答案