sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
2013-10-24 15:02
459 查看
基于sencha touch 2.2所写
代码:
需要的css:
使用:
效果图:
2013.11.7
增加配置:没有选中效果
使用示例:
/article/5153275.html
代码:
/* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar', extend: 'Ext.Toolbar', xtype: 'tabBar', config: { docked: 'bottom', cls: 'navToolbar', layout: { align: 'stretch' }, defaults: { flex: 1 }, //被选中的按钮 selectButton: null }, initialize: function () { var me = this; me.callParent(); //监听按钮点击事件 me.on({ delegate: '> button', scope: me, tap: 'onButtonTap' }); }, //更新被选中按钮 updateSelectButton: function (newItem, oldItem) { if (oldItem) { oldItem.removeCls('x-tabBar-pressing'); } if (newItem) { newItem.addCls('x-tabBar-pressing'); } }, //当按钮被点击时 onButtonTap: function (button) { if (!button.getInitialConfig('noSelect')) { this.setSelectButton(button); } }, /** * @private *执行添加项,调用add方法后自动执行 */ onItemAdd: function (item, index) { if (!this.getSelectButton() && item.getInitialConfig('selected')) { this.setSelectButton(item); } this.callParent(arguments); } });
需要的css:
.navToolbar { padding:0; } .navToolbar .x-button { border:0; margin:0; border-right:1px solid #585B5B; border-radius:0; padding:0; } .navToolbar .x-button .x-button-label { font-weight:normal; color:White; font-size:0.6em; } .navToolbar .x-tabBar-pressing { background-image:none; background-color:#0f517e; 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)); background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); }
使用:
Ext.define('app.view.MyBar', { alternateClassName: 'myBar', extend: 'ux.TabBar', xtype: 'myBar', requires: ['app.view.About'], config: { items: [ { xtype: 'button', text: '首页', //只有第一个设置的属性有效 selected: true, action: 'redirect', redirect: 'home' }, { xtype: 'button', text: '关于', action: 'redirect', redirect: 'about' }, { xtype: 'button', text: '其他', //没有选中效果 noSelect:true, action: 'other' }] } });
效果图:
2013.11.7
增加配置:没有选中效果
使用示例:
/article/5153275.html
相关文章推荐
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- sencha touch 模仿tabpanel导航栏TabBar的实现代码
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- sencha touch NavigationView 嵌套 TabPanel 的问题
- Sencha Touch 2 快速入门系列(四)-- 组件之标签面板(TabPanel)
- sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(废弃 仅参考)
- Sencha-touch之TabPanel的Tab在点击时实施事件
- sencha touch 2 tabpanel中List的不显示问题,解决方案
- Sencha Touch 1.x 为tabPanel添加一个更多按钮。
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)
- Sencha Touch中TabPanel组件的使用(转)
- sencha touch 2 tabpanel中List的不显示问题,解决方案
- Sencha Touch 1.x TabPanel的左侧TabBar
- sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮
- sencha touch之panel和tabpanel
- sencha touch的tabpanel里tab比较多时,使tab子标签滚动
- Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)
- senchatouch tabPanel 在面板跳转时执行自定义函数 handler()
- Sencha touch 开发系列:容器组件:tabpanel,carousels