[英]How to open an external html page as a popup in jquery mobile?
[英]Open external HTML snippet as popup in jquery mobile
好的,我对jquery和jquery mobile有点陌生,所以对我轻松一点;)。 好的,我正在用jquery mobile创建一个移动网站,它有很多页面,所以不是将所有页面都放在一个大的多页面模板中,而是将它们放在单独的页面模板中。 我有一个菜单按钮,当单击一个弹出菜单时会出现一个带有listview菜单的菜单按钮,它可以工作,但是我必须将菜单放在每个页面模板中,但是我宁愿只是将菜单保留在自己的html文件中,甚至只是将其保留在菜单中的某个位置。 dom在jquery移动页面结构之外,因此我不必在每个页面模板中重复代码。
当菜单位于自己的文件中时,如何将菜单加载到弹出窗口中? 未能解决如何将div加载到不在jquery移动页面内的弹出窗口中?
我的按钮:
<a href="#main-menu" data-rel="popup">Menu</a>
我的listview菜单html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>
从一般意义上讲,这是将外部文件中的html加载到div中的方法,除此之外,我不确定您到底要做什么。
$('#myDiv').load('somepath/somefile.html');
我也有同样的问题,我写了一些东西来显示弹出窗口,但是又多次尝试部分渲染CSS [edit],我能够使它完美地渲染CSS:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
顺便说一句,您的主要html页面应包含div声明:
<div data-role="popup" id="main-menu"></div>
<a href="#main-menu" data-rel="popup">Menu</a>
并且menu.html应该只包含div内部的内容:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.