电话间隙和jQuery Mobile，如何更改内容而不是页面的 html？
我使用静态页脚和页眉。我使用 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 的内容？
I'm using a static footer and a header. I set the contents of these using javascript. They're dynamic.
<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>
I catch the click events on the menu items and I start out using $("#page").live('pageinit', mainMenu);
Then I'd like to change the $("#content") html using the following:
$.mobile.changePage( "main-menu.html", { transition: "slideup" } );
This however changes the entire page. How do I set it to only change the contents of #content?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
JQM 本身不支持仅替换 #content html。
但是，可以推出自己的系统，基本上是编写自己的加载内容的函数。
您必须使用我在此处描述的结构： 在 jQuery Mobile 和 PhoneGap 中创建模板化/持久页眉/页脚模板
It's not natively supported by JQM to only replace the #content html.
However, it's possible to roll your own system, basically writing your own functions that load the content.
You'll have to use the structure I've described here: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap