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

 

 

 

 

 

 

 

 

 

 

 

评论

114 楼 wese345 2010-05-20  

thinkforever 写道

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

是啊，Ext普遍就那个样子，jq多灵活啊，干嘛非得模仿Ext呢

113 楼 wangyj0898 2010-05-20  

正在学习jQuery，感觉到效果还不错~！

112 楼 nell_zn82 2010-05-18  

<div class="quote_title">寄生虫 写道</div>
<div class="quote_div">
<p>理解上确实有点错误，tabpanel只需要实例化一次，以后用tabpanel.show(index)就可以了。</p>
<p> </p>
</div>
<p><br>谢谢虫兄一直以来的支持，感谢，明天我试试。</p>

111 楼 寄生虫 2010-05-15  

<p>理解上确实有点错误，tabpanel只需要实例化一次，以后用tabpanel.show(index)就可以了。<br></p>
<p> </p>

110 楼 nell_zn82 2010-05-15  

近期挺忙的，不好意思，下面我将代码贴出来加以说明：
1.首先我先将TabPanel又封装了一下。在我的application.js中

     
  var tabPanel;     
  //加载页签     
  function tabs(divId,items){     
    tabPanel = new TabPanel({     
      renderTo:divId,     
      width: '100%',     
      height: '100%',   
      items: items
    });     
  }    

2.在test.jsp页面引入application.js ,test.jsp页面单独也有一个test.js，内容如下：

$(function(){
  var items = [{id:'workid',title:'工作中心',html:'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>',closable: false,lazyload: true}],[{id:'userid',title:'用户中心',html:'<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>',closable: false,lazyload: true}];

//初始化加载第一个页签：工作中心
tabs(0,items);


$("#save").click(function(){
  //通过ajax进行操作，代码我就简略了。
  ....
  ....
  //执行成功后现实第二个页签
  tabs(1,items);
});
});

大意就是这样的，初始化显示第一个页签，执行成功一个操作后，显示第二个页签，不起作用，是不是我理解的有问题？？

109 楼 寄生虫 2010-05-08  

nell_zn82 写道

近期在使用过程中又发现了新的问题：
1.第一次进入页面加载TabPanel脚本形成tab页签，默认显示0，第一个页签。这个时候做一些业务处理，调用另外一个方法，该方法还是调用TabPanel脚本，只不过想显示1，第二个页签，此时没有任何反应。
2.宽度可以自适应，高度可以自适应吗？目前我没有发现高度可以自适应。

1、我现在还没去测试，请麻烦贴一部分代码
2、高度可以自适应

108 楼 nell_zn82 2010-05-07  

近期在使用过程中又发现了新的问题：
1.第一次进入页面加载TabPanel脚本形成tab页签，默认显示0，第一个页签。这个时候做一些业务处理，调用另外一个方法，该方法还是调用TabPanel脚本，只不过想显示1，第二个页签，此时没有任何反应。
2.宽度可以自适应，高度可以自适应吗？目前我没有发现高度可以自适应。

107 楼 lepoke 2010-04-30  

LZ,请问一下，你demo中的 datagrid 是用的哪个？

106 楼 taochenpfj 2010-04-27  

有什么不明白的再请教了!

105 楼 taochenpfj 2010-04-27  

漂亮
看着挺不错的，学习一下

104 楼 kaki 2010-04-12  

相当棒了，下载学习中。

103 楼 xianglin2004 2010-04-01  

对于JQuery我是刚刚接触，因此还到不了二次开发的水平，如果楼主有时间能否给写出个例子来，将不胜感激！谢谢！

102 楼 寄生虫 2010-03-31  

xianglin2004 写道

能否加上在选项卡中加载新的页面时有"页面正在加载，请稍候..."之类的进度条提示？

倒是可以加，这些你们都可以二次开发一下，也就是在add的时候去显示一个层，内容加载完毕后再调用一个方法去隐藏层就行了。

101 楼 寄生虫 2010-03-31  

xianglin2004 写道

楼主您好，如果某个选项卡关闭后，下一个被激活的选项卡可以不是第一个吗？我想让下一个被激活的选项卡是它的上一个。

默认是打开这个选项卡被打开前那个已经打开的选项卡（好拗口）。

100 楼 nell_zn82 2010-03-31  

现在就是我的页签样式跟你发布的不一样，晚上回家再贴出来，想必是跟其他样式文件有冲突，还没来得及检查。谢谢寄生虫的长期技术支持，十分的感谢，仿EXT的tabpanel还是挺好用的。

99 楼 nell_zn82 2010-03-31  

寄生虫 写道

nell_zn82 写道

滚动条的问题：
1.scrolled在TabPanel.js中设置的是false，不知道是显示滚动条还是不显示滚动条？
2.如果高度设置：100%的话，滚动条就不显示了，不知道这个问题是存在的还是BUG？如果高度为100%的话，滚动条能显示吗？怎么设置呢？

你把这两个情况的代码段贴一下吧，scrolled是显示左右滚动条的，控制选项卡左右移动的。

问题奇妙的解决了，现在纵向滚动条出来了，很奇怪，昨天怎么改就是没有纵向滚动条，今天奇怪的有了。昨天我将scrolled在TabPanel.js中设置成true了，默认是false。今天也没改，就好了。由于我上班处不能上网，通过上网机上网，所以代码不方便贴。

98 楼 xianglin2004 2010-03-31  

楼主您好，如果某个选项卡关闭后，下一个被激活的选项卡可以不是第一个吗？我想让下一个被激活的选项卡是它的上一个。

97 楼 xianglin2004 2010-03-31  

能否加上在选项卡中加载新的页面时有"页面正在加载，请稍候..."之类的进度条提示？

96 楼 寄生虫 2010-03-31  

nell_zn82 写道

滚动条的问题：
1.scrolled在TabPanel.js中设置的是false，不知道是显示滚动条还是不显示滚动条？
2.如果高度设置：100%的话，滚动条就不显示了，不知道这个问题是存在的还是BUG？如果高度为100%的话，滚动条能显示吗？怎么设置呢？

你把这两个情况的代码段贴一下吧，scrolled是显示左右滚动条的，控制选项卡左右移动的。

95 楼 nell_zn82 2010-03-30  

还有就是，楼主我看你发的主贴中的demo图片，grid列表以及分页是用什么控件做的？挺漂亮，能将源码贴出来吗？呵呵