2011-04-21 110 views
22

我正在開發使用jQuery Mobile 4.1的應用程序。jQuery Mobile - 後退按鈕

在我的應用程序中,我有兩個html頁面,如login.html和home.html。在home.html有3頁。 ()像menupage,searchpage,resultpage。

項目流程是login.html ---> home.html。在home.html中,menupage顯示爲第一頁。如果我在menupage中選擇某個選項,它將移至searchpage,然後移至resultpage。考慮一下,目前我在結果頁面。如果我按下移動瀏覽器上的後退按鈕(iPhone-safari,Android-chrome),則會移至login.html。

但我想顯示searchPage。如何解決這個問題?是否有可能做到這一點?

[注意:頁面應該位於單個html頁面(home.html)中。

+0

我也有同樣的問題[鏈接](http://stackoverflow.com/questions/ 11307727 /未得到-適當的對結果的回壓合的jQuery移動)。任何人得到解決方案 [1]:http://stackoverflow.com/questions/11307727/not-getting-proper-result-on-back-press-in-jquery-mobile – PPD 2012-07-05 06:58:00

回答

67

使用錨標記,而不是哈希導航屬性data-rel="back"詳細的文檔,這將帶你到前一頁

看看後面鏈接:Here

+0

雅THANKs ..但我想通過瀏覽器後退按鈕移動上一頁。 – Finder 2011-04-25 03:26:09

+2

默認情況下,瀏覽器返回按鈕會將您帶回到最後一頁,那麼爲什麼您需要對此進行編碼? – 2011-04-25 12:52:03

+0

在我的示例中,當我單擊瀏覽器上的後退按鈕時,瀏覽器後退按鈕將我帶入login.html(注意:我位於home.html的結果頁面中)。 – Finder 2011-04-26 11:09:26

3

你可以試試這個腳本的HTML代碼頭:

<script> 
    $.extend( $.mobile , { 
    ajaxEnabled: false, 
    hashListeningEnabled: false 
    }); 
</script> 
18

jQuery Mobile的API的新版本(我猜它的更新比1.5)需要增加「後退」按鈕明確我n頁眉或每頁底部。

所以,儘量在你的頁面div標籤添加此:

data-add-back-btn="true" 
data-back-btn-text="Back" 

例子:

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="Back"> 
+1

這也適用於我,但是如何給它添加一個圖標?我嘗試了data-icon =「back」,但是按鈕然後消失 – 2012-12-08 08:30:12

5

嘗試

$(document).ready(function(){ 
    $('mybutton').click(function(){ 
     parent.history.back(); 
     return false; 
    }); 
}); 

$(document).ready(function(){ 
    $('mybutton').click(function(){ 
     parent.history.back(); 

    }); 
}); 
0

這是1.4.4版本

<div data-role="header" > 
     <h1>CHANGE HOUSE ANIMATION</h1> 
     <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Back</a> 
    </div> 
+0

當你設置'data-role = button'時,你不應該添加這些類。大多數是不需要的,那些做什麼的應該用'data-icon'和'data-iconpos'的適當值來替換 – naugtur 2015-01-08 20:08:38

0

嘗試使用鋰能更均勻

<ul> 
<li><a href="#one" data-role="button" role="button">back</a></li> 
</ul>