基于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. C# Http访问帮助类,支持get post请求文件下载 [

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.I ...

  2. C# 获取文件夹下的所有文件的文件名

    String path = @"X:\xxx\xxx"; //第一种方法 var files = Directory.GetFiles(path, "*.txt" ...

  3. MATLAB出现:错误使用 xlsread (line 251)

    背景: matlab 2015b和Excel2003 方法: 改Excel的Com加载项 步骤: 1   2  3   4 

  4. 利用Android NDK编译lapack

    最近有这方面的需要,但是在网上查了一下,几乎没有讲这个的.后来发现了外国某个大牛在github上的project.拉下来自己编译了一下竟然通过了,记录如下: 1.从https://github.com ...

  5. Linux服务器svn与项目同步

    命令:svn checkout svn://192.168.67.131/trunk/w1

  6. KSImageNamed项目图片智能提示

    下载地址:https://github.com/ksuther/KSImageNamed-Xcode PS:如果在插件未更新到支持Xcode 6.3.2的情况下,要在Xcode 6.3.2中使用,需要 ...

  7. Eclipse中项目全部报错----项目全部打红叉的解决办法

    今天遇到一个超级郁闷的事情,Eclipse新建的项目全部都打有红叉,我起初以为自 己可能是因为这两天一直在配置NDK开发环境方面的东西,是不是一不小心把那个地方给配置了,然后新建项目时项目都会出现红叉 ...

  8. Ubuntu下制作窗口

    在Ubuntu下安装 sudo apt-get install dialog 类型 用于创建 类型的选项 含义 复选框 --checklist 允许用户显示一个选项列表, 每个选项都可以被单独选择 信 ...

  9. yield 举例

    示例代码: 神奇的地方在于yield返回的是一个IEumerable,可以直接枚举. // yield-example.cs using System; using System.Collection ...

  10. C++输入cin,输出cout,换行endl,getline连续读取字符

    简记:cin=键盘,cout=屏幕. >>和<<指向代表数据流动方向.<<是流插入运算符,右操作数(运算符右边的值)会被插入到输出流中. 首先要包含:#includ ...