被copy了,谢谢帮我传播出去啊,嘿嘿,我是有够懒的。
http://www.web-delicious.com/jquery-plugins-demo/wdScrollTab/docs/index.htm
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:修正了一些小问题,组件更加稳定和易用; fix_0_5:有朋友提出需要设置render的宽度和高度,选项卡组件跟随其变化,已经提交;
1.帮助:
TabPanel(选项卡组件)
参数说明
renderTo<string | jQuery object | NULL> 渲染到某容器
将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。
items<array> 选项卡元素集合
选项卡组件渲染后就会显示的选项卡元素集合,具体参数请查看选项卡元素。
width<number> 宽度
选项卡组件的总宽度,默认400px。
height<number> 高度
选项卡组件中页面显示层的高度,默认300px。
border<string> 是否显示边框
嵌套显示选项卡时,会出现重复边框的情况,影响美观,将border设置为”none”,则可以避免,默认显示边框,不接受除”none”之外的参数值。
active<number> 渲染后默认激活哪个选项卡元素
下标以0为开始,默认为0。
maxLength<number> 最多显示几个选项卡元素
-1为无限,默认为-1。
tabs<return array> 获得选项卡组件所有的选项卡元素
可根据需要获得选项卡组件的所有选项卡元素。
公共方法
addTab(object) 添加一个选项卡元素
动态向选项卡组件中添加一个选项卡元素。
flush(string | number) 刷新选项卡元素的内容
将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。
show(string | number) 显示选项卡元素
显示制定选项卡元素,参数可以为选项卡元素的ID或下标。
Kill(string | number) 关闭选项卡元素
关闭选项卡元素,参数可以为选项卡元素的ID或下标。
getTabsCount()<return number> 获得选项卡元素数量
getTitle(string | number) <return string> 获得选项卡元素的标题
setTitle(string | number, string) 设置选项卡元素的标题
getContent(string | number) <return string> 获得选项卡元素的内容
setContent(string | number, string) 设置选项卡元素的内容
getDisable(string | number) <return boolean> 选项卡元素是否禁用
setDisable(string | number) 设置选项卡元素是否禁用
getCloseable(string | number) <return boolean> 选项卡元素是否可关闭
setCloseable(string | number, boolean) 设置选项卡元素是否可关闭
getActiveTab()<return object> 获得被激活的选项卡元素
使用方法
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css
new TabPanel({
renderTo:'tabs',
width: '100%',
height: '500px',
active: 0,
items: [{
title:'工作中心',
html:'<iframe width="100%" height="100%" frameborder="0"></iframe>',
closable: false
}]
});
TabPanel item(选项卡元素)
参数说明
id<string> 元素ID
必须唯一,或者不设置该参数,否则将无法添加到选项卡组件中,默认自动生成。
title<string> 元素标题
可以动态设置。
closeable<boolean> 是否可关闭
true可关闭,false不可关闭,默认为true。
2.效果如图:
注:
还顺便封装了Toolbar,WindowPanel等控件
相关推荐
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css new TabPanel({ renderTo:'tabs', width: '100%', height: '500px', active: 0, items: [{ title:'工作中心', ...
extjs4.2.1 tabPanel刷新及关闭标签
Extjs4.2 设置tabpanel当前活动页签的样式
ExtJS tabPanel实例ExtJS tabPanel实例
Ajax(Jquery与ExtJs) 框架对比 web前端开发
Jquery-Extjs4.0框架,用于前台页面开发的JS框架
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
NULL 博文链接:https://makeyouown.iteye.com/blog/1163522
jquery/extjs智能提示所需文件, jquery/extjs智能提示所需文件
NULL 博文链接:https://rowen.iteye.com/blog/446163
该项目使用SSH2框架+jQuery+ExtJs+MySql数据库+MyEclipse开发环境。1、设计构思 将订单模块分成管理员和顾客两个管理部分: 管理员:可以查看所有的订单,对已付款的订单进行发货,查看订单详情,按不同方式查询订单...
jQuery EasyUI 仿 Extjs 界面布局,左边手风琴折叠菜单。点击菜单在右边content区域可增加tab标签,可作为项目的main页
JavaScript框架jQuery和ExtJS的对比研究.pdf
jQuery和ExtJs代码提示spket插件的下载和使用说明
浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf
用Jquery完成了类似于extjs的tabpanel的功能,适合快速快发
本文简单介绍了目前流行的JavaScript 库, 并对其中较为流行的两个库jQuery 和ExtJs 进行的较详细的介绍和对比研究, 对在 Web 开发中JavaScript 库的选择具备一定的参考价值。
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
该DIV弹层简单漂亮,模仿EXTJS,能实现层上弹层。