Question

使用1.3.0 RC1后，页面重新加载“#subpage”后，任何页面上都不会显示后退按钮。

我知道当你重新加载“＃page2”页面时，第一页上不应该有后退按钮。但是如果你点击另一个链接导航到另一个页面，你应该得到后退按钮，但事实并非如此。

Repro步骤： - 将网站加载到第1页 - 转到第2页，注意后退按钮 - 重新加载页面（位于“＃page2”） - 第2页没有后退按钮加载（正确） - 转到第3页，注意后退按钮未显示

此时我希望看到一个后退按钮。即使我进一步阅读第4,5,6页......它也不会显示后退按钮。

我已将属性data-add-back-btn="true"添加到伪页面容器中。我还在$.mobile.page.prototype.options.addBackBtn = true;对象的mobileinit事件中添加了document。什么都行不通。

Answer 1

这必须有效，我在jQm 1.2和1.3 RC1上进行了测试，这是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-rc.1/css/themes/default/jquery.mobile-1.3.0-rc.1.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
    <script src="http://jquerymobile.com/demos/1.3.0-rc.1/js/jquery.mobile-1.3.0-rc.1.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second" data-add-back-btn="true">
        <div data-theme="a" data-role="header"> 
            <h3>
                Second Page
            </h3>
            <a href="#third" class="ui-btn-right">Back</a>          
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="third" data-add-back-btn="true">
        <div data-theme="a" data-role="header"> 
            <h3>
                Third Page
            </h3>
            <a href="#fourth" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  
    <div data-role="page" id="fourth" data-add-back-btn="true">
        <div data-theme="a" data-role="header">
            <h3>
                Fourth Page
            </h3>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>      
</body>
</html>

如果你愿意，请把你的例子寄给我，我会看看它。

Answer 2

Can be done for web sites like this:

your starting page id = "pageIndex"

if you are using jquerymobile1.2.0.js, then modify the framework code like this:

    if ( o.addBackBtn &&
                role === "header" &&
                ***$page.jqmData( "url" ) !== "pageIndex"***) {

                // framework code modified for back button id: sheetal 08/02/2013

                if (backBtnId !== undefined) {
                    backBtn = $( "<a href='javascript:void(0);' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l' id='" + backBtnId + "'>"+ o.backBtnText +"</a>" )
                        // If theme is provided, override default inheritance
                        .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
                        .prependTo( $this );                    

                }else {

                    backBtn = $( "<a href='javascript:void(0);' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
                    // If theme is provided, override default inheritance
                    .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
                    .prependTo( $this );

                }
            }

重新加载后不再显示后退按钮

2 个答案: