基于sencha touch 2.2所寫

代碼：

1 /* 2 *模仿tabpanel導航欄 3 */ 4 Ext.define('ux.TabBar', { 5 alternateClassName: 'tabBar', 6 extend: 'Ext.Toolbar', 7 xtype: 'tabBar', 8 config: { 9 docked: 'bottom', 10 cls: 'navToolbar', 11 layout: { 12 align: 'stretch' 13 }, 14 defaults: { 15 flex: 1 16 }, 17 //被選中的按鈕 18 selectButton: null 19 }, 20 initialize: function () { 21 var me = this; 22 me.callParent(); 23 //監(jiān)聽按鈕點擊事件 24 me.on({ 25 delegate: '> button', 26 scope: me, 27 tap: 'onButtonTap' 28 }); 29 }, 30 //更新被選中按鈕 31 updateSelectButton: function (newItem, oldItem) { 32 if (oldItem) { 33 oldItem.removeCls('x-tabBar-pressing'); 34 } 35 if (newItem) { 36 newItem.addCls('x-tabBar-pressing'); 37 } 38 }, 39 //當按鈕被點擊時 40 onButtonTap: function (button) { 41 if (!button.getInitialConfig('noSelect')) { 42 this.setSelectButton(button); 43 } 44 }, 45 /** 46 * @private 47 *執(zhí)行添加項，調(diào)用add方法后自動執(zhí)行 48 */ 49 onItemAdd: function (item, index) { 50 if (!this.getSelectButton() && item.getInitialConfig('selected')) { 51 this.setSelectButton(item); 52 } 53 this.callParent(arguments); 54 } 55 });

?

需要的css：

1 .navToolbar { 2 padding:0; 3 } 4 .navToolbar .x-button { 5 border:0; 6 margin:0; 7 border-right:1px solid #585B5B; 8 border-radius:0; 9 padding:0; 10 } 11 .navToolbar .x-button .x-button-label { 12 font-weight:normal; 13 color:White; 14 font-size:0.6em; 15 } 16 .navToolbar .x-tabBar-pressing { 17 background-image:none; 18 background-color:#0f517e; 19 background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0a3351),color-stop(10%,#0c4267),color-stop(65%,#0f517e),color-stop(100%,#0f5280)); 20 background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 21 background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 22 background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 23 background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 24 }

?

使用：

1 Ext.define('app.view.MyBar', { 2 alternateClassName: 'myBar', 3 extend: 'ux.TabBar', 4 xtype: 'myBar', 5 requires: ['app.view.About'], 6 config: { 7 items: [ 8 { 9 xtype: 'button', 10 text: '首頁', 11 //只有第一個設置的屬性有效 12 selected: true, 13 action: 'redirect', 14 redirect: 'home' 15 }, 16 { 17 xtype: 'button', 18 text: '關于', 19 action: 'redirect', 20 redirect: 'about' 21 }, 22 { 23 xtype: 'button', 24 text: '其他', 25 //沒有選中效果 26 noSelect:true, 27 action: 'other' 28 }] 29 } 30 });

?

效果圖：

2013.11.7

增加配置：沒有選中效果

?

使用示例：

http://www.cnblogs.com/mlzs/p/3382229.html

總結(jié)

以上是生活随笔為你收集整理的sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。