打破單頁成多個文件

請告訴我的標準方法，用於將網頁內容劃分爲多個文件，讓所有的代碼是不是在一個文件中。下面的代碼片段包含在一個文件中，我不應該在單獨的文件中引用每個div id頁面，對此有沒有標準做法？打破單頁成多個文件

<div id="page-1" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 1 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-2" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 2 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-3" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 3</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 3 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

來源

2012-03-13 blue-sky

我相信jQuery Mobile的擁有所有的索引頁的內頁中。 – Sethen 2012-03-13 22:31:41

您可能可以使用jQuery移動設備在服務器上的其他地方使用不同的頁面。仔細查看文檔，他們並沒有詳細介紹它。 – Sethen 2012-03-13 22:38:20

@SethenMaleno這裏是jQuery Mobile的文檔中的特定頁面，指的是如何遠程頁面通過AJAX帶入DOM：http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page -navmodel.html – Jasper 2012-03-14 21:19:21

每次取data-role="page和data-role="dialog"元素，並將其粘貼到文件象下面這樣：

<!doctype html> 
<html> 

    <head> 
     <meta charset="utf-8"> 
     <title>My Page's Title</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <link rel="stylesheet" href="/css/custom.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <script src="/js/custom.js"></script> 
    </head> 
    <body> 
     [Your data-role="page" tag goes here] 
    </body> 

</html>

你也許會想給自己，really? why duplicate so much in every file?。原因是，無論用戶進入您的網站，他們都將擁有加載任何頁面所需的所有資源。這是有幫助的，以及因爲jQuery Mobile的使用AJAX拉後續頁面到DOM，如果所有的代碼始終可用，然後加載每個頁面都會正常工作。

通知我加了/js/custom.js和/css/custom.css文件jQuery Mobile的已被列入後。這是針對整個網站的所有自定義JS/CSS。

當頁面之間的鏈接，使用絕對網址：

<a href="/hotel/room/special.html">My Link</a>

這樣，你將始終指向正確的網址，如果頁面在DOM已經加載，這可以確保該版本已經在使用DOM而不是引入另一個版本（如果DOM中同時存在兩個相同的頁面，則可能會破壞您的網站）。

來源

2012-03-13 23:10:01 Jasper

打破單頁成多個文件

回答

相關問題