jQuery Mobile 串連外部串連或切換動畫

最後更新：2014-05-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：android style c class blog code

jQuery Mobile不同網頁之間的跳轉問題

jQuery Mobile，一個新的手機終端指令碼開發庫，從名字可以看出，它是基於jQuery；目前支援很多種手機裝置，包括IOS/Android/BlackBerry/Windows Phone等，當然，支援程度不一，具體可以看：http://jquerymobile.com/gbs/ 由於這項目比較新，在我寫這文章的時候，目前還是1.0 ALPHA4.1 RELEASED版，官網提供下載的只有jQuery Mobile的JS和CSS，相關文檔目前還沒有提供下載，只能通過線上看Demo和說明。一般用jQuery Mobile開發手機版Web頁面，需要包括下面三個檔案jQuery/jQuery Mobile JS/jQuery Mobile CSS（版本可以根據情況自己決定），如：

Javascript代碼

Page Title<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

今天介紹下它的Page：

1. Page基本結構
在一個手機頁面中，一般包括三個部分（header/content/footer），它們都是Page的子項目，如下面就是一個Page的基本內容：

Html代碼

<div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>

頁面間的跳轉和切換，一般都是Page對象的切換，你可以在一個HTML頁面中包含多個Page對象，切換通過指定相應的Page ID就可以，如下面頁面內容，預設顯示第一個Page對象foo，在foo的Page Content中有個 bar連結，表示切換到bar Page，這樣達到頁面切換的效果，其實通過瀏覽器看其產生的內容可以知道，這都是通過CSS來達到效果的，最底層當然是display block/none什麼的，只不過jQuery Mobile封裝了很多CSS：

Html代碼

<div>
<div>
<h1>Foo</h1>
</div>
<div>
<p>I‘m first in the source order so I‘m shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div>
<h4>Page Footer</h4>
</div>
</div>
<div>
<div>
<h1>Bar</h1>
</div>
<div>
<p>I‘m first in the source order so I‘m shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div>
<h4>Page Footer</h4>
</div>
</div>

預設在Page切換的時候，切換後的頁面左上方預設包括一個Back的按鈕回到上一個頁面，頁面URL中也體現出來，如../index.html#foo，表示index.html切換到id為foo的Page，或者index.html#docs-pages.html，表示從index.html切換到docs-pages.html，其實不管頁面內連結還是頁面間切換，jQuery Mobile都是發起Ajax請求載入新的頁面。如果想連結到一個新介面，而且URL中不想有以前路徑#新頁面，可以通過在加入連結屬性rel="external"或data-ajax="false"，這就告訴jQuery Mobile需要重新載入一個新的頁面，而且URL也是全新的。

2. Page轉場效果
預設Page間切換的效果是從右向左切換，可以在中指定data-transition屬性，指定頁面切換的效果，jQuery Mobile目前支援slide/slideup/slidedown/pop/fade/flip等轉場效果。 jQuery Mobile官網：http://jquerymobile.com/

頁面中頁面切換動畫：jQuery Mobile可以實現頁面的轉場效果。在同一個Html檔案裡面，可以定義多個page，切換時直接使用超連結就可以了。<body><div data-role="page" id="main" data-transition="pop"> <a href="#page2" >連結2</a></div> <div data-role="pag" id="page2"> </div></body>系統預設顯示page的內容，不顯示page2的內容，點選連結後切換到page2的內容。通過“data-transition”實現動畫定義。jQuery Mobile實現了上下左右滑動，淡出，彈出，反轉等動畫。如果需要轉到的HTML是其他連結，不是內部page，需要加上rel=‘external‘屬性，此時動畫效果無效。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More