jQuery Mobile 页面覆盖桌面 HTML div 布局答案

【问题标题】：jQuery Mobile page overrides desktop HTML div layoutjQuery Mobile 页面覆盖桌面 HTML div 布局
【发布时间】：2014-07-23 13:40:18
【问题描述】：

我想在我的桌面页面上使用 jQuery mobile。我可能想错了，但我尝试简单地将页面元素插入现有的标准 div，如下所示：

<body>
    <div id="left_sidebar"> [...] </div>

    <div id="mylist" data-role="page">
        <div data-role="listview"> [list items bla bla] </div>
    </div>

    <div id="right_sidebar"> [...] </div>
    <div id="site_footer"> (c) bla blub </div>
</body>

...希望只有中间部分显示“移动”页面元素。

但是，该页面 div 似乎覆盖了整个网站，使所有其他 div 不可见，并将整个正文变成了一个移动页面（尽管很好地显示了我的 listview 项目...在整个屏幕上）。

知道该怎么做吗？

非常感谢您的建议。

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

您永远不应该包含 jQuery Mobile，希望它只会为您的页面的一部分设置样式。 jQuery Mobile 非常具有侵入性，它会占据你的整个页面..

对于您的问题，您有 2 种可能的解决方案。强制 jQuery Mobile 跳过你的一些内容，here你可以找到可用的解决方案。

另一方面，如果你只需要一些 jQuery Mobile 功能，你应该只使用需要的东西来重建框架，你可以这样做 here。

【讨论】：

我明白了，但这似乎要复杂得多。我对 iframe 的唯一担心是我不能将它们用于太多项目，比如很多 jquery 移动按钮等......这就是很多 iframe。
抱歉，您的解决方案看起来像用原子弹杀死蚊子。当有其他合适的解决方案时，使用 iFrame 毫无意义。

【解决方案2】：

好吧，我好像找到了一种方法（不知道有没有其他方法），就是简单的把手机页面分开，调用成iframe。

几乎是微不足道的，但我希望有一种方法可以通过简单的 div 布局来做到这一点。

无论如何，这就是我最终的结果：

<body>
    <div id="left_sidebar"> [...] </div>

   <iframe src="JQMPage.html" frameborder="0" width="490" onload='javascript:resizeIframe(this);'></iframe>

    <div id="right_sidebar"> [...] </div>
    <div id="site_footer"> (c) bla blub </div>
</body>

...其中“JQMPage.html”是我单独保存的移动页面，resizeIframe 函数只是根据“JQMPage.html”页面的高度调整 iframe 的高度，以随着列表的扩展而扩展。

欢迎任何更好的想法！干杯

【讨论】：

别这样，看我下面的回答。
我一定会看看那个 jQuery Mobile 下载生成器。如果我理解正确，我可以只使用我想要使用的单个元素，而不使用那些会覆盖整个页面的元素？
实际上我刚刚发现，如果您取消页面启动/格式化，大部分小部件和其他功能也会自动禁用...所以我会看看您的其他选项强制跳过元素。