Question

我想在我的桌面页面上使用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项目。）

知道该怎么做？

非常感谢建议。

Answer 1

你永远不应该包含jQuery Mobile，希望它只会影响你页面的一部分。 jQuery Mobile非常具有侵入性，它将超越你的整个页面..

您有两种可能的问题解决方案。强制jQuery Mobile跳过您的部分内容， here 您可以找到可用的解决方案。

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

Answer 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页面覆盖桌面HTML div布局

2 个答案: