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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
采用call方式实现js继承
May 20 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
js实现简单的倒计时
Jan 28 Javascript
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
详解python算法之冒泡排序
2019/03/05 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
python中实现栈的三种方法
2020/12/19 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
上课看小说检讨书
2014/02/22 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
铣工实训报告
2014/11/05 职场文书