oshige: 2011年1月アーカイブ

W3C HTML5 Logo

|

W3CがHTML5 Logoを発表しましたね。

HTML5_Logo_128.png

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


HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Performance & Integration, and Semantics

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

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

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

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

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

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

IMG_0749.jpg
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>

スマートフォンの特徴的なフィンガーアクションの1つスワイプ。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] }); } });

IMG_0735.PNG

このアーカイブについて

このページには、oshige2011年1月に書いたブログ記事が含まれています。

前のアーカイブはoshige: 2010年12月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。