在jquery mobile中打开外部HTML片段作为弹出窗口

时间:2012-12-28 13:33:09

标签: javascript jquery html5 jquery-mobile

好吧我对jquery和jquery mobile有点生疏,所以对我来说很容易;)。好的我正在创建一个带有jquery mobile的移动网站,它有很多页面,所以不是将所有页面保存在一个大的多页面模板中,而是将它们放在单独的页面模板中。我有一个菜单按钮,单击弹出窗口时会显示一个列表视图菜单,这有效,但我必须将菜单放在每个页面模板中,但我宁愿将菜单保存在自己的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>     

2 个答案:

答案 0 :(得分:0)

从一般意义上讲,这里是你如何将外部文件中的html加载到div中,beyon,我不太确定你要做的是什么:

$('#myDiv').load('somepath/somefile.html');

答案 1 :(得分:0)

我有完全相同的问题,我写了一些显示弹出窗口的东西,但部分渲染了CSS [编辑]了几次尝试,我能够让它完美渲染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>