小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...
作為一款真正有使用價值的應用，首先應該至少有兩個頁面，通過頁面的切換來實現更多的交互。比如手機人人網，打開以后先是進入登錄頁面，登錄后會有新鮮事，然后拉開左邊的面板，能看到相冊、悄悄話、應用之類的其他內容。
在jQuery Mobile中頁面的切換是通過鏈接來實現的，這點跟HTML完全一樣。有所不同的是，jQuery Mobile為了使開發者能夠創造出能好的交互性，提供了10種不同的切換效果。下面來看一個例子：
【范例4-4? jQuery Mobile中的場景切換】
?除此之外，還需要另外一個頁面demo.html：
?
運行效果如圖4-4、圖4-5所示。
?
圖4-4 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖4-5
上例中第14~24行實際上在做同一件事情，即實現從index.html頁面到demo.html頁面的切換。在這里特別對這10種切換效果做一個簡短的說明：
<a href="demo.html" data-role=”button”>頁面間的切換</a>
可以清楚的看到demo.html頁面有一個漸顯的動畫效果。
<a data-role=”button” href="demo.html"data-transition="fade" data-direction="reverse" >fade</a>
運行后發現與不加入data-transition屬性的效果相同，也就是說，在jQuery Mobile中，將會默認給轉場加入漸顯漸隱的動畫效果。
<a data-role=”button” href="demo.html"data-transition="pop" data-direction="reverse" >pop</a>
demo頁面在原頁面的中央部分漸漸變大最終覆蓋整個頁面。
<a data-role=”button” href="demo.html"data-transition="flip" data-direction="reverse" >flip</a>
demo頁面在原頁面中央最初以一個豎條的方式出現，先向兩端擴張，當放大到正常頁面比例后漸漸變大，直至覆蓋整個頁面。
<a data-role=”button” href="demo.html"data-transition="turn" data-direction="reverse" >turn</a>
demo頁面在原頁面中央最初以一個豎條的方式出現縱向進行翻轉后放大到覆蓋整個頁面。
<a data-role=”button” href="demo.html"data-transition="flow" data-direction="reverse" >flow</a>
demo頁面在原頁面中央部分漸漸變大并逐漸覆蓋整個頁面，同時可以看見原頁面逐漸縮小直至完全被triansitions2覆蓋。
<a data-role=”button” href="demo.html"data-transition="slidefade" data-direction="reverse" >slidefade</a>
demo頁面在原頁面右側出現，移動至中心，并在這一過程中漸顯。
<a data-role=”button” href="demo.html"data-transition="slide" ?data-direction="reverse">slide</a>
demo頁面在原頁面右側出現，移動至中心。
<a data-role=”button” href="demo.html"data-transition="slideup" data-direction="reverse" >slideup</a>
demo頁面在原頁面下方出現，并向上移動至中心。
<a data-role=”button” href="demo.html"data-transition="slidedown" data-direction="reverse" >slidedown</a>
demo頁面在原頁面上方出現，并向下移動到中心。
<a data-role=”button” href="demo.html"data-transition="none" data-direction="reverse" >none</a>
沒有任何效果。
? ? 注意：在以上的10種動畫中，除了fade與none兩種效果是所有瀏覽器均支持的，其他8種效果的實現均需要依賴于設備瀏覽器具有3D支持。因此，對于android 2.Xs設備來說，許多效果是無效的，這時系統會默認將切換效果轉換為漸顯。還有一些設備雖然能夠實現這些效果，但由于硬件本身限制，在實現這些效果時會在結束時產生卡頓以及頁面閃爍的問題。因此開發者在使用這些效果時要特別謹慎，好在隨著技術的提高，不兼容這些效果的設備最終會退出我們的視野，這對開發者來說是一個好消息。
在jQuery Mobile的官方文檔中給出了一種應對不兼容情況的方法，即在CSS文件中加入這樣一句代碼，經筆者實驗，確實能夠在一定程度上，解決切換時的屏閃問題。
.ui-page {-webkit-backface-visibility: hidden; }
但是要想真正從根本上解決頁面切換時閃屏的問題，還只能依靠硬件的發展，筆者一直堅信這一天很快就會到來。
?
?
jQueryMobile可用度越來越高，入門門檻低，可以少寫代碼來生成移動設備友好的界面。《構建跨平臺APP：jQuery Mobile移動應用實戰》這本書采用實例驅動的方式介紹jQueryMobile下的APP開發，全書提供70余個實戰案例教會讀者進行移動開發，最后還通過6個小型項目來復習和鞏固所學知識點。
轉載于:https://www.cnblogs.com/aspnet008/p/3875625.html
總結
以上是生活随笔為你收集整理的小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 2204 Eddy's爱好（容斥
- 下一篇： UVa 11549 Calculator