WebUI框架使用参考
关注jQuery easyui,zTree,my97,highcharts等前台UI的使用

作为依赖于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的工具条了。