论坛首页 Web前端技术论坛

jQuery模仿ExtJS之Toolbar

浏览 29233 次
精华帖 (5) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (2)
作者 正文
   发表时间:2009-07-21   最后修改:2009-12-29
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.jsToolbar.jsToolbar.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> 按钮元素是否可用

使用方法

工具栏组件中可以有多个buttontextfield,但只允许有一个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"/>' //需要动态加载

  • 大小: 18.4 KB
   发表时间:2009-07-21   最后修改:2009-07-21
工具条,做的太棒了,佩服佩服!谢谢共享

TabPanel好像不能resize,如果容器resize了,TabPanel也能随之resize就好了。
0 请登录后投票
   发表时间:2009-07-21  
如果工具条能支持ajax,接受json对象数组来生成按钮和其他input就更完美了。
另外,哪儿能找到更多的类似的jquery插件? thanks!
0 请登录后投票
   发表时间:2009-07-22  
可以动态add按钮的呀,input也可以添加,其他的select之类的,就要把html写上了
0 请登录后投票
   发表时间:2009-07-22  
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊
0 请登录后投票
   发表时间:2009-07-22  
zzdfc 写道
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊

目前还没做到哦,原先想做的,就是给最外层加onresize事件,但是onresize事件只支持size是百分比的元素,考虑比较麻烦,就没做。
0 请登录后投票
   发表时间:2009-07-26  
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊


我也想要这个功能啊,楼主能不能修改一下??


0 请登录后投票
   发表时间:2009-07-27  
wellbbs 写道
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊


我也想要这个功能啊,楼主能不能修改一下??



我试试吧,感谢支持
0 请登录后投票
   发表时间:2009-07-27  
jq板块最近很火啊,可惜了我不用这个

啥时候有空把我的东东完善下,写个mootools之xxx
没完整的发行包,自己用用的 http://code.google.com/p/mxui/
0 请登录后投票
   发表时间:2009-07-27  
发现个 bug

在 Firefox 下  点击那个新建  弹出来了百度框  不过 原先的工具栏组件的tab和百度的tab的内容同时显示出来了
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics