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 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 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
php flush类输出缓冲剖析
2008/10/19 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
python常用函数详解
2016/09/13 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
学生干部的自我评价分享
2014/01/18 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书