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

【问题标题】：Open external HTML snippet as popup in jquery mobile在 jquery mobile 中打开外部 HTML 片段作为弹出窗口
【发布时间】：2012-12-28 13:33:08
【问题描述】：

好的，我对 jquery 有点生疏了，而且对 jquery mobile 很陌生，所以请放轻松；）。好的，我正在使用 jquery mobile 创建一个移动网站，它有很多页面，所以我没有将所有页面保存在一个大型多页面模板中，而是将它们放在单独的页面模板中。我有一个菜单按钮，当单击它时会出现一个带有 listview 菜单的弹出窗口，这是可行的，但我必须将菜单放在每个页面模板中，但我宁愿将菜单保留在自己的 html 文件中，甚至只是在dom 位于 jquery 移动页面结构之外，因此我不必在每个页面模板中重复代码。

当菜单位于自己的文件中时，如何将菜单加载到弹出窗口中？失败了，如何将 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>

【问题讨论】：

我为列表视图添加了 html，但我不确定弹出窗口的实际 javascript 代码，即使它要求执行我的要求？
我已经设法让它部分使用以下代码，但它以无样式加载 html。

标签： javascript jquery html jquery-mobile

【解决方案1】：

一般来说，您可以通过以下方式将 html 从外部文件加载到 div 中，除此之外，我不太确定您到底要做什么：

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

【讨论】：

我只是想使用 jquery mobiles popup 方法从外部页面而不是从 dom 加载弹出窗口。

【解决方案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');
  });

});

顺便说一句，您的主 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>

【讨论】：