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

 

 

 

 

 

 

 

 

 

 

 

评论

34 楼 wellbbs 2009-07-26  

支持一下，顶到楼主发布自动缩放的功能出来。
正需要这个。

33 楼 okitgo 2009-07-17  

ExtJS不是免费，不安全..
支持写自己的山寨ExtJS

32 楼 寄生虫 2009-07-17  

EXTJS叫好不叫座的原因应该是：
1.加载速度慢
2.学习曲线长——指的是每个人的学习曲线，大牛除外
3.会改变现有架构

31 楼 Rainbamboo 2009-07-16  

我很奇怪，既然有那么多人支持使用Extjs,为啥现在还没有大面积普及开来，难道Extjs现在还不能实现按需加载?或者其它?

30 楼 寄生虫 2009-07-14  

jeff312 写道

document.getElmentById('xxx') 在每次interval调用时都要在整个web document里查找一次元素'xxx'，太累了。

你先做一个该元素的全局引用：

var oElem = document.getElmentById('xxx');

然后setInterval()这样写：

function intervalAction(){ 
    var top = oElem.style.top;
    top = parseInt(top) + 5 + 'px'; 
    count ++; 
    if(count==20) { 
        clearInterval(interv); 
    } 
}
var interv = setInterval(intervalAction(), 50); 

一次引用，全局受益。哥们，应该加强静态语言的学习啊，javascript太灵活了，容易走上歪路。

你说的没错，文首的代码只是随便举例写的，以后会多加注意的，谢谢啦。

29 楼 jeff312 2009-07-14  

document.getElmentById('xxx') 在每次interval调用时都要在整个web document里查找一次元素'xxx'，太累了。

你先做一个该元素的全局引用：

var oElem = document.getElmentById('xxx');

然后setInterval()这样写：

function intervalAction(){ 
    var top = oElem.style.top;
    top = parseInt(top) + 5 + 'px'; 
    count ++; 
    if(count==20) { 
        clearInterval(interv); 
    } 
}
var interv = setInterval(intervalAction(), 50); 

一次引用，全局受益。哥们，应该加强静态语言的学习啊，javascript太灵活了，容易走上歪路。

28 楼 ibadboy 2009-07-13  

楼主能给实例在框架中引用你的tab页签了。

27 楼 ibadboy 2009-07-13  

  楼主用的是iframe加载的，在iframe做的框架中运用会有缺陷的吧。

一般tab页签都是放在topFrame中，然后点击leftFrame中链接会新增一个页签。而

你用iframe加载链接无法加载到rightFrame中。

26 楼 寄生虫 2009-07-13  

ibadboy 写道

试用了，好像设置绑定tab标签的元素不能设置百分比高度，只能设置像400px。

有点不人性化了。

确实是这样，因为是有针对性应用，所以就没有考虑以百分比处理，而且高度是针对于content的，选项卡那个层并没有考虑在内，很多地方还是有待改进的。

25 楼 ibadboy 2009-07-12  

试用了，好像设置绑定tab标签的元素不能设置百分比高度，只能设置像400px。

有点不人性化了。

24 楼 damoqiongqiu 2009-07-10  

山寨一下还是可以的，然后再去看看Ext就没那么难了吧。

23 楼 zhannufeifei 2009-07-10  

找这个路子一直模仿下去 估计也不extjs小不了多少，人家提供了就用呗，开发时间也是钱啊

22 楼 02221021 2009-07-09  

寄生虫 写道

02221021 写道

另外楼主是不是用图片做div的背景了.这时候在IE中移动会每次都重载背景图片.相对会卡点

你说的没错，那应该如何解决呢，EXT在TabPanel的item上也用到了图片做背景，而且圆角效果不知一张图片，它是怎么做到的不重复加载图片？

div包裹img <div><img></img></div>.. 用图片当背景本身没错,只是在IE下的移动有这个BUG

21 楼 lucky16 2009-07-09  

嘻嘻!
接受那一块确实不错哦!
借鉴咯!

20 楼 寄生虫 2009-07-09  

02221021 写道

另外楼主是不是用图片做div的背景了.这时候在IE中移动会每次都重载背景图片.相对会卡点

你说的没错，那应该如何解决呢，EXT在TabPanel的item上也用到了图片做背景，而且圆角效果不知一张图片，它是怎么做到的不重复加载图片？

19 楼 02221021 2009-07-09  

另外楼主是不是用图片做div的背景了.这时候在IE中移动会每次都重载背景图片.相对会卡点

18 楼 02221021 2009-07-09  

document.getElmentById('xxx').style.top = parseInt((document.getElmentById('xxx').style.top)

document.getElmentById('xxx').style.top太耗性能了， get时其实只需要取得初始位置
。以后移动时只根据第一次的位置来确定下个位置 这样基本只用get一次了

17 楼 delino 2009-07-09  

支持原创，用封装太完全的东西，其实什么也学不到，公司只要效率，而我们却需要提升能力，自己做，总能在其中学到知识

16 楼 peacock 2009-07-09  

模仿得非常好，但是既然ExtJS都有了，为何不直接用ExtJS？模仿得始终是山寨

15 楼 寄生虫 2009-07-09  

whaosoft 写道

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

of course!该Hacks的地方都做了，Toolbar的按钮是通过正则判断中文字符，如果包含中文字符并且是IE的话，padding-top:4px