zoukankan      html  css  js  c++  java
  • sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下

    基于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: '更多'
            }]
        }
    });

    关注公众号,分享干货,讨论技术



  • 相关阅读:
    BAPI_TRANSACTION_COMMIT的使用方法(转)
    Win7 64bit系统下未能加载文件或程序集“System.Data.SQLite”的解决办法
    在Windows XP环境中配置OPC服务器时的设置方式
    关于异常“The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine”的处理
    MSChart使用做折线图饼图(转)
    C#如何导入内文至SAP(转)
    经典Sql大全转
    工程师突击:SAP ABAP实用程序开发攻略(转)
    如何使用ExtJS Design中生成的代码
    ExtJS 4 学习(1)环境配置及注意点
  • 原文地址:https://www.cnblogs.com/molashaonian/p/9097634.html
Copyright © 2011-2022 走看看