jQuery模仿ExtJS之Toolbar

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：(1)修正了工具栏中的按钮，改用A来做，因为工具栏如果渲染到FORM中，在谷歌和火狐会出现提交表单的情况，而且不用再担心IE中中文会偏上的BUG；(2)改进了窗口改变大小选项卡不随之判断位置移动的小问题；(3)忘记还改过哪里了。。

 

已测试浏览器：IE6,IE7,IE8,Firefox,Chrome,Netscape,Safari

 

 其他浏览器也应该没啥问题，PS:WebKit果然强大

 

 续jQuery模仿ExtJS之TabPanel

  

 山寨也是一种乐趣！

 

此次将TabPanel与Toolbar结合在一起做了一个Demo，请各位赐教~

接招 Mountain fastness !!

 

 

Toolbar(工具栏组件)

参数说明

renderTo<string | jQuery object | NULL> 渲染到某容器

将工具栏组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。

border<string | NULL> 边框显示位置

参数可为“top”,”bottom”,”none”，默认为”bottom”

items<array> 按钮元素集合

工具栏组件渲染后就会显示的按钮元素集合，具体参数请查看按钮元素。

filters<array> 快速过滤按钮元素集合

工具栏组件渲染后就会显示的快速过滤按钮元素集合，具体参数请查看快速过滤按钮元素。

active<string> 激活哪个快速过滤按钮元素

设置后会默认按下该快速过滤按钮元素。

azable<boolean> 是否有AZ快速检索组件

true有，false无，默认为false。

azparam<string | NULL> AZ快速检索组件用到的隐藏变量ID

没有AZ组件时可不设置。

公共方法

add(object) 添加按钮元素、快速过滤组件按钮元素

可根据需要进行动态向工具栏组件中添加元素。

render() 渲染工具栏组件

因工具栏组件与页面高度计算相关，所以需要手动渲染。

使用方法

页面引入jQuery.js、Toolbar.js、Toolbar.css

new Toolbar({

renderTo : 'toolbar',

  items : [{

    type:'button',

    text:'新建',

    bodyStyle : 'new',

    handler:function(){

      //do...

    }

  }]

}).render();

Toolbar item(工具栏按钮元素)

参数说明

type<string> 元素类型

可以为”button”、”textfield”、”az”。

text<string> 元素显示字符

可以不设置。

bodyStyle<string> 元素样式表

handler<function> 按钮元素事件

useable<string> 按钮元素是否可用

使用方法

工具栏组件中可以有多个button或textfield，但只允许有一个az类型元素

Toolbar filter(工具栏快速过滤组件元素)

参数说明

各个参数大致和工具栏按钮元素相同。

使用方法

filters : [{

id : 'ALL',

  title : '全部',

  bodyStyle : 'btn-all',

  handler : function(){

    filterSysMessage('ALL');

  }

},{

  id : 'T',

  title : '已读',

  bodyStyle : 'filter-read-y',

  handler : function(){

    filterSysMessage('T');

  }

},{

id : 'F',

  title : '未读',

  bodyStyle : 'filter-read-n',

  handler : function(){

    filterSysMessage('F');

  }

}],

active : '<s:property value="readFlag"/>' //需要动态加载

评论

31 楼 oycn0755 2009-11-17  

强 搞得太屌了

30 楼 Relucent 2009-10-12  

效果不错，拿来看看能不能改改直接用。O(∩_∩)O~

29 楼 javaAlpha 2009-09-28  

写的很好啊

28 楼 stworthy 2009-09-08  

没有了JQUERY风格，能$(...).toolbar({
})
就更好了。

27 楼 jayxu 2009-09-01  

这才是好东西，

26 楼 royzhou1985 2009-08-21  

最新的版本是不是这个
MyPlugins_fix_0_3.zip

25 楼 gxyxd 2009-08-05  

非常不错，谢谢

24 楼 rainchen 2009-07-31  

楼主不如放到github中，方便版本管理 方便发布更新，也方便别人fork你的来fix或enhance

23 楼 you 2009-07-29  

有个问题，新建一个tab后打开的百度页面，
随便搜索个啥东西整个页面都跳到了百度搜索页面
应该是百度的搜索页面在tab页里面打开才对（IE7下，其它没试过）

22 楼 寄生虫 2009-07-28  

wellbbs 写道

还有个问题就是，怎么判断某个选项卡已经打开，如果已经打开就不需要重复再打开，而是激活此选项卡？？

选项卡只有一个能被激活，获得class='actived'就可以啦

21 楼 wellbbs 2009-07-28  

我想的太复杂了，其实加了id之后，只能生成同id选项卡，只有一个。问题解决了

20 楼 wellbbs 2009-07-28  

还有个问题就是，怎么判断某个选项卡已经打开，如果已经打开就不需要重复再打开，而是激活此选项卡？？

19 楼 寄生虫 2009-07-28  

wellbbs 写道

现在能自动缩放了，很好，多谢分享。

感谢你的支持，呵呵，其实你的扩展代码也不错啦，毕竟不是你开发的功能，还能做出简单的缩放实现，谢谢啦。

正在努力改进中。。。

18 楼 wellbbs 2009-07-28  

现在能自动缩放了，很好，多谢分享。

17 楼 寄生虫 2009-07-28  

wellbbs 写道

还有就是请教一下，你这个带有编辑器的功能没？

比如添加很多条商品，然后每条记录可以实现在线编辑内容

如果有怎么调用？

目前还没有这个功能，因为我渐渐转向Flex了，所以.......

16 楼 wellbbs 2009-07-28  

还有就是请教一下，你这个带有编辑器的功能没？

比如添加很多条商品，然后每条记录可以实现在线编辑内容

如果有怎么调用？

15 楼 寄生虫 2009-07-28  

wellbbs 写道

我用了，不过我用的在主框架里，手动缩放左边菜单栏和头部缩放。
这个无法自动根据我的外面框架自动缩放。
没有办法自己就修改了一下TabPanel.js里内容，在文件最后加了一个
getRefreshW
然后在点缩放的button按钮js脚本了执行了这个方法。现在可以随我的外面的框架点缩放，自动调整大小了。

这样只能简单的实现自动调整大小，因为还涉及到左右滚动条、选项卡的容器大小等，我正在改进。

14 楼 wellbbs 2009-07-28  

我用了，不过我用的在主框架里，手动缩放左边菜单栏和头部缩放。
这个无法自动根据我的外面框架自动缩放。
没有办法自己就修改了一下TabPanel.js里内容，在文件最后加了一个
getRefreshW : function(){
 
  var clientWidth = document.body.clientWidth - 2;
  var clientHeight = document.body.clientHeight - 32;
    //alert(clientWidth);
    if(this.render.is('body'))
    {
      this.tabpanel.css('width', clientWidth +'px');
    }
    else
    {
      this.render.css('width', clientWidth +'px');
    }
      if(this.border=='none')
    {
      this.tabpanel_tab_content.css('border-top', 'none');
      this.tabpanel_tab_content.css('border-left', 'none');
      this.tabpanel_tab_content.css('border-right', 'none');
      this.tabpanel_content.css('border-left', 'none');
      this.tabpanel_content.css('border-right', 'none');
      this.tabpanel_content.css('border-bottom', 'none');
      //计算选项卡承载层和内容层宽度(重点是要去除边框的宽度)
      this.tabpanel_tab_content.css('width', clientWidth +'px');
      this.tabpanel_content.css('width', clientWidth +'px');
      //this.tabpanel_tab_content.css('height', clientHeight +'px');
      this.tabpanel_content.css('height', clientHeight +'px');
    }
    else
    {
      //计算选项卡承载层和内容层宽度(重点是要去除边框的宽度)
      this.tabpanel_tab_content.css('width', clientWidth +'px');
      this.tabpanel_content.css('width', clientWidth +'px');
      //this.tabpanel_tab_content.css('height', clientHeight +'px');
      this.tabpanel_content.css('height', clientHeight +'px');
    }
     this.update();
  }


然后在点缩放的button按钮js脚本了执行了这个方法。现在可以随我的外面的框架点缩放，自动调整大小了。

13 楼 kimmking 2009-07-28  

寄生虫 写道

nishijia 写道

发现个 bug

在 Firefox 下  点击那个新建  弹出来了百度框  不过 原先的工具栏组件的tab和百度的tab的内容同时显示出来了

是的，确实在FF下有点问题，原因找到了，是因为百度的body没有设置background-color，我把内容层增加了background-color:#FFF就可以了，Fix呈上。

ie6才有背景图片不缓存的bug

ie7 8 都没有

12 楼 寄生虫 2009-07-28  

nishijia 写道

发现个 bug

在 Firefox 下  点击那个新建  弹出来了百度框  不过 原先的工具栏组件的tab和百度的tab的内容同时显示出来了

是的，确实在FF下有点问题，原因找到了，是因为百度的body没有设置background-color，我把内容层增加了background-color:#FFF就可以了，Fix呈上。