Sencha Carousel (Edit)

satake.sus4

2010-07-27 19:05:00

License: GPLv3 License

Fork: 1

Fav: 3

View: 5167

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 49 lines
HTML 0 lines
CSS 22 lines

Sencha Carousel (Edit)
Sench Touch Beta 0.91

new Ext.Panel({
        fullscreen: true,
        dockedItems:{
          xtype:'toolbar',
          dock:'top',
          title:'Carousel',
          items:[
            {
              text:'Start',
              handler:function(){
                carousel1.layout.setActiveItem(0);
              }
            },
            new Ext.Spacer(),
            {
              text:'End',
              handler:function(){
                carousel1.layout.setActiveItem(cards.length-1);
              }
            }
          ]
        },
        defaults: {
          //子となるパネル(2つのCarouselのレイアウト設定)
          flex: 1
        },
        items: [carousel1]
      });
    }
});

Sencha Carousel (Edit)
Sench Touch Beta 0.91

Ext.setup({ //onReadyコンフィグ onReady: function() { var cards = []; for (var i = 0;i < 10; i ++) { cards.push({ html:'<p style="font-size:'+ i +'em">' + i +'</p>', title:i }); } // Create a Carousel of Items //カルーセルアイテム作る var carousel1 = new Ext.Carousel({ defaults: { cls: 'card' }, items:cards }); new Ext.Panel({ fullscreen: true, dockedItems:{ xtype:'toolbar', dock:'top', title:'Carousel', items:[ { text:'Start', handler:function(){ carousel1.layout.setActiveItem(0); } }, new Ext.Spacer(), { text:'End', handler:function(){ carousel1.layout.setActiveItem(cards.length-1); } } ] }, defaults: { //子となるパネル(2つのCarouselのレイアウト設定) flex: 1 }, items: [carousel1] }); } });body { } .card { text-align: center; color: #204167; text-shadow: #3F80CA 0 1px 0; font-size: 72px; padding: 80px 40px; } .x-phone .card { padding: 15px; font-size: 36px; } .card p { line-height: 30px; } .x-phone .card p { line-height: 18px; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/czlu/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/satake.sus4/czlu" title="Sencha Carousel (Edit)">Sencha Carousel (Edit) - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip