jQuery Mobile 鏈接外部鏈接或切換動畫

時間 2019-11-19

標籤 jquery mobile 鏈接外部鏈接切換動畫欄目 JQuery 简体版

原文原文鏈接

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

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的基本內容：css

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

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/java

頁面中頁面切換動畫：

jQuery Mobile能夠實現頁面的切換效果。在同一個Html文件裏面，能夠定義多個page，切換時直接使用超連接就能夠了。

<body>

</div>

</div>

</body>

系統默認顯示page的內容，不顯示page2的內容，點擊連接後切換到page2的內容。經過「data-transition」實現動畫定義。jQuery Mobile實現了上下左右滑動，淡出，彈出，反轉等動畫。

若是須要轉到的HTML是其餘連接，不是內部page，須要加上rel='external'屬性，此時動畫效果無效。