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

 

 

 

 

 

 

 

 

 

 

 

评论

134 楼 willpc 2014-02-09  

你好，虫哥，我想问下怎么能让tabs的高度随着内容的高度变化而变化呢

133 楼 zhuyuangping 2012-08-03  

有没有能运行的项目

132 楼 馋嘴猫 2012-05-27  

很不错的样式，感谢楼主，正在研究怎么样和自己程序嵌套

131 楼 corelengine 2012-05-19  

非常不错，支持！

130 楼 zgr12341 2012-03-27  

zgr12341 写道

LZ，我想问下，你这个ｗｉｎｄｏｗＰａｎｅｌ加载后在页面里面怎么进行按钮关闭啊！！！

还有啊，你的ｔｏｏｌｂａｒ能不能自定义显示啊

129 楼 zgr12341 2012-03-27  

LZ，我想问下，你这个ｗｉｎｄｏｗＰａｎｅｌ加载后在页面里面怎么进行按钮关闭啊！！！

128 楼 it-eye2012 2012-02-28  

非常佩服博主的专业技能和开源心态。很想和博主学习下。摆脱博主能不能共享下整个UI界面。或者发一份至本人邮箱：[e-mail]. 非常感谢

127 楼 vickypig 2012-01-12  

你好，看了你的这个tabPanel，感觉不错。现在有一个问题想请教下你。你toolbar里面的handler事件都是一样。我想设计成每个打开的页面（tab上面打开），他们的按钮都是toolbar的按钮一样，但是事件自己可以写，每个打开的页面事件可以写成不一样。


希望你可以提供一点思路。。。

126 楼 iamphex 2011-11-28  

能否把整套后台发上来，我指ui部份

125 楼 寄生虫 2010-06-26  

kenchen0805 写道

能否把整套后台发上来，我指ui部份

可以发，改天吧，整套都会发上来。

124 楼 寄生虫 2010-06-26  

JustDoNow 写道

寄生虫 写道

全当为了学习吧，有些控件也没必要山寨

对了，为什么楼主的网站不能评论呢

不好意思，这几天去上海旅游咯，没有及时回复，网站超过7天的日志不能回复的，最近工作换了，网站还暂时没有迁移。需要过一段时间。谢谢你的力挺。

123 楼 bingufo 2010-06-25  

太熟悉的界面了,,哈哈

122 楼 JustDoNow 2010-06-24  

寄生虫 写道

全当为了学习吧，有些控件也没必要山寨

对了，为什么楼主的网站不能评论呢

121 楼 JustDoNow 2010-06-24  

为什么有人老指责楼主模仿ext呢
这本来就是一个jQuery学习讨论帖，有需要jQuery实现此功能就借鉴
像不像ext又有什么关系
赞叹楼主负责回帖的精神，帮不少人解决了技术难题呢

120 楼 ahopedog2 2010-06-22  

ExtJS为什么没有火起来呢？

是不是因为 ExtJs并没有降低开发的难度，反而提高了难度。

请教各位，如果有像以前的Delphi那样的IDE的话，开发ExtJS不用再手动写代码，完全拖拽，只需要写事件等代码。
是不是ExtJS就会推广开呢。

119 楼 寄生虫 2010-06-11  

全当为了学习吧，有些控件也没必要山寨

118 楼 aws 2010-06-11  

山寨EXTJS的结果就是做成一个EXTJS吧

一个控件十几个二十几K，Extjs的全部控件你都山寨下来，恐怕只会比原版更大

117 楼 cuixiping 2010-06-11  

很棒。这贴好火

116 楼 kenchen0805 2010-05-20  

能否把整套后台发上来，我指ui部份

115 楼 kenchen0805 2010-05-20  

不错，extjs太慢了，还要考虑授权的问题