[JQuery Mobile]在外部HTML文件中使用公共部分的Mutlipage模板

我對JQuery非常陌生，並且有一個項目可以創建一個小型的webapp，我可以使用我的手機。我讀過關於MultiHTMLPage和MultiPage之間差異的以下文章https://stackoverflow.com/a/14148550/2943045，並決定使用muultipage tempate。儘管如此，我想存儲在獨立的HTML文件的公共部分（標題，導航欄，頁腳等），所以我試圖在每個頁面加載生成它們。[JQuery Mobile]在外部HTML文件中使用公共部分的Mutlipage模板

我在做對吧？
我在與右邊的面板（ID =選項）的麻煩，不會應用於屬性（在我看來，左側面板屬性的，而不是應用）。

現在代碼：

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>jQuery Mobile Demos - Slide Panel</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
     <!--Demo source: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html --> 

<script> 
$(document).on("pagebeforecreate", function() { 

     $(document).on('pagebeforeshow', function() { 
      var PageName = $.mobile.activePage.attr("id"); 
      console.log("Opening " + PageName); 

      console.log('Set header'); 
      $("div[data-role='header']").attr({ 
       'data-theme':'d', 
       'data-position':'fixed' 
      }); 
      $.get("header.html", function(data) { 
       var HDiv = $("div[data-role='header']"); 
       HDiv.html(data); 
      }); 

      console.log('Set left panel'); 
      $("div[data-role='panel'][id='nav-panel']").attr({ 
       'data-position-fixed': 'false', 
       'data-display': 'reveal', 
       'data-theme': 'd' 
      }); 
      $.get("left-panel.html", function(data) { 
       var HDiv = $("div[data-role='panel'][id='nav-panel']"); 
       HDiv.html(data); 
      }); 

      console.log('Set right panel'); 
      $("div[data-role='panel'][id='options']").attr({ 
       'data-position-fixed': 'false', 
       'data-display': 'overlay', 
       'data-theme': 'd' 
      }); 
      $.get("right-panel.html", function(data) { 
       var HDiv = $("div[data-role='panel'][id='options']"); 
       HDiv.html(data); 
      }); 

      console.log('Set footer on opened page'); 
      $("div[data-role='footer']").attr({ 
       'data-theme': 'd' 
      }); 
      $.get("footer.html", function(data) { 
       var HDiv = $("div[data-role='footer']"); 
       HDiv.html(data); 
       $("#"+PageName).trigger('pagecreate');/*Reload all styles*/ 
      }); 
     }); 

}); 


</script> 
    </head> 
    <body> 

     <div data-role="page" id="main" class="ui-responsive-panel"> 

       <div data-role="header" class="header"></div> 


       <div data-role="content"> 
        <h2>Page 1</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis blandit tellus id viverra. Maecenas mollis, quam et accumsan fermentum, erat sapien blandit eros, eu malesuada magna dolor sit amet felis. Vivamus ornare ante in mi aliquet viverra. Nam non massa eu lorem placerat mollis. Mauris bibendum, nulla non blandit iaculis, massa dui blandit tellus, id rhoncus felis libero in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque imperdiet scelerisque mattis. Praesent vel pulvinar leo.</p> 
        <p>Morbi laoreet faucibus tempor. Praesent et enim nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam non diam vitae felis egestas aliquet imperdiet at tellus. Aliquam erat volutpat. Vestibulum auctor sodales lobortis. Morbi eget imperdiet metus. Ut id velit non ligula lacinia cursus in vitae risus. Nam pharetra ullamcorper quam sit amet dictum. Morbi egestas urna vitae leo porta, at tristique risus varius. Ut dictum lacus sed viverra eleifend.</p> 
       </div><!-- /content --> 


       <!-- left panel (menu) --> 
       <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div> 
       <!-- /panel --> 

       <!-- right panel (options)--> 
       <style> 
        .userform { padding:.8em 1.2em; } 
        .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); } 
        .userform label { display:block; margin-top:1.2em; } 
        .switch .ui-slider-switch { width: 6.5em !important } 
        .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); } 
       </style> 
       <div data-role="panel" id="options" class="right-panel" data-position="right"></div> 
       <!-- /panel --> 

       <!-- Footer--> 
       <div data-role="footer"></div><!-- /footer --> 

     </div><!-- /page --> 


     <!-- Start of second page: #Userpanel --> 
     <div data-role="page" id="userpanel" data-theme="d" class="ui-responsive-panel"> 

       <div data-role="header"></div> 

       <div data-role="content"> 
        <h2>Page 2</h2> 
        <p>Pellentesque at tristique diam. Aenean consectetur, ante in tincidunt tincidunt, ante ligula bibendum velit, ultricies rutrum metus dui vitae nibh. Nulla vestibulum sollicitudin metus eu mollis. Integer risus tellus, tempor ac ipsum sit amet, dapibus luctus nisl. Morbi consectetur ac justo eu suscipit. Vestibulum placerat, ante sed mollis dictum, risus leo ornare arcu, vel auctor turpis nisi eu felis. Sed purus nunc, faucibus et urna in, pretium molestie massa. Donec fermentum vehicula nunc. Etiam auctor gravida lectus ac ullamcorper. Morbi molestie nunc id turpis semper, porta placerat turpis accumsan. Donec vel accumsan purus. Nam facilisis, nulla a placerat mattis, ante ipsum gravida sapien, et volutpat elit mauris at odio. Nunc placerat libero non adipiscing interdum. Praesent in enim eget erat auctor sagittis at id lacus. Proin fringilla lorem vitae porttitor suscipit.</p> 
        <p>Nulla molestie tortor eu felis mattis, sit amet facilisis arcu congue. Suspendisse dictum turpis id tristique tempus. Praesent vulputate aliquam ante, a egestas risus suscipit et. Curabitur leo lorem, laoreet eu malesuada vel, congue id ligula. Phasellus facilisis risus risus. Mauris sed lectus ut risus dapibus consectetur. Nunc non elit arcu. Duis nibh leo, tempor ut accumsan molestie, mollis non justo. Nam in eros in neque pharetra eleifend id ut metus. In facilisis id mauris non cursus. Nunc vitae augue non elit vehicula elementum. Proin sapien massa, convallis et nibh a, convallis congue ligula. Phasellus feugiat, ipsum ac consectetur convallis, ligula tortor egestas quam, in adipiscing tortor arcu id felis.</p> 
       </div><!-- /content --> 

       <!-- left panel (menu) --> 
       <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div> 
       <!-- /panel --> 

       <!-- right panel (options)--> 
       <style> 
        .userform { padding:.8em 1.2em; } 
        .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); } 
        .userform label { display:block; margin-top:1.2em; } 
        .switch .ui-slider-switch { width: 6.5em !important } 
        .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); } 
       </style> 
       <div data-role="panel" id="options" class="right-panel" data-position="right"></div> 
       <!-- /panel --> 

      <!-- Footer--> 
      <div data-role="footer"></div><!-- /footer --> 


    </body> 
</html>

了header.html

<h1>My App</h1> 
<a href="#nav-panel" data-icon="bars" data-theme="d" data-iconpos="notext">Menu</a> 
<a href="#options" data-icon="gear" data-theme="d" data-iconpos="notext">Add</a>

左panel.html

<ul data-role="listview" data-theme="d" data-divider-theme="a" style="margin-top:-16px;" class="nav-search"> 
    <li data-icon="delete" style="margin-top:13px;"> 
     <a href="#nav-panel" data-rel="close">Close menu</a> 
    </li> 
    <li data-filtertext="Home"> 
     <a href="#main">Home</a> 
    </li> 
    <li data-filtertext="User Panel"> 
     <a href="#userpanel">User Panel</a> 
    </li> 
    <li data-filtertext="Menu Item 2"> 
     <a href="#">Menu Item 2</a> 
    </li> 
</ul>

右panel.html

<form class="userform"> 
    <h2>Options</h2> 

    <div class="switch"> 
    <label for="status">Audio</label> 
    <select name="status" id="slider" data-role="slider" data-mini="true"> 
     <option value="off">ON</option> 
     <option value="on">OFF</option> 
    </select> 
    </div> 

    <div class="ui-grid-a"> 
     <div class="ui-block-a"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Cancel</a></div> 
     <div class="ui-block-b"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Save</a></div> 
    </div> 
</form>

footer.html

<h4>Page Footer</h4>

感謝你們在您的幫助和建議，

來源

2013-10-31 cimourdain

我渴望與外部加載網頁內容的想法文件。當我使用jqm，handlebars和ember實現混合移動應用和web應用時，我採用了類似的方法。我會提供一些關於我做了什麼的信息，可以幫助你。

1. 我不僅保留了外部文件中頁面的公用部分，還保留了模板/頁面的內容。您可能會將部分或全部頁面內容存儲在單獨的文件中。然後你可以懶加載它們或者在開始時簡單地加載它們。

2. 模板/頁面代碼/ html的加載發生在一個單獨的js文件中。沒有必要使主頁面與加載外部數據的邏輯混亂，特別是當頁面增加時，這會增加。

3. 從外部文件檢索到的數據存儲在變量中。特別是在我的情況下，它被移交給了ember-handlebars模板數據結構，用於在運行時保存所有模板。您可以將此應用於您的案例，無需或潛在問題，以請求所有頁面上的數據在pagebeforeshow上，這將在您每次訪問頁面時調用。數據應該檢索一次並按需要使用多次。因此，一旦您從外部文件中檢索數據，請嘗試將它們存儲在數據結構中，即關聯數組中。然後，您可以隨時在任何需要的頁面添加html。您可以編寫一個通用代碼，該代碼使用pagebeforeshow回調來檢查當前頁面並追加您已存儲的數據。這樣一切都會運行得更快，更順暢。

通常，具有模板/頁面內容的獨立文件爲您提供了很多靈活性，例如易於維護，重用，減輕主頁面，延遲加載內容，替換實現等。

最後一點與您嘗試追加的屬性有關，我認爲最好將它們放在jqm代碼中，而不是試圖動態添加它們。我沒有看到這樣的好處。你的代碼會有一些開銷和複雜性，尤其是當你的頁面增加時，沒有什麼可以真正實現的。

來源

2013-10-31 22:32:06 melc

[JQuery Mobile]在外部HTML文件中使用公共部分的Mutlipage模板

回答

相關問題