作为依赖于panel的accordion组件,却没有办法在标题上增加工具条,有点小遗憾。通过according提供的几个事件接口,我们也很难不改源码就能实现tools的功能,所以本文暂时使用修改源码的方法来实现这个功能。
以下代码基于jQuery easyui 1.2.6修改。首先在源码里查找"function _22e"关键字(1.2.4和1.2.5版本基本一致,只不过函数名不是_22e,需要自己分析一下)将_22e函数改为:
实现代码:
function _22e(_22f,pp,_230){ pp.panel($.extend({},_230,{ collapsible:false, minimizable:false, maximizable:false, closable:false, doSize:false, tools:[{iconCls:"accordion-collapse", handler:function(){ var _231=$.data(_22f,"accordion").options.animate; if(pp.panel("options").collapsed){ _239(_22f); pp.panel("expand",_231); }else{ _239(_22f); pp.panel("collapse",_231); } return false; }}], onBeforeExpand:function(){ var curr=_21f(_22f); if(curr){ var _232=$(curr).panel("header"); _232.removeClass("accordion-header-selected"); _232.find(".accordion-collapse").triggerHandler("click"); } var _232=pp.panel("header"); _232.addClass("accordion-header-selected"); _232.find(".accordion-collapse").removeClass("accordion-expand"); }, onExpand:function(){ var opts=$.data(_22f,"accordion").options; opts.onSelect.call(_22f,pp.panel("options").title); }, onBeforeCollapse:function(){ var _233=pp.panel("header"); _233.removeClass("accordion-header-selected"); _233.find(".accordion-collapse").addClass("accordion-expand"); } })); //查找每个accordion内部div的tool元素,panel在初始化为的时候必定会有一个accordion-collapse工具按钮。 var tool = pp.panel('header').find(">div.panel-tool"); //_230即为options,add方法增加according选项时会传入options if (_230.tools) { for (var i = opts.tools.length - 1; i >= 0; i--) { var t = $('<div></div>').addClass(_230.tools[i].iconCls).prependTo(tool); if (_230.tools[i].handler) { //绑定相应事件 t.bind('click', eval(_230.tools[i].handler)); //阻止事件冒泡 t.bind('click', function(event){event.stopPropagation();}); } } } //according组件初始化时自动加载目标div作为tools var attrTools = pp.attr("tools")==undefined?"":pp.attr("tools"); if(attrTools != ""){ $(attrTools).children().each(function(){ var ispub = $(attrTools).attr('ispub')=="true"?true:false; if(ispub){ //公用工具条,克隆拷贝,拷贝的时候同时拷贝事件 var ele = $(this).addClass($(this).attr("iconCls")).addClass("panel-tool-a").clone(true).prependTo(tool); //阻止事件冒泡 ele.bind('click',function(event){event.stopPropagation();}); }else{ //非公用工具条,破坏性拷贝 var ele = $(this).addClass($(this).attr("iconCls")).addClass("panel-tool-a").prependTo(tool); //阻止事件冒泡 ele.bind('click',function(event){event.stopPropagation();}); } }); } pp.panel("body").addClass("accordion-body"); pp.panel("header").addClass("accordion-header").click(function(){ $(this).find(".accordion-collapse").triggerHandler("click"); return false; }); };
使用方法:
控件初始化时生成:
<div class="easyui-accordion" id="accordionId" fit="true" border="false"> <div title="接口文档" iconCls="icon-doc-word" selected="true" tools="#accordion-tools" >内容</div> <div title="使用技巧" iconCls="icon-doc-skill" tools="#accordion-tools">内容</div> <div title="效果演示" iconCls="icon-doc-demo" tools="#accordion-tools">内容</div> </div> <!-- accordion工具条 ispub属性设置为true用于标记改工具条可以被多个accordion使用 --> <div id="accordion-tools" ispub="true"> <a href="#" iconCls="icon-doc-menu" onclick="changeScreen()"></a> </div>
add方法也可以增加工具条按钮:
$("accordionId").accordion("add",{tools:[{iconCls:'icon-save',handler:function(){alert('save')}}});
注意事项:
- 目标工具条的DOM为公用工具条的时候,不要设置其ID,拷贝的时候会出现重复ID。
- 这里的工具条不依赖linkbutton,目标工具条的a标签不用加easyui-linkbutton样式。
更新日志:
不得不说,Easyui在快速发展,自从1.2.6,accordion组件开始支持继承自panel的工具条了。