Phonegap&jQuery Mobile,如何更改内容的html而不是页面?
问题描述:
我正在使用静态页脚和页眉。我使用javascript设置了这些内容。他们是动态的。Phonegap&jQuery Mobile,如何更改内容的html而不是页面?
<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
我能明显使用'$( '#内容')的负载( '主menu.html');'但这是绕过jQuery的移动和失去使用他们的转换的能力! – bartolsthoorn 2012-02-09 12:19:09