重新加载后不再出现后退按钮

问题描述：

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

我知道当您重新加载“＃page2”页面时，后退按钮不应该出现在第一页上。但是，如果你点击另一个链接导航到其他页面，你应该得到后退按钮，但它不是。

摄制步骤： - 负载的网站页面1 - 去第2页，并注意背部按钮 - 重新加载页面（这是在“＃第2页”） - 第2页负荷而不后退按钮（正确） - 转到第3页并注意后退按钮未显示

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

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

答

这必须工作，我已经测试了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>

如果你想，给我你的榜样，我会看看它。

答

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); 

       } 
      }

重新加载后不再出现后退按钮

相关推荐