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 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 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
1.PHP简介
2006/10/09 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
python学生管理系统
2019/01/30 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
教师个人自我鉴定
2014/02/08 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
派出所所长先进事迹
2014/05/19 职场文书
授权委托书范文
2014/07/31 职场文书
世界遗产导游词
2015/02/13 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫