後面和主頁按鈕沒有出現在我的jQuery Mobile應用程序的標題中，儘管我沒有壓制它們。爲什麼？以下是我的應用中的頁面外觀。爲什麼我的jQuery Mobile頁面中默認不顯示back和home按鈕？

<!DOCTYPE html> 
<html> 
<head> 
    <title>My jQuery Mobile App</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//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="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Look Up a Stock</h1> 
     </div><!-- /header -->  
     <div data-role="content"> 
      Code to look up a stock. 
     </div><!-- /content --> 
     <div data-role="footer"> 
      <h4>&copy; 2012</h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
</body> 
</html>

來源

2012-03-03 dangerChihuahua007

重新添加按鈕

jQuery Mobile的有一個功能，自動創建並追加「後退」按鈕，任何頭，雖然它被禁用默認。這對於無應用安裝的應用程序（例如在本機應用程序Web視圖中運行的應用程序）非常有用。當頁面插件的addBackBtn選項爲true時，框架會自動在標題上生成一個「返回」按鈕。如果頁面div具有data-add-back-btn =「true」屬性，則也可以通過標記進行設置。

如果您在錨點上使用屬性data-rel =「back」，那麼錨點上的任何點擊將會模仿後退按鈕，返回一個歷史記錄並忽略錨點的默認href。鏈接回指定頁面（例如，顯示「home」的鏈接）或（使用JavaScript生成「返回」按鈕（如關閉對話框的按鈕））時，這是特別有用的。在源標記中使用此功能時，確保提供有意義的href，實際上指向引用頁的URL（這將允許該功能爲 C級瀏覽器中的用戶工作。記住，如果你只是想而不實際回去在歷史上逆轉移，你應該使用數據方向=「反向」，而不是屬性

來源：http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html

ŧ他以前默認打開它，但更多的人在默認情況下離開它更有意義。

你的HTML可以改成這樣：

<div data-add-back-btn="true" data-role="page"> 
    ... 
</div><!-- /page -->

這裏有一個演示：http://jsfiddle.net/nHgu7/1/

您也可以綁定到mobileinit事件來設置addBackBtn默認值：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
}); 
</script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

這裏是一個演示：http://jsfiddle.net/nHgu7/2/

來源：http://forum.jquery.com/topic/can-t-get-mobile-addbackbtn-to-work

更新

可以自動添加一個home鍵的每一頁是這樣的：

//attach an event handler to any `data-role="page"` element at any time for the `pageinit` event 
//(the event that fires when the page is about to be initialized) 
$(document).delegate('[data-role="page"]', 'pageinit', function() { 

    //check for a `data-role="header"` element to add a home button to 
    var $header = $(this).children('[data-role="header"]'); 
    if ($header.length) { 

     //create a link with a `href` attribute and a `class` attribute, 
     //then turn it into a jQuery Mobile button widget 
     $header.append($('<a />', { class : 'ui-btn-right', href : '#zero' }).buttonMarkup({ icon: "home", iconpos : "notext" })); 
    }   
});

這裏是一個演示：http://jsfiddle.net/nHgu7/3/

如果您只是添加一個if聲明，檢查主頁的ID，您可以將主頁按鈕添加到除首頁以外的所有主頁：

$(document).delegate('[data-role="page"]', 'pageinit', function() { 

    //check to see if this is the homepage, if so do nothing 
    if (this.id != 'home') { 
     var $header = $(this).children('[data-role="header"]'); 
     if ($header.length) { 
      $header.append($('<a />', { class : 'ui-btn-right', href : '#zero' }).buttonMarkup({ icon: "home", iconpos : "notext" })); 
     }  
    }  
});

這裏是一個演示：http://jsfiddle.net/nHgu7/4/

來源

2012-03-03 03:40:17 Jasper

非常感謝！該文件和示例很有幫助。我得到了後退按鈕的工作。你有什麼想法瞭解他的文檔是否也提到添加主頁按鈕（小房子圖標）？ – dangerChihuahua007 2012-03-03 03:53:41

沒關係，我發現''添加了一個主頁按鈕。謝謝！ – dangerChihuahua007 2012-03-03 04:01:39

@DavidFaux我在如何自動添加主頁按鈕到每個頁面上添加了**更新**。 – Jasper 2012-03-03 04:10:08

爲什麼我的jQuery Mobile頁面中默認不顯示back和home按鈕？

回答

更新

相關問題