sencha touch 模仿tabpanel导航栏TabBar的实例代码


Posted in Javascript onOctober 24, 2013

基于sencha touch 2.2所写

代码:

/*
*模仿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) {
        console.log(oldItem);
        if (oldItem) {
            oldItem.removeCls('x-tabBar-pressing');
        }
        if (newItem) {
            newItem.addCls('x-tabBar-pressing');
        }
    },
    //当按钮被点击时
    onButtonTap: function (button) {
        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',
    config: {
        items: [
        {
            xtype: 'button',
            text: '问卷调查',
            //只有第一个设置的属性有效
            selected: true
        },
        {
            xtype: 'button',
            text: '我的积分'
        },
        {
            xtype: 'button',
            text: '开奖大厅'
        },
        {
            xtype: 'button',
            text: '幸运号码'
        },
        {
            xtype: 'button',
            text: '更多'
        }]
    }
});

效果图:

sencha touch 模仿tabpanel导航栏TabBar的实例代码

Javascript 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
jQuery设置div一直在页面顶部显示的方法
Oct 24 #Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 #Javascript
JS 获取滚动条高度示例代码
Oct 24 #Javascript
通过javascript把图片转化为字符画
Oct 24 #Javascript
js编写trim()函数及正则表达式的运用
Oct 24 #Javascript
原生JS实现加入收藏夹的代码
Oct 24 #Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 #Javascript
You might like
php curl选项列表(超详细)
2013/07/01 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php对数组排序的简单实例
2013/12/25 PHP
php的ajax简单实例
2014/02/27 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
js 操作符实例代码
2009/10/24 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vue实现购物车加减
2020/05/30 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python绘制热力图heatmap
2020/03/23 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python中提高pip install速度
2020/02/14 Python
Python中qutip用法示例详解
2020/10/02 Python
求职自荐信的格式
2014/04/07 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书