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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
移动端效果之IndexList详解
Oct 20 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
Javascript----文件操作
2007/01/18 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
js实现点击生成随机div
2020/01/16 Javascript
python开发之list操作实例分析
2016/02/22 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python选课系统开发程序
2016/09/02 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
阳光体育活动方案
2014/02/16 职场文书
公司经理任命书
2014/06/05 职场文书
会计学专业自荐信
2014/06/25 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
浅谈python中的多态
2021/06/15 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题