在jquery mobile中以弹出方式打开外部HTML代码段

Question

好吧，我对jquery有点生疏，而且是jquery手机的新手，所以不要对我太苛刻;)。好的，我正在用jquery mobile创建一个移动网站，它有很多页面，所以我不是把所有的页面放在一个大的多页面模板中，而是把它们放在单独的页面模板中。我有一个菜单按钮，当点击它时，弹出一个带有列表视图菜单的弹出窗口，这是可行的，但我必须将菜单放在每个页面模板中，但我宁愿将菜单保存在它自己的html文件中，甚至只是在jquery移动页面结构之外的dom中的某个地方，这样我就不必在每个页面模板中重复代码。

当菜单位于自己的文件中时，如何将菜单加载到弹出菜单中？如果失败，我如何将div加载到不在jquery移动页面内的弹出窗口中？

我的按钮：

   <a href="#main-menu" data-rel="popup">Menu</a>

我的列表视图菜单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>     

Answer 1

在一般意义上，以下是如何将html从外部文件加载到div中，beyon，我不太确定您到底想要做什么：

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

Answer 2

我有完全相同的问题，我已经写了一些东西，显示弹出窗口，但部分呈现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');
  });

});

<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>