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

 

 

 

 

 

 

 

 

 

 

 

评论

14 楼 skyblue1984 2009-07-09  

很NB   不知道性能如何 感觉应该会很轻量

13 楼 whaosoft 2009-07-08  

是lz山寨的吗 很牛 不过在ie8里还能正常用不

12 楼 viMory 2009-07-08  

我觉得很不错

11 楼 寄生虫 2009-07-08  

huoyan_21 写道

grid 是怎么做的？

其实很简单，grid我并没有封装起来，单只是样式和几句脚本而已。
column是一个table，dataset是一个table，在页面ready之后，设置宽度、计算高度，如果有滚动条就把滚动条的宽度也计算上。

10 楼 寄生虫 2009-07-08  

thinkforever 写道

ext的界面没觉着好看，不要仿了，要仿的话干脆直接用ext了

界面可以随便换的，这问题不大，主要是模仿它所呈现的交互。

9 楼 寄生虫 2009-07-08  

02221021 写道

寄生虫 写道

TabPanel最大，未压缩是23k，其他的都在15k以下，所有都整到一个js中，压缩后预计是30k

23k..有点过了.

主要是注释过多的原因吧，平均每2行代码就有一行注释，方便修改。

8 楼 thinkforever 2009-07-08  

ext的界面没觉着好看，不要仿了，要仿的话干脆直接用ext了

7 楼 flyfan 2009-07-08  

仿的非常像呀，楼主可以用jquery出一个山寨extjs了

6 楼 02221021 2009-07-08  

寄生虫 写道

TabPanel最大，未压缩是23k，其他的都在15k以下，所有都整到一个js中，压缩后预计是30k

23k..有点过了.

5 楼 寄生虫 2009-07-08  

huoyan_21 写道

寄生虫 写道

TabPanel最大，未压缩是23k，其他的都在15k以下，所有都整到一个js中，压缩后预计是30k

那这样再算上jquery，预计就是一个页面需要大约90k？

再gzip一下，会更小的，最起码比起EXT是小了吧（虽然没有EXT那么强大），而且不一定每个页面都引用所有的控件是吧，用到哪个引入哪个，不过这样可能会增加请求的次数。

4 楼 寄生虫 2009-07-08  

TabPanel最大，未压缩是23k，其他的都在15k以下，所有都整到一个js中，压缩后预计是30k

3 楼 寄生虫 2009-07-08  

不是EXT难学，而是遇到一个个性化的功能，需要花费太长时间去扩展，jQuery就不一样了，方便易学。
其实更多的考虑因素是其他技术人员能否快速掌握。
实现TabPanel也只用了2天的时间，学EXT并且可以去重构，那就不是一天两天的事了。
再就是要考虑与现有项目的结合，要迁就老项目。

还是希望能帮忙解决文章一开始提到的问题，谢谢。

2 楼 micki 2009-07-08  

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

1 楼 makemyownlife 2009-07-08  

界面效果做的和ext很类似，那个选择接受人那块做的听直观的....
学习下....