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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python实现用户答题功能
2018/01/17 Python
Python Celery多队列配置代码实例
2019/11/22 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
大型车展策划方案
2014/02/01 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers