1

我在 jQuery Mobile 和 Phonegap 应用程序中有 2 个页面，index.html 和 about.html

索引.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    ... load jquery and jquery mobile...
</head> 

<body> 
    <div data-role="page" id="index">
    ...content goes here...
        <a href="about.html"  data-role="button">about</a>
    </div>
</body>
</html>

而 about.html 只有页面数据角色

<div data-role="page" id="about">
<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
...content goes here...

<a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
    <div data-role="content" data-theme="c">
        <a href="#page" data-role="button" data-theme="c" >Ok</a>
    </div>
</div>

</div>

我遇到的问题是，一旦我加载about页面，对话框和返回链接就不起作用。

如果我将弹出 html 放在其中index，它将起作用。

此外，当新页面加载时，样式就在那里，这意味着 jquery mobile 已加载。

关于这个问题的任何想法？

谢谢

4

1 回答 1

0

从我所看到的你的代码工作得很好。

我已经从您的示例中创建了这些文件_

索引.html

<!DOCTYPE html>
<html>
  <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"/></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"/></script>
  </head>
  <body>
        <div data-role="page" id="index">
        ...content goes here...
            <a href="about.html"  data-role="button">about</a>
        </div>  
  </body>
</html>

about.html

    <div data-role="page" id="about">
            <a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
            ...content goes here...

            <a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
            <div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
                <div data-role="content" data-theme="c">
                    <a href="#page" data-role="button" data-theme="c" >Ok</a>
                </div>
            </div>              
    </div>

上面的代码工作得很好。也许您对 jQuery Mobile 和 jQuery 版本不匹配有疑问？您的代码中唯一有问题的部分是这个后退按钮：

<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>

不要使用带有 data-rel="back" 的 href 位置，data-rel="back" 具有更大的优先级，因此它不是错误。在弹出窗口关闭后，此后退按钮也无法正常工作。如果您在弹出窗口关闭后单击它，它将首先将您带回 about.html，然后单击第二次将您带回 index.html。这不是错误，弹出窗口算作另一个页面操作。

因此，如果您的后退按钮删除 data-rel="back"。这将修复它以在 about.html 页面上正常工作。

于 2013-02-01T08:51:46.247 回答