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"/>' //需要动态加载

评论

51 楼 daodaone 2015-07-06  

这个里面 可以添加下拉菜单么？

50 楼 xgyq0123 2014-04-22  

强大啊  

49 楼 wxsmm 2013-09-24  

正在学习jquery，支持一下lz

48 楼 ruantongsheng 2013-03-28  

寄生虫 写道

tkl211 写道

选项卡的宽度还是有些问题,IE6中,都能显示出来,不过最后一个字,被那个 叉号给覆盖住了,我在chrome/火狐下测试了下,我选项卡是 "无线添加无线添加无线添加无线添加"这么长，但是只显示了一半的字，嘿嘿，希望改进一下

你看到的效果是这样的吗？



如果是这样的，我是做了一些处理的，溢出的部分被...和title取代了，不过有时候会出现某个文字被隐藏掉一半的情况。

不能改变一下适应字符的长度吗? 比如:  tabItem.width= str.length*20

47 楼 skmain 2012-09-22  

[/u][u][u][/u][/url][url][url][/url]

46 楼 newsletterBroker 2011-09-07  

在TAB项加载iframe的时候，不能自适应高度，求如何解决！

45 楼 千清静听 2011-08-02  

height 设置上有点问题， 除了初始化TabPanel时设置的height，其他的 什么 iframe里设置的100%  原来div的height样式  都没有一点用处。
问题 在于 初始化这个的高度， 定死了div的高度，还定死了iframe里的高度， 而且获取的100% 高度也不是当前的页面高度，我这里alert你这个100%是755,alert($(window).height())是645。这个高的设置很不灵活。
我的项目用的div分框架，上 左 右 的分，在每个里面套iframe， 右边的套你这个，高度调节上，右边这个div始终会出现竖向滚动条，是div与iframe之间的滚动条，而且这个滚动条是去不掉的，alert这个div的高度是534，alert这个iframe的高度是510，不知道和这个滚动条的出现是怎么回事，如果iframe里的页面过长，那么这个页面就会出现两个滚动条。。

44 楼 wgy_superpower 2010-07-02  

楼主辛苦了，表扬一下先。
我试着点了一下，有个问题楼主，当我点击无限添加Tab，添加8个TAB之后，JS报错，无法继续添加，关闭掉打开的8个TAB依然无法添加TAB了

43 楼 JustDoNow 2010-06-24  

为什么有人投隐藏帖？？

42 楼 vvvsrx 2010-04-21  

如果有个完整的帮助文档就完美了- -#

41 楼 寄生虫 2010-04-01  

<div class="quote_title">yinsha1988822 写道</div>
<div class="quote_div">
<p>我发现个bug.不知道改进没。就是设置tab的宽度 假如add添加多个 tab的头只显示3个。但是我add是多个。如果点击按钮add就没问题 或者把宽度设宽点就好了</p>
<p> </p>
</div>
<p>你可以在这<a href="http://www.iteye.com/topic/421360">http://www.iteye.com/topic/421360</a>下载最新的版本试试。</p>

40 楼 yinsha1988822 2010-03-31  

<p>我发现个bug.不知道改进没。就是设置tab的宽度 假如add添加多个 tab的头只显示3个。但是我add是多个。如果点击按钮add就没问题 或者把宽度设宽点就好了</p>
<p> </p>

39 楼 tkl211 2010-02-10  

[quote=&quot;寄生虫&quot;]
[quote=&quot;tkl211&quot;]选项卡的宽度还是有些问题,IE6中,都能显示出来,不过最后一个字,被那个 叉号给覆盖住了,我在chrome/火狐下测试了下,我选项卡是 &quot;无线添加无线添加无线添加无线添加&quot;这么长，但是只显示了一半的字，嘿嘿，希望改进一下


你看到的效果是这样的吗？

[img]http://dl.iteye.com/upload/attachment/202213/2be6c8f6-5dcc-35d0-949c-c495a96d1213.png&quot; alt=&quot;[/img]

如果是这样的，我是做了一些处理的，溢出的部分被...和title取代了，不过有时候会出现某个文字被隐藏掉一半的情况。



这是我下载的MyPlugins_fix_0_4.zip 这里面预览的

38 楼 寄生虫 2010-02-03  

tkl211 写道

选项卡的宽度还是有些问题,IE6中,都能显示出来,不过最后一个字,被那个 叉号给覆盖住了,我在chrome/火狐下测试了下,我选项卡是 "无线添加无线添加无线添加无线添加"这么长，但是只显示了一半的字，嘿嘿，希望改进一下

你看到的效果是这样的吗？



如果是这样的，我是做了一些处理的，溢出的部分被...和title取代了，不过有时候会出现某个文字被隐藏掉一半的情况。

37 楼 tkl211 2010-02-03  

tkl211 写道

选项卡的宽度还是有些问题,IE6中,都能显示出来,不过最后一个字,被那个 叉号给覆盖住了,我在chrome/火狐下测试了下,我选项卡是 "无线添加无线添加无线添加无线添加"这么长，但是只显示了一半的字，嘿嘿，希望改进一下

错了，我看错了，在火狐或者chrome下，那个叉号在这些字的中间，后面那一半的字，都跑出去了

36 楼 tkl211 2010-02-03  

选项卡的宽度还是有些问题,IE6中,都能显示出来,不过最后一个字,被那个 叉号给覆盖住了,我在chrome/火狐下测试了下,我选项卡是 "无线添加无线添加无线添加无线添加"这么长，但是只显示了一半的字，嘿嘿，希望改进一下

35 楼 寄生虫 2009-12-16  

小的修改，附件中下载，fix_0_4

34 楼 寄生虫 2009-12-15  

最近在改进，主要是先改进浏览器样式不太相同的BUG，在chrome中稍微有些宽度变形

33 楼 ale0512 2009-12-14  

太棒了，楼主能否丰富一下toolbar中按钮的样式，比如选择框和下拉菜单。

32 楼 wanglong0537 2009-12-07  

项目中用EXT用的都恶心了，
界面不咋好看 缓存大 加载慢
想念jquery啊。