簡介
多網頁架構是由兩個以上的 <div data-role="page"> ... </div> 組成。每個 <div> 元件的內容設計如同單一網頁 ( Single-page )的撰寫架構，包含：標頭 <div data-role="header"> ... </div>、內容 <div data-role="content"> ... </div> 與頁尾 <div data-role="footer"> ... <div>。
範例：Multi-page
點選 JSFIDDLE 的 HTML，<body> 標籤內介紹並參考以下介紹：
- 使用兩個 <div> 元件，元件 ID 分別為 FirstPage 與 SecondPage ，以下分別稱為First 和Second 網頁。
- First 網頁內的網頁內容標籤 <div data-role="content"> ... </div> 說明「點選網頁的 page 2 連結，切換至 Second 網頁」。請選擇 JSFIDDLE 的 Result 測試。
- Second 網頁內的網頁內容標籤 <div data-role="content"> ... </div> 說明「點選網頁的 page 1 連結，切換至 First網頁」。請選擇 JSFIDDLE 的 Result 測試。
重點摘錄
- A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a
data-roleof"page". - Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (
index.html#foo) on a page in jQuery Mobile, because the framework will look for a 'page' with anIDof#fooinstead of the native behavior of scrolling to the content with thatID. - The
idattribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once - We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
沒有留言:
張貼留言