fix_0_1:修改了选项卡内容层的HTML没有设置body backgroundColor时,在FF中透明的BUG;
fix_0_2:添加了窗口resize,TabPanel也随之resize(注:resize触发条件是,TabPanel必须渲染到body上,不设置宽度则会resize宽度,不设置高度则会resize高度);
fix_0_3:可以在任何容器中自动缩放,随父容器大小改变而改变,但必须保证父容器宽度为百分比或高度为百分比,如果选项卡组件实例化时设置了宽度或高度,则不自动改变;
fix_0_4:(1)修正了工具栏中的按钮,改用A来做,因为工具栏如果渲染到FORM中,在谷歌和火狐会出现提交表单的情况,而且不用再担心IE中中文会偏上的BUG;(2)改进了窗口改变大小选项卡不随之判断位置移动的小问题;(3)忘记还改过哪里了。。
已测试浏览器:IE6,IE7,IE8,Firefox,Chrome,Netscape,Safari
其他浏览器也应该没啥问题,PS:WebKit果然强大
续jQuery模仿ExtJS之TabPanel
山寨也是一种乐趣!
此次将TabPanel与Toolbar结合在一起做了一个Demo,请各位赐教~
接招 Mountain fastness !!
Toolbar(工具栏组件)
参数说明
renderTo<string | jQuery object | NULL> 渲染到某容器
将工具栏组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。
border<string | NULL> 边框显示位置
参数可为“top”,”bottom”,”none”,默认为”bottom”
items<array> 按钮元素集合
工具栏组件渲染后就会显示的按钮元素集合,具体参数请查看按钮元素。
filters<array> 快速过滤按钮元素集合
工具栏组件渲染后就会显示的快速过滤按钮元素集合,具体参数请查看快速过滤按钮元素。
active<string> 激活哪个快速过滤按钮元素
设置后会默认按下该快速过滤按钮元素。
azable<boolean> 是否有AZ快速检索组件
true有,false无,默认为false。
azparam<string | NULL> AZ快速检索组件用到的隐藏变量ID
没有AZ组件时可不设置。
公共方法
add(object) 添加按钮元素、快速过滤组件按钮元素
可根据需要进行动态向工具栏组件中添加元素。
render() 渲染工具栏组件
因工具栏组件与页面高度计算相关,所以需要手动渲染。
使用方法
页面引入jQuery.js、Toolbar.js、Toolbar.css
new Toolbar({
renderTo : 'toolbar',
items : [{
type:'button',
text:'新建',
bodyStyle : 'new',
handler:function(){
//do...
}
}]
}).render();
Toolbar item(工具栏按钮元素)
参数说明
type<string> 元素类型
可以为”button”、”textfield”、”az”。
text<string> 元素显示字符
可以不设置。
bodyStyle<string> 元素样式表
handler<function> 按钮元素事件
useable<string> 按钮元素是否可用
使用方法
工具栏组件中可以有多个button或textfield,但只允许有一个az类型元素
Toolbar filter(工具栏快速过滤组件元素)
参数说明
各个参数大致和工具栏按钮元素相同。
使用方法
filters : [{
id : 'ALL',
title : '全部',
bodyStyle : 'btn-all',
handler : function(){
filterSysMessage('ALL');
}
},{
id : 'T',
title : '已读',
bodyStyle : 'filter-read-y',
handler : function(){
filterSysMessage('T');
}
},{
id : 'F',
title : '未读',
bodyStyle : 'filter-read-n',
handler : function(){
filterSysMessage('F');
}
}],
active : '<s:property value="readFlag"/>' //需要动态加载
- 大小: 18.4 KB
分享到:
- 2009-07-21 15:47
- 浏览 12718
- 评论(51)
- 论坛回复 / 浏览 (42 / 29110)
- 查看更多
相关推荐
将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 items<array> 选项卡元素集合 选项卡组件渲染后就会显示的选项卡元素集合,具体参数...
extJs4 toolbar 工具条,代码例子
Ajax(Jquery与ExtJs) 框架对比 web前端开发
Jquery-Extjs4.0框架,用于前台页面开发的JS框架
NULL 博文链接:https://makeyouown.iteye.com/blog/1163522
jquery/extjs智能提示所需文件, jquery/extjs智能提示所需文件
storebar extjs通过store实现toolbar
jQuery EasyUI 仿 Extjs 界面布局,左边手风琴折叠菜单。点击菜单在右边content区域可增加tab标签,可作为项目的main页
该项目使用SSH2框架+jQuery+ExtJs+MySql数据库+MyEclipse开发环境。1、设计构思 将订单模块分成管理员和顾客两个管理部分: 管理员:可以查看所有的订单,对已付款的订单进行发货,查看订单详情,按不同方式查询订单...
JavaScript框架jQuery和ExtJS的对比研究.pdf
jQuery和ExtJs代码提示spket插件的下载和使用说明
浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf
本文简单介绍了目前流行的JavaScript 库, 并对其中较为流行的两个库jQuery 和ExtJs 进行的较详细的介绍和对比研究, 对在 Web 开发中JavaScript 库的选择具备一定的参考价值。
该DIV弹层简单漂亮,模仿EXTJS,能实现层上弹层。
本人利用网上前人资源,做了适用于EsayUI、Jquery、ExtJS等JS库中所用图标及界面图标选择功能,可以 用到动态的设置界面中的图标
js jquery extjs myeclipse 代码提示插件安装及安装步骤js jquery extjs myeclipse 代码提示插件安装及安装步骤js jquery extjs myeclipse 代码提示插件安装及安装步骤js jquery extjs myeclipse 代码提示插件安装及...
基于vs2010的省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs) 示例源代码。
在 gridPanel中动态生成带按钮及查询条件的工具栏
主流插件jsEclipse、Aptana Studio和spket,就js语法加亮来说,都可以。 jsEclipse是轻量级免费使用的插件,不支持jQuery,虽说可以添加library,但在网上很难找到jQuery的xml库
软件技术 ExtJS jquery Mootools Dojo 比较