我有一个普通的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。但是我需要手动执行许多其他操作,例如增强,显示/隐藏负载指示器等。