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 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
babel基本使用详解
Feb 17 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
javascript框架设计之类工厂
2015/06/23 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
完美解决js传递参数中加号和&号自动改变的方法
2016/10/11 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python自动重试HTTP连接装饰器
2015/04/28 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
实例讲解Python爬取网页数据
2018/07/08 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python多线程http压力测试脚本
2019/06/25 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python如何提升爬虫效率
2020/09/27 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
精彩自我鉴定
2014/01/16 职场文书
承认错误的检讨书
2014/01/30 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
重点工程汇报材料
2014/08/27 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015新学期开学寄语
2015/02/26 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python实现Nao机器人的单目测距
2021/09/04 Python
React Fragment介绍与使用详解
2021/11/11 Javascript
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Python实现日志实时监测的示例详解
2022/04/06 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers