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: ‘更多’
        }]
    }
});

效果圖:

您可能感興趣的文章:

Android的Touch事件處理機制介紹淺談Android onTouchEvent 與 onInterceptTouchEvent的區別詳解javascript移動裝置Web開發中對touch事件的封裝例項Android Touch事件分發過程詳解js的touch事件的實際引用Android中處理apple-touch-icon詳解js實現touch移動觸屏滑動事件淺談javascript的Touch事件html5手機觸屏touch事件介紹HTML5實戰與剖析之觸控事件(touchstart、touchmove和touchend)