iT邦幫忙

DAY 9
1

使用 EZoApp 開發 App 好好玩系列 第 9

Day 9 - EZoApp JQuery Mobile 超酷轉場特效

  • 分享至 

  • xImage
  •  

通常在 App 裡,一個頁面切換到另外一個頁面,都會有些微的轉場效果,例如淡入淡出或是滑動...等,在 jqm 裡頭也不例外,而且如果我們使用了 EZoApp 又更簡單來操控,只需要使用屬性面板就可以設定這些華麗的效果。

使用轉場效果之前必須要注意一點,這些效果是套用在「按鈕」上,而不是轉換的頁面裡頭,是由觸發的時候告知要做哪些動作,jqm 總共有以下幾種效果:

● default:預設值 ( fade )
● fade:淡入淡出 ( 預設值 )
● flip:翻轉
● flow :流動切換效果
● pop:彈出窗口顯示
● slide:左右滑動切換
● slidefade:左右滑動 + 淡入淡出切換
● slideup:由上而下滑動切換
● slidedown:由下而上滑動切換
● turn:轉向下一頁
● none:直接切換

完整的範例可以參考:http://jqmdesigner.appspot.com/designer.html#&ref=5650273041121280

當然這些效果不僅適用在頁面的轉換上,同樣也適用在 popup 的彈出效果,就可以做出與眾不同的 popup 囉!( 範例:http://jqmdesigner.appspot.com/designer.html#&ref=6329730827550720 )


上一篇
Day 8 - EZoApp JQuery Mobile 隱藏版元件 (Slide Panel)
下一篇
Day 10 - EZoApp Extension 元件介紹 ( 基本元件 )
系列文
使用 EZoApp 開發 App 好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
jqman
iT邦研究生 4 級 ‧ 2014-10-08 16:55:28

上傳的 Gif 不能動...哭哭...

我要留言

立即登入留言