本文是用範例學習jQuery Mobile系列教學的第二課。
本例子演示了jQuery Mobile多頁間的切換。演示了頁面切換時的多種動畫效果。
演示了把超連結顯示為按鈕方式的方法。演示了內連接和外連接的方法。演示了在標題列中新增返回按鈕的方法。如何把一個超連結顯示為返回。
上一篇教學地址：
http://jingyan.baidu.com/article/03b2f78c4d3bae5ea237ae02.html
1
多個page集中在一個html中的優點: 一次載入，頁面切換時不需要向伺服器傳送請求，切換流暢。缺點：第一次載入時時間長，程式碼冗長，不利於維護。當rel=external設定連結元素時，開啟的頁面不以ajax請求的方式開啟，與當前的頁面完全沒有關係。否則，會以ajax請求的方式開啟，將請求的頁面中的page區域內內容載入到當前頁面中。因此，如果page中使用了一些自己的js或css，必須將其定義在page區域內，否則會出現錯誤。1
因為百度經驗裡貼不了程式碼，一貼程式碼就提示「未知錯誤」，儲存不了。
只好先以圖片的形式顯示在這裡，需要的朋友可以去我的百度網路硬碟中下載。
下載地址：http://pan.baidu.com/s/1o6EztEi
將以下程式碼儲存到jqm資料夾中，檔名為002_MultiPage.html
2
主體程式碼：<body>?<!--id是一個頁面的標識，id是唯一的，不能重複。可以通過href="#page1"來從其它頁面切換回此頁面。-->?<div data-role="page" id="page1" data-title="首頁">??? ?<div data-role="header">??????? ?<h1>首頁</h1>??????? </div>??????? <div data-role="content">??????? ?<p>這是第一頁，點選「下一頁」進入第二頁</p>??????? ?<p><a href="#page2" data-role="button">下一頁</a></p>??????? </div>??????? <div data-role="footer" data-position="fixed">??????? ?<h4>頁尾區</h4>??????? </div>??? </div>?<!--除了第一個page外，其它page中如果指定了data-add-back-btn="true"屬性，標題列自動會新增一個返回按鈕，會返回到上一頁面。??? data-back-btn-text：如果沒有此屬性，返回按鈕文字預設為"back"，可以通過此屬性設定按鈕文字。??? 也可以通過$.mobile.page.prototype.options.backBtnText="返回";來全域性設定返回按鈕的文字。??? -->?<div data-role="page" id="page2" data-title="第二頁" data-add-back-btn="true" data-back-btn-text="返回">??? ?<div data-role="header">??????? ?<h1>第二頁</h1>??????? </div>??????? <div data-role="content">??????? ?<p>這是第二頁，點選「返回」回到第一頁</p>??????? ?<!--data-rel="back"： 表示返回上一頁，這時會忽略href設定的值。和標題列的返回按鈕作用相同。但為了不同瀏覽器間的相容，建議還是給href賦值，以保證當瀏覽器不支援data-rel時，還能執行正確的結果。-->??????? ?<p><a href="#page1" data-role="button" data-rel="back">返回</a></p>??????? ?<!--當連結到非域內網頁時，需要通過rel="external"來指明。??????? ?【data-transition】指定頁面切換時，切換動畫的效果。可以為slide、pop、slideup、slidedown、fade、flip。??????? ?當使用data-rel="back"的連結或標題列中的返回按鈕返回上一頁時，會以與相反的方向來切換當前頁。如slide是從左向右滑入，覆蓋上一頁，返回時是從右向左滑出，漏出上一頁。??????? ?【注意】：在模擬器中，這些效果實際看不出來，而且切換效果非常差，需要真實裝置中來看。?????????稍後會有一篇文章專門來講在手機裝置中檢視此網頁的方法。?????????有些教學中說內連接和外連接都支援切換動畫，但筆者在實驗過程中，發現只有內連接才支援，外連接不支援。可能是哪兒沒設定對，有明白的請告知在下，謝謝。??????? ?-->??????? ?<p><a href="http://www.baidu.com" rel="external" data-transition="pop">進入百度首頁</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slide">左滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="pop">彈出式返回</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slideup">上滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slidedown">下滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="fade">淡變切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="flip">翻轉切換</a></p>???????? </div>??????? <div data-role="footer" data-position="fixed">??????? ?<h4>頁尾區</h4>??????? </div>??? </div></body>? </div>?<!--除了第一個page外，其它page中如果指定了data-add-back-btn="true"屬性，標題列自動會新增一個返回按鈕，會返回到上一頁面。??? data-back-btn-text：如果沒有此屬性，返回按鈕文字預設為"back"，可以通過此屬性設定按鈕文字。??? 也可以通過$.mobile.page.prototype.options.backBtnText="返回";來全域性設定返回按鈕的文字。??? -->?<div data-role="page" id="page2" data-title="第二頁" data-add-back-btn="true" data-back-btn-text="返回">??? ?<div data-role="header">??????? ?<h1>第二頁</h1>??????? </div>??????? <div data-role="content">??????? ?<p>這是第二頁，點選「返回」回到第一頁</p>??????? ?<!--data-rel="back"： 表示返回上一頁，這時會忽略href設定的值。和標題列的返回按鈕作用相同。但為了不同瀏覽器間的相容，建議還是給href賦值，以保證當瀏覽器不支援data-rel時，還能執行正確的結果。-->??????? ?<p><a href="#page1" data-role="button" data-rel="back">返回</a></p>??????? ?<!--當連結到非域內網頁時，需要通過rel="external"來指明。??????? ?【data-transition】指定頁面切換時，切換動畫的效果。可以為slide、pop、slideup、slidedown、fade、flip。??????? ?當使用data-rel="back"的連結或標題列中的返回按鈕返回上一頁時，會以與相反的方向來切換當前頁。如slide是從左向右滑入，覆蓋上一頁，返回時是從右向左滑出，漏出上一頁。??????? ?【注意】：在模擬器中，這些效果實際看不出來，而且切換效果非常差，需要真實裝置中來看。?????????稍後會有一篇文章專門來講在手機裝置中檢視此網頁的方法。?????????有些教學中說內連接和外連接都支援切換動畫，但筆者在實驗過程中，發現只有內連接才支援，外連接不支援。可能是哪兒沒設定對，有明白的請告知在下，謝謝。??????? ?-->??????? ?<p><a href="http://www.baidu.com" rel="external" data-transition="pop">進入百度首頁</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slide">左滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="pop">彈出式返回</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slideup">上滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="slidedown">下滑切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="fade">淡變切換</a></p>??????? ?<p><a href="#page1" data-role="button" data-transition="flip">翻轉切換</a></p>???????? </div>??????? <div data-role="footer" data-position="fixed">??????? ?<h4>頁尾區</h4>??????? </div>??? </div></body>
