所有页面都在jquery mobile中的多页面模板中可见

时间:2013-05-15 11:49:23

标签: jquery jquery-mobile

已经在jquery mobile中创建了一个mulipage模板,还有一个对话框页面。要求是当我们点击其中一个图标时它应该显示对话框但是问题是所有页面和对话框在同一页面中可见所有的时间都没有发生任何事件。请告诉我,如果我错过任何东西。

代码如下:

<!DOCTYPE html>
<html>
<head>
        <title>Dialog</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="lib/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="lib/jquery.mobile-1.3.1.min.js"></script>
        <script></script>
    </head>
    <body>
        <div data-role="page" id="one">
            <div data-role="content" align="bottom">
                <p>
                    <a href="#dialog" data-rel="dialog" data-transition="pop">click for dialog</a>
                </p>
            </div>
        </div>
        <div data-role="page" id="dialog">
            <div data-role="header" data-theme="e">
                <h1>dialog.</h1>
            </div>
            <div data-role="header" data-theme="d">
                <h1>This is dialog.</h1>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
        <div data-role="page" id="two">
            <div data-role="header" data-theme="e">
                <h1>page2</h1>
            </div>
            <div data-role="header" data-theme="d">
                <h1>This is page2.</h1>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

那是因为你使用的是旧版本的jQuery。

使用 jQuery 1.8.3 或更高版本。 jQuery Mobile已锁定到某些 jQuery 版本,并且不适用于旧版本。

在您的情况下,您使用的是jQuery Mobile 1.3.1,因此对 jQuery 1.8.3 的最低要求,但我建议您使用 1.9.