TabPanelの切り替えアニメーション

(2011年1月12日 23:06) | 個別ページ

TabPanelクラスはcardSwitchAnimationプロパティを利用することで、簡単にカード切り替えのアニメーションを作れます。

cubeアニメーションサンプル

fadeアニメーションサンプル

flipアニメーションサンプル

popアニメーションサンプル

slideアニメーションサンプル

cubeアニメーションを行うJavaScriptは次のとおりです。cardSwitchAnimationプロパティの値に'cube'が指定してあります。
index.js

Ext.setup({
 onReady: function(){
   var cards = [{
     title: 'Photo 1',
     html: 'Photo 1
',
     cls: 'card1'
    }, {
     title: 'Photo 2',
     html: 'Photo 2
',
     cls: 'card2'
    }, {
     title: 'Photo 3',
     html: 'Photo 3
',
     cls: 'card3'
    }],

   var myPanel = new Ext.TabPanel({
     fullscreen: true,
     type: 'light',
     cardSwitchAnimation: 'cube',
     items: cards
   });
 }
});

なお、各カードのテキスト、背景色はCSS（cards.css）で指定しています。上記のindex.jsのcardsのitemsで指定しているカードオブジェクトのcls: 'card1'は、カードのCSSのクラスを指定しています。cards.cssには次のように書いてあります。

cards.css

 .card1, .card2, .card3 {
 text-align: center;
 color: #FF0000;
 text-shadow: #3F80CA 0 1px 0;
 font-size: 32px;
 padding-top: 10px;
}
 .card1 {
 background-color: #1CA9B0;
}
 .card2 {
 background-color: #4D824A;
}
 .card3 {
 background-color: #B8146E;
}

index.htmlでは、sencha-touch.css、sencha-touch.jsそしてindex.jsに加えて、cards.cssを読み込む行が追加されています。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <title>Tabs</title>

	<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
	<link rel="stylesheet" href="cards.css" type="text/css">
	
	<script type="text/javascript" src="../../sencha-touch.js"></script>
	<script type="text/javascript" src="index.js"></script>

</head>
<body></body>
</html>