Sencha Touchノート: oshige: 2011年1月アーカイブ

W3C HTML5 Logo

(2011年1月18日 22:11) | 個別ページ

サポートする機能に応じてオプションが付いてます。

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>

スワイプで遷移Ext.Carouselクラス

oshige

(2011年1月 4日 14:23) | 個別ページ

スマートフォンの特徴的なフィンガーアクションの１つスワイプ。Ext.Carouselクラスを使えば、スワイプでのページ遷移も簡単です。

サンプルを試す

index.js

Ext.setup({
 onReady: function(){
 var myToolbar = new Ext.Toolbar({
      dock: 'top',
      title: 'Ext.Carouselのテスト',
      height: 40
     });
 var myCarousel = new Ext.Carousel({
      direction: 'horizontal',
      ui:'dark',
      items: [
        {html: 'photo A

'},
        {html: 'photo B

'},
        {html: 'photo C

'}
       ]
     });

   var myPanel = new Ext.Panel({
     cls:'cards',
     layout:{
       type: 'vbox',
       align:'stretch'
      },
     defaults:{flex:1},
     fullscreen: true,
     dockedItems:[myToolbar],
     items: [myCarousel]
   });
 }
});