这篇文章介绍了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: '更多'

        }]

    }

});

sencha touch 模仿tabpanel导航栏TabBar的实现代码的更多相关文章

  1. sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)

    基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar' ...

  2. iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码

    开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...

  3. jquery侧边折叠导航栏制作,两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  4. sencha touch 2 tabpanel中List的不显示问题,解决方案

    笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用t ...

  5. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

  6. 添加底部导航栏tabbar

    效果图: 如果要添加底部导航栏,最少2个,最多5个. app.json { "pages": [ "pages/index/index", "page ...

  7. 网页导航栏 html + css的代码实现

    一般来讲,我们的网页导航栏是这么个模式来构建在结构上:1.首先我们需要给导航栏的div 给个类名 一般为nav2.然后就是一个无序表格 3.由于导航栏的文字一般都是链接用来跳转页面 要在li里面包含一 ...

  8. <iOS 导航栏>第一节:导航栏透明方法实现代码

      说下导航栏的透明方法:   很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码.   ...

  9. 01 uni-app框架学习:项目创建及底部导航栏tabBar配置

    1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:

随机推荐

  1. WPF中InkCanvas(墨水面板)用法

    原文:WPF中InkCanvas(墨水面板)用法   WPF中InkCanvas(墨水面板)用法                                                    ...

  2. Vue 去脚手架插件,自动加载vue文件

    接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都 ...

  3. 1977: [BeiJing2010组队]次小生成树 Tree

    1977: [BeiJing2010组队]次小生成树 Tree https://lydsy.com/JudgeOnline/problem.php?id=1977 题意: 求严格次小生成树,即边权和不 ...

  4. exchange 2007迁移到2010

    标签:exchange 2007 2010 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zpf666.blog.51cto.c ...

  5. model的index无限次数执行导致stackOverFlow

    model的index无限次数执行导致stackOverFlow

  6. java存储位置经典例子

    String a="a";String b="b";String c="ab";String d="ab";String ...

  7. 玩转Vim-札记(二)

    玩转Vim-札记(二) 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 0 → ...

  8. 生产者与消费者-N:1-基于list

    多个生产者/一个消费者: /** * 生产者 */ public class P { private MyStack stack; public P(MyStack stack) { this.sta ...

  9. 装机、UEFI双系统安装

    装机设置 设置默认中图标显示查看-选项-查看-应用到文件夹 控制面板-语言-管理输入法 word-选项-取消输入法设置处于活动状态word-字体-设置默认值 高DPI的显示屏,需要使用125%的缩放, ...

  10. Android 之Buletooth

    一:概要: Android提供了Buletooth的API ,通过API 我们可以进行如下的一些操作: 1.扫描其他的蓝牙设备 2.查询能配对的蓝牙设备 3.建立RFCOMM 通道 4.连接其他的蓝牙 ...