sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
基于sencha touch 2.2所写
代码:
1 /* 2 *模仿tabpanel导航栏 3 */ 4 Ext.define('ux.TabBar', { 5 alternateClassName: 'tabBar', 6 extend: 'Ext.Toolbar', 7 xtype: 'tabBar', 8 config: { 9 docked: 'bottom', 10 cls: 'navToolbar', 11 layout: { 12 align: 'stretch' 13 }, 14 defaults: { 15 flex: 1 16 }, 17 //被选中的按钮 18 selectButton: null 19 }, 20 initialize: function () { 21 var me = this; 22 me.callParent(); 23 //监听按钮点击事件 24 me.on({ 25 delegate: '> button', 26 scope: me, 27 tap: 'onButtonTap' 28 }); 29 }, 30 //更新被选中按钮 31 updateSelectButton: function (newItem, oldItem) { 32 if (oldItem) { 33 oldItem.removeCls('x-tabBar-pressing'); 34 } 35 if (newItem) { 36 newItem.addCls('x-tabBar-pressing'); 37 } 38 }, 39 //当按钮被点击时 40 onButtonTap: function (button) { 41 if (!button.getInitialConfig('noSelect')) { 42 this.setSelectButton(button); 43 } 44 }, 45 /** 46 * @private 47 *执行添加项,调用add方法后自动执行 48 */ 49 onItemAdd: function (item, index) { 50 if (!this.getSelectButton() && item.getInitialConfig('selected')) { 51 this.setSelectButton(item); 52 } 53 this.callParent(arguments); 54 } 55 });
需要的css:
1 .navToolbar { 2 padding:0; 3 } 4 .navToolbar .x-button { 5 border:0; 6 margin:0; 7 border-right:1px solid #585B5B; 8 border-radius:0; 9 padding:0; 10 } 11 .navToolbar .x-button .x-button-label { 12 font-weight:normal; 13 color:White; 14 font-size:0.6em; 15 } 16 .navToolbar .x-tabBar-pressing { 17 background-image:none; 18 background-color:#0f517e; 19 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)); 20 background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 21 background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 22 background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 23 background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280); 24 }
使用:
1 Ext.define('app.view.MyBar', { 2 alternateClassName: 'myBar', 3 extend: 'ux.TabBar', 4 xtype: 'myBar', 5 requires: ['app.view.About'], 6 config: { 7 items: [ 8 { 9 xtype: 'button', 10 text: '首页', 11 //只有第一个设置的属性有效 12 selected: true, 13 action: 'redirect', 14 redirect: 'home' 15 }, 16 { 17 xtype: 'button', 18 text: '关于', 19 action: 'redirect', 20 redirect: 'about' 21 }, 22 { 23 xtype: 'button', 24 text: '其他', 25 //没有选中效果 26 noSelect:true, 27 action: 'other' 28 }] 29 } 30 });
效果图:
2013.11.7
增加配置:没有选中效果
使用示例:
http://www.cnblogs.com/mlzs/p/3382229.html
sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)相关推荐
- uni-app小程序onShow执行两次;微信小程序onShow重复执行原因;导航栏tabBar页的onLoad函数不执行;App.vue页的onShow执行原因;onShow莫名其妙执行
1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码跳转到小程 ...
- 小程序 底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
- 微信小程序 实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
- html导航栏代码跳转,微信小程序自定义底部导航栏tabBar(含跳转页面wx.navigateTo)...
一.app.json配置 这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
- html ios导航栏下拉菜单,Flutter -- iOS导航栏TabBar
1 import 'package:flutter/cupertino.dart';2 import 'package:flutter/material.dart';3 4 void main(){5 ...
- Sencha Touch Carousel 去除底栏
/*global Ext:false */Ext.application({ launch: function () { Ext.create('Ext.Carousel', { defaults: ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
- 微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机;tabBar页获取不到参数问题;navigateTo跳转无效问题;onShow执行两次问题;
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
- iOS:iPhone手机分辨率、尺寸、导航栏尺寸、Tabbar尺寸对比(菜鸟教程)
手机机型(iPhone) 屏幕尺寸(inch) 逻辑分辨率(pt) 设备分辨率(px) 缩放因子 (Scale Factor) 像素密度(ppi) 5(s/se) 4 320×568 640×1136 ...
最新文章
- Linux下三大最佳的开源视频播放器
- Oracle 的基本特点,并完整描述安装过程
- 防止前端脚本JavaScript注入
- Java-控制台接受用户输入数据的方法
- 光影之路 GPU架构发展史(3/4)
- erp从内部集成起步第3版下载_SCM与ERP的区别在哪里呢?
- fedora与win双系统 设置win为默认启动
- JS学习总结(3)——运算符/字符串
- 无线射频收发芯片SI24R1技术相关问题解答
- 解决Couldn‘t determine repo type for URL
- (CodeForce) C. Edgy Trees (并查集)
- python使用pyecharts库画地图数据可视化
- loss scale的理解
- Spark——Spark概述
- 从A股暴跌看中国经济发展
- Hyperledger Fabric链码修改与测试(一)
- Android播放视频或视频通话只有声音没有画面解决方法,布局刷新失败解决办法
- 电感为什么是电压超前90度——问题整理
- Boost.Python教程:通用技术
- 2018年12月上海国际大数据产业展
热门文章
- python 宏定义_python Debug宏定义
- linux启动docker_10分钟快速掌握Docker必备基础知识
- sql 2008 找不到本地服务器名称,出现在 sys.servers 中找不到服务器 apos;***\SQLEXPRESS’。请验证指定的服务器名称是否正确的解决方法 – 龙生时代...
- php resultset用法,PHP PDOStatement::nextRowset讲解
- Excel中配置VBA的工作环境
- 项目十大管理及5大过程组概览
- 笔记-信息系统安全管理-《信息安全等级保护管理办法》
- 30个Python常用极简代码
- 鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互
- Winform中设置ZedGraph的多条Y轴的标题和刻度不显示十次幂