Question

我刚刚开始使用JQuery Mobile构建移动网站。我正在做一个非常简单的设计 - 只是一个图像，一些文本和一个链接到类似简单页面的按钮。我注意到当我点击第一页上的按钮时它会断开 - 看起来它被设置为高度：100％，就在页面转换之前。

然后，当我按后退按钮查看初始页面时，按钮已移动到屏幕的最顶部。我对Jquery Mobile很陌生，所以我真的不明白它们是如何格式化的，这使得它很难调试。

为了进一步向自己证明我并不疯狂，我直接从JQuery Mobile Docs复制了基本的多页面布局。此页面有效，直到我使用data-role =“button”将链接更改为按钮。

这是我网站的代码。或者，您可以在http://www.printartsportal.com/mobileContact

查看实际页面

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>

<!-- Start of first page -->
<div data-role="page" id="foo">

        <div data-role="header">
                <h1>Foo</h1>
        </div><!-- /header -->

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a data-role="button" href="#bar">bar</a></p>
        </div><!-- /content -->

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

        <div data-role="header">
                <h1>Bar</h1>
        </div><!-- /header -->

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p><a href="#foo">Back to foo</a></p>
        </div><!-- /content -->

        <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /header -->
</div><!-- /page -->
</body>
</html>

编辑：这似乎只发生在Chrome和Droid 2 Global上的默认浏览器中（或者至少它在FF中工作）。同样有趣的是，在Chrome中使用代码检查器时，突出显示按钮元素会在所在的位置显示蓝色小框，但按钮仍位于页面顶部。

更新1：事情变得更加怪异了。 Phil Pafford发布了jsfiddle代码完美无缺的代码。我复制了小提琴用于jquery / jqm.js / jqm.css的确切链接，以及将该HTML重新复制到我的文件中。我还是得到了这个问题！

Answer 1

在jsfiddle上使用你的代码按预期工作：http://jsfiddle.net/S9yXK/

我的建议是下载jQM并在本地使用这些库，因为jQM Demo站点可能存在问题。

注意：我确实看到他们一直在更改JS和HTML，他们喜欢在演示网站上进行大量测试。

下载：http://jquerymobile.com/download/

Answer 2

我认为这是issue 1565和/或issue 1420的结果。两者都应该在最新的（post a4.1）版本中修复。

运行Android 2.2的HTC Evo上的特定用例在a4.1失败，并以test成功

Pages＆amp;对话框 - ＆gt;页面剖析 - ＆gt;查看样板模板 - ＆gt;回到

在您的示例中，替换以下行：

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

与

<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

Jquery Mobile Button打破并进一步打破布局

2 个答案: