Jquery Mobile Back Button无法正常工作

时间:2012-02-08 16:04:42

标签: jquery-mobile back

任何人都可以帮助我并告诉我为什么在这段代码中后退按钮不起作用?我通过电动移动模拟器(http://www.electricplum.com/dlsim.html)在Chrome和Safari上试用过它。我也尝试使用javascript的全局设置($ .mobile.page.prototype.options.addBackBtn = true;)。

正确显示了后退按钮,但当我点击/点击后退按钮时,页面保持不变。在Chrome中,我看到子页面的Url显示(#sub-page),点击后退按钮后,url会更改回来,但不是网站本身。

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
    <title>Index.Mobile</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="Stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>

</head>

<body>

<h2>Index.Mobile</h2>

<div data-role="page" id="home">

    <div data-role="header" data-position="fixed">

        <h1>Mobile Events</h1>

    </div><!-- /header -->

    <div data-role="content">
    <!---- BUTTON ---->
            <div>some content</div>
            <a href="#sub-page" data-role="button">Next Page</a>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header">          
        <h1>Page Header</h1>    
    </div>

    <div data-role="content">    
        <p>This is the main content</p>
    </div>

    <div data-role="footer">
        <h4>Footer</h4>
    </div>    
</div>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
    <title>Index.Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<h2>Index.Mobile</h2>

<div data-role="page" id="home">

    <div data-role="header" data-position="fixed">

        <h1>Mobile Events</h1>

    </div><!-- /header -->

    <div data-role="content">
    <!---- BUTTON ---->
            <div>some content</div>
            <a href="#sub-page" data-role="button">Next Page</a>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header">          
        <h1>Page Header</h1>    
    </div>

    <div data-role="content">    
        <p>This is the main content</p>
    </div>

    <div data-role="footer">
        <h4>Footer</h4>
    </div>    
</div>
</body>

</html>

试试这个......