JQuery Mobile - 在多頁面模板中固定導航

我真的不得不在每個頁面DIV上重複「導航欄」嗎？或者有沒有解決方案只使用一個頁腳在多頁html內的所有頁面？JQuery Mobile - 在多頁面模板中固定導航

<div data-role="page" id="page11"> 
     <div data-role="header"> <h1>Home</h1> </div> 

     <div data-role="content"> <h3>TEST</h3> 
      <p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p> 
     </div> 

     <div data-role="footer" data-id="foo1" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li> 
        <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div data-role="page" id="page2"> 
     <div data-role="header"> <h1>Hilfe </h1> </div> 
     <div data-role="content"> <h3>TEST </h3> </div> 

     <div data-role="footer" data-id="foo1" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li> 
        <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li> 
       </ul> 
      </div> 
     </div> 
    </div>

Thx for any ideas！

來源

2012-10-04 opHASnoNAME

是的，您的導航欄/頁腳/標題必須出現在所有頁面DOM元素中。但爲了避免重複自己，您在客戶端和/或服務器端有很多選項。我總是建議在這種情況下使用某種模板。

在客戶端，您可以將導航欄放在<body>標記下面的<script>標記中。分配一個唯一的ID屬性，這個腳本標籤，並添加一些JavaScript這樣的：

模板段：

<script type="text/template" id="myFooterTemplateID"> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li> 
       <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li> 
      </ul> 
     </div> 
    </div> 
</script>

的JavaScript：

jQuery('*[data-role="page"]').on("pagebeforecreate", function(e) { 
    var page = jQuery(this); 
    // please replace this part with a template engine ... 
    var header = jQuery(jQuery("#myFooterTemplateID").html()); 

    // bind some events to the header's content here - if any 
    // for example: 
    // header.find('.myButtonClass').bind('tap', onButtonClicked); 

    // append to page 
    page.append(header); 
});

退房Handlebars.js或Underscore-Templates生產準備JS-模板而不是寫你自己的圖書館。

來源

2012-10-04 19:53:40 hna

感謝iam來自php世界，但不想使用任何服務器端代碼。將檢查提供的模板引擎！ – opHASnoNAME

否，在後來的jqm版本中，例如，版本1.4.0，您不需要在每個頁面DOM元素中包含一個導航欄。

這裏是所有網頁上會出現一個導航欄的例子，包括它只是一次，外面頁面元素：http://demos.jquerymobile.com/1.4.0/toolbar-fixed-persistent/

基本上，你只需要添加data-position="fixed"到頁眉/頁腳，並開始工具條：

$(function() { 
    $("[data-role='navbar']").navbar(); 
    $("[data-role='header'], [data-role='footer']").toolbar(); 
});

來源

2015-05-21 11:45:38 peeol

JQuery Mobile - 在多頁面模板中固定導航

回答

相關問題