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

 

 

 

 

 

 

 

 

 

 

 

评论

94 楼 nell_zn82 2010-03-30  

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

93 楼 nell_zn82 2010-03-30  

寄生虫 写道

嗯，你应该用的是旧版本，可以再下载一下最新的试试。

谢谢你寄生虫，这个问题困扰我很久了，换了个新版本终于解决了。建议您将您发布的版本增加个版本号或者版本日期。呵呵，谢谢。

92 楼 xianglin2004 2010-03-30  

楼主您好，我用了你给的js。但是发现了个问题不知道怎么解决？请帮忙。
问题是我在iframe中加载了一个页面，但是这个页面高度估计在2000px.这时候iframe就出现了垂直滚动条，但是不想要这个滚动条，想让这个滚动条出现在浏览器的最外面。我就想iframe的scrolling设置为no。这是iframe中加载的页面只能显示一部分。这怎么解决啊？期待您的回答。谢谢。

楼主帮忙解决下吧。我挺着急。

我的浏览器是ie8

91 楼 寄生虫 2010-03-30  

嗯，你应该用的是旧版本，可以再下载一下最新的试试。

90 楼 nell_zn82 2010-03-29  

更正上面的语法：

items: [{   
    id:'workid',   
    title:'工作中心',   
    html:content,   
    closable: false  
  },{   
   id:'userid',   
    title:'用户中心',   
    html:content1,   
    closable: false  
  }]   

实在不好意思，打错了，

89 楼 nell_zn82 2010-03-29  

寄生虫 写道

nell_zn82 写道

$(function(){
  var tabPanel;
//初始化默认加载第一个页签
  tabs('tab',0,'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>','');
function tabs(divId,activenum,content,content1){
  tabPanel = new TabPanel({
  renderTo:divId,
  width: '100%',
  height: '100%',
  active: activenum,
  items: [{
    id:'workid',
    title:'工作中心',
    html:content,
    closable: false
  }],[{
   id:'userid',
    title:'用户中心',
    html:content1,
    closable: false
  }]
 });
}
});

//给用户中心页签添加click事件
$(#userid).click(function(){
  tabs('tab',1,'','<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>');
});

我的需求就是不加载所有的页签页面，根据点击某一个页签而加载相关的页签内容。
问题：初始化默认加载第一个页签可以成功加载，点击用户中心页签，该页签内容不显示了。

给需要延迟加载的item增加 lazyload : true 属性。

{
          title:'数据范围',
          html:'<iframe id="users" name="users" src="xxx" width="100%" height="100%" frameborder="0"></iframe>',
          closable : false,
          lazyload : true,
          icon:'../../image/icon/datas.gif'
        }

改你的代码就是：

$(function(){  
  var tabPanel;  
//初始化默认加载第一个页签  
  tabs('tab',0,'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>','<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>');  
function tabs(divId,activenum,content,content1){  
  tabPanel = new TabPanel({  
  renderTo:divId,  
  width: '100%',  
  height: '100%',  
  active: activenum,  
  items: [{  
    id:'workid',  
    title:'工作中心',  
    html:content,  
    closable: false  
  }],[{  
   id:'userid',  
    title:'用户中心',  
    html:content1,  
    closable: false,
    lazyload: true
  }]  
 });  
}  
}); 

感谢这么及时给我回复，谢谢你，你提供的方法我试验了，没有起作用。
我在每个页签调用的页面alert输出，结果加载页面时，所有页面alert都输出了。说明还是没有延迟加载。
另外我在TabPanel.js文件里没有找到lazyload: true定义的方法。是不是我用的是旧版本？？？

88 楼 xianglin2004 2010-03-29  

楼主您好，我用了你给的js。但是发现了个问题不知道怎么解决？请帮忙。
问题是我在iframe中加载了一个页面，但是这个页面高度估计在2000px.这时候iframe就出现了垂直滚动条，但是不想要这个滚动条，想让这个滚动条出现在浏览器的最外面。我就想iframe的scrolling设置为no。这是iframe中加载的页面只能显示一部分。这怎么解决啊？期待您的回答。谢谢。

楼主帮忙解决下吧。我挺着急。

87 楼 寄生虫 2010-03-29  

nell_zn82 写道

$(function(){
  var tabPanel;
//初始化默认加载第一个页签
  tabs('tab',0,'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>','');
function tabs(divId,activenum,content,content1){
  tabPanel = new TabPanel({
  renderTo:divId,
  width: '100%',
  height: '100%',
  active: activenum,
  items: [{
    id:'workid',
    title:'工作中心',
    html:content,
    closable: false
  }],[{
   id:'userid',
    title:'用户中心',
    html:content1,
    closable: false
  }]
 });
}
});

//给用户中心页签添加click事件
$(#userid).click(function(){
  tabs('tab',1,'','<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>');
});

我的需求就是不加载所有的页签页面，根据点击某一个页签而加载相关的页签内容。
问题：初始化默认加载第一个页签可以成功加载，点击用户中心页签，该页签内容不显示了。

给需要延迟加载的item增加 lazyload : true 属性。

{
          title:'数据范围',
          html:'<iframe id="users" name="users" src="xxx" width="100%" height="100%" frameborder="0"></iframe>',
          closable : false,
          lazyload : true,
          icon:'../../image/icon/datas.gif'
        }

改你的代码就是：

$(function(){  
  var tabPanel;  
//初始化默认加载第一个页签  
  tabs('tab',0,'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>','<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>');  
function tabs(divId,activenum,content,content1){  
  tabPanel = new TabPanel({  
  renderTo:divId,  
  width: '100%',  
  height: '100%',  
  active: activenum,  
  items: [{  
    id:'workid',  
    title:'工作中心',  
    html:content,  
    closable: false  
  }],[{  
   id:'userid',  
    title:'用户中心',  
    html:content1,  
    closable: false,
    lazyload: true
  }]  
 });  
}  
}); 

86 楼 nell_zn82 2010-03-29  

$(function(){
  var tabPanel;
//初始化默认加载第一个页签
  tabs('tab',0,'<iframe src="工作中心.html" width="100%" height="100%" frameborder="0"></iframe>','');
function tabs(divId,activenum,content,content1){
  tabPanel = new TabPanel({
  renderTo:divId,
  width: '100%',
  height: '100%',
  active: activenum,
  items: [{
    id:'workid',
    title:'工作中心',
    html:content,
    closable: false
  }],[{
   id:'userid',
    title:'用户中心',
    html:content1,
    closable: false
  }]
 });
}
});

//给用户中心页签添加click事件
$(#userid).click(function(){
  tabs('tab',1,'','<iframe src="用户中心.html" width="100%" height="100%" frameborder="0"></iframe>');
});

我的需求就是不加载所有的页签页面，根据点击某一个页签而加载相关的页签内容。
问题：初始化默认加载第一个页签可以成功加载，点击用户中心页签，该页签内容不显示了。

85 楼 vasuer 2010-03-26  

楼主，请问下打开一个选项卡的时候 怎样吧打开的页面设为焦点啊？ 或者点击选项卡上的标题的时候也是那页面的焦点啊？

84 楼 marc0658 2010-03-15  

唉呀.lz太强大了

83 楼 寄生虫 2010-03-12  

LookAtPic 写道

怎么有点觉得这个东西是用了 EXTJS本身的类库，如 Tab用法也和EXTJS一样。LZ是不是用JQUERY调用EXTJS中的类库。

你看一下代码不就知道了吗。呵呵

82 楼 LookAtPic 2010-03-12  

怎么有点觉得这个东西是用了 EXTJS本身的类库，如 Tab用法也和EXTJS一样。LZ是不是用JQUERY调用EXTJS中的类库。

81 楼 shijian0306 2010-03-11  

寄生虫 写道

coolflag 写道

请问，怎么改动TabPanel的宽度。因为我左边放了功能树，功能树能够伸缩，当缩起来的时候，tabpanel并不能够随我控制改变宽度。我尝试了        $("#mainPanel").width($("#mainPanel").width()+175);
$("#mainPanel").resize();
这个TabPanel消失了。

嗯，这个功能我今天下午加上，稍候更新。

哥们，这个还是没有好啊，能否给一个自适应宽度的demo，我调整半天没有搞出来出来

80 楼 matychen 2010-03-10  

楼主用的弹出框的插件名字叫什么？还是就用的jQuery的dialog？

79 楼 vasuer 2010-03-10  

楼主 怎么让TabPanel自适窗口大小啊？

78 楼 lijingbo9512 2010-03-03  

我看到了图片中的表格，是怎么做的？能否共享一下？还有一个问题就是WindowPanel如何访问父窗口上的控件，以便在做一些动作时候给父窗口返回一些值？谢谢！

77 楼 coolflag 2010-02-10  

收到更新，非常感谢，:)

76 楼 Songjun37 2010-02-08  

楼主的我先收下 看看了好啊。感觉挺不错的也

75 楼 寄生虫 2010-02-06  

coolflag 写道

请问，怎么改动TabPanel的宽度。因为我左边放了功能树，功能树能够伸缩，当缩起来的时候，tabpanel并不能够随我控制改变宽度。我尝试了        $("#mainPanel").width($("#mainPanel").width()+175);
$("#mainPanel").resize();
这个TabPanel消失了。

嗯，这个功能我今天下午加上，稍候更新。