jQuery模仿ExtJS之TabPanel

 

被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等控件

 

 

 

 

 

 

 

 

 

 

 

评论

54 楼 mgh2008 2010-01-25  

效果不错，刚好可以借用一下，多谢了

53 楼 qchong 2010-01-25  

micki 写道

费这事干嘛  直接ExtJS不就得了
再说ExtJS就那么难学吗？
ExtJS提供的不仅仅是组件和UI，而是一整套解决方案

呵呵,Ext...先看看它的大小,再看看它的License

52 楼 xuanye 2010-01-20  

蛮不错的。

51 楼 寄生虫 2010-01-20  

qiancang 写道

想请教一下楼主，你的链接都是写在toolbar里的，如果首页不是一个toolbar，就是普通的由好多a链接组成的页面，那在a链接里该怎么写onclick的代码呢？使之能打开相应的tab标签。
如：附件的图片。

show : function(position, notExecuteMoveSee)

第一个参数可以写选项卡的下标，从0开始，也可以写选项卡的ID；
第二个参数是boolean类型，false则会移动到可见范围，一般写false就可以了。

50 楼 qiancang 2010-01-19  

想请教一下楼主，你的链接都是写在toolbar里的，如果首页不是一个toolbar，就是普通的由好多a链接组成的页面，那在a链接里该怎么写onclick的代码呢？使之能打开相应的tab标签。
如：附件的图片。

49 楼 blank_y 2010-01-18  

下来研究一下，说不定自己有空也写个东西。

48 楼 maomiandyou 2010-01-18  

寄生虫 写道

BUG是有一点，不过一直都在改进中，用倒是可以用了，就怕有些功能满足不了特殊的需求

不要怕，

47 楼 寄生虫 2010-01-18  

BUG是有一点，不过一直都在改进中，用倒是可以用了，就怕有些功能满足不了特殊的需求

46 楼 wiwiluo 2010-01-18  

很好!~希望楼主继续努力，我测了一下，目前还没发现什么BUG，期待稳定版的尽快出现

45 楼 kjj 2010-01-13  

我本来想用，等你正式版发布后再用一下学习学习，期待楼主发布稳定版，在这里首先支持一下楼主的创作精神！！

44 楼 寄生虫 2010-01-08  

习惯在马桶上思考 写道

看了你的东西,提一个BUG,一个建议.
第一BUG:假设,原有三个不可关闭的TAB项.当新增可关闭TAB项很多时,会出现向左或向或的箭头,再关闭TAB项,会发现之前三个不可关闭的TAB项位置已经回不来了,左边的像素没有回到最初的样子.

第二建议:TAB项可以尝试支持右健PANEL比如,"关闭当前选项卡"、“关闭其它选项卡”、“关闭所有选项卡”、“刷新”等。

第一个BUG确实存在，我已经在新版本中修正了，还没有更新，最新的在http://www.shareii.com中有Demo；
第二个建议，一开始也想这样做的，不过考虑到还没有时间写通用的右键弹出组件，就没做这部分功能，以后会加上的。

谢谢支持！

43 楼 习惯在马桶上思考 2010-01-07  

看了你的东西,提一个BUG,一个建议.
第一BUG:假设,原有三个不可关闭的TAB项.当新增可关闭TAB项很多时,会出现向左或向或的箭头,再关闭TAB项,会发现之前三个不可关闭的TAB项位置已经回不来了,左边的像素没有回到最初的样子.

第二建议:TAB项可以尝试支持右健PANEL比如,"关闭当前选项卡"、“关闭其它选项卡”、“关闭所有选项卡”、“刷新”等。

42 楼 javaAlpha 2009-10-13  

写的不错啊 谢谢 分享 研究一下

41 楼 ulear 2009-10-13  

发现JQ真的是越来越强大了

40 楼 Relucent 2009-10-12  

逼近 EXT 了，光看界面还真看不出来。

39 楼 vvvsrx 2009-07-29  

在使用新版本了~看了下demo...完美哦~有bug我提交哦~

38 楼 寄生虫 2009-07-29  

新版本已提交，支持ID获得Title等信息

37 楼 vvvsrx 2009-07-29  

寄生虫 写道

vvvsrx 写道

我想问个问题：
getTitle括号里应该填的是什么呀...填id好像不对啊...如果要用id找title应该怎么写....

先谢谢楼主了

目前版本是填下标，我抓紧改进一下，把源码传上去

楼主加油啊...泪流满面...

36 楼 寄生虫 2009-07-28  

vvvsrx 写道

我想问个问题：
getTitle括号里应该填的是什么呀...填id好像不对啊...如果要用id找title应该怎么写....

先谢谢楼主了

目前版本是填下标，我抓紧改进一下，把源码传上去

35 楼 vvvsrx 2009-07-27  

我想问个问题：
getTitle括号里应该填的是什么呀...填id好像不对啊...如果要用id找title应该怎么写....

先谢谢楼主了