基于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) {
if (oldItem) {
oldItem.removeCls('x-tabBar-pressing');
}
if (newItem) {
newItem.addCls('x-tabBar-pressing');
}
},
//当按钮被点击时
onButtonTap: function (button) {
if (!button.getInitialConfig('noSelect')) {
this.setSelectButton(button);
}
},
/**
* @private
*执行添加项,调用add方法后自动执行
*/
onItemAdd: function (item, index) {
if (!this.getSelectButton() && item.getInitialConfig('selected')) {
this.setSelectButton(item);
}
this.callParent(arguments);
}
});

需要的css:

 .navToolbar {
padding:;
}
.navToolbar .x-button {
border:;
margin:;
border-right:1px solid #585B5B;
border-radius:;
padding:;
}
.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',
requires: ['app.view.About'],
config: {
items: [
{
xtype: 'button',
text: '首页',
//只有第一个设置的属性有效
selected: true,
action: 'redirect',
redirect: 'home'
},
{
xtype: 'button',
text: '关于',
action: 'redirect',
redirect: 'about'
},
{
xtype: 'button',
text: '其他',
//没有选中效果
noSelect:true,
action: 'other'
}]
}
});

效果图:

2013.11.7

增加配置:没有选中效果

使用示例:

http://www.cnblogs.com/mlzs/p/3382229.html

sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)的更多相关文章

  1. sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...

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

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

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

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

  4. 添加底部导航栏tabbar

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

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

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

  6. 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)

    参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...

  7. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  8. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  9. Taro多端自定义导航栏Navbar+Tabbar实例

    运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...

随机推荐

  1. Throwable vs Exception

    Throwable中的Error是不需要程序处理的. Exception是需要处理的.

  2. Mac或者linux下登陆到linux上的SFTP

    登陆 sftp  -i  密钥路径  用户@ip ➜  ~ sftp -i Desktop/aliyun.pem root@39.106.30.1 Connected to 39.106.30.1 上 ...

  3. Android: JAVA和C# 3DES加密解密

    最近 一个项目.net 要调用JAVA的WEB SERVICE,数据采用3DES加密,涉及到两种语言3DES一致性的问题,下面分享一下,这里的KEY采用Base64编码,便用分发,因为Java的Byt ...

  4. 文件流方式 删除prefab空脚本

    /// <summary> /// 删除一个Prefab上的空脚本 /// </summary> /// <param name="path"> ...

  5. phpcms v9不限模型全站搜索

    简单修改一下v9默认的搜索功能,可以不按模型搜索全站内容 下面是被修改后的search模块中的index.php文件 <?php defined('IN_PHPCMS') or exit('No ...

  6. python装饰器、继承、元类、mixin,四种給类动态添加类属性和方法的方式(一)

    介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...

  7. Android基础部分再学习---activity的状态保存

    主要是bundle   这个參数 參考地址:http://blog.csdn.net/lonelyroamer/article/details/18715975 学习Activity的生命周期,我们知 ...

  8. it码农之心灵鸡汤(一)

    到底该怎么面对工作,到底怎么面临人生.到底怎么面临青春,对于打工的人来说这些一直都是心中一直无法解惑的谜团. 对于人们怎样看待工作,以前华为创始人任正非说过:非常多人问我,来公司工作有没有双休?需不须 ...

  9. Git Step by Step – (1) Git 简介

    由于工作的需要,代码版本控制工具要从Perforce换成Git.说实话,刚开始真的很不适应,要从一个可以很好的支持用户界面的工具转到一个命令行工具,而且Git中有几百个命令,一下子就傻眼了. 但是经过 ...

  10. [XPath] XPath 与 lxml (四)XPath 运算符

    XPath 中支持的运算符 # | 或: 返回所有 price 和 title 节点集合 >>> root.xpath('//price|//title') [<Element ...