锁定老帖子 主题:jQuery模仿ExtJS之Toolbar
精华帖 (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果然强大
山寨也是一种乐趣!
此次将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"/>' //需要动态加载 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-07-21
最后修改:2009-07-21
工具条,做的太棒了,佩服佩服!谢谢共享
TabPanel好像不能resize,如果容器resize了,TabPanel也能随之resize就好了。 |
|
返回顶楼 | |
发表时间:2009-07-21
如果工具条能支持ajax,接受json对象数组来生成按钮和其他input就更完美了。
另外,哪儿能找到更多的类似的jquery插件? thanks! |
|
返回顶楼 | |
发表时间:2009-07-22
可以动态add按钮的呀,input也可以添加,其他的select之类的,就要把html写上了
|
|
返回顶楼 | |
发表时间:2009-07-22
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊
|
|
返回顶楼 | |
发表时间:2009-07-22
zzdfc 写道 TabPanel能自适应宽高吗,呵呵,这个功能很有用啊
目前还没做到哦,原先想做的,就是给最外层加onresize事件,但是onresize事件只支持size是百分比的元素,考虑比较麻烦,就没做。 |
|
返回顶楼 | |
发表时间:2009-07-26
TabPanel能自适应宽高吗,呵呵,这个功能很有用啊
我也想要这个功能啊,楼主能不能修改一下?? |
|
返回顶楼 | |
发表时间:2009-07-27
wellbbs 写道 TabPanel能自适应宽高吗,呵呵,这个功能很有用啊
我也想要这个功能啊,楼主能不能修改一下?? 我试试吧,感谢支持 |
|
返回顶楼 | |
发表时间:2009-07-27
jq板块最近很火啊,可惜了我不用这个
啥时候有空把我的东东完善下,写个mootools之xxx 没完整的发行包,自己用用的 http://code.google.com/p/mxui/ |
|
返回顶楼 | |
发表时间:2009-07-27
发现个 bug
在 Firefox 下 点击那个新建 弹出来了百度框 不过 原先的工具栏组件的tab和百度的tab的内容同时显示出来了 |
|
返回顶楼 | |