加 Accordion
<div class="easyui-accordion centertool"> <div title="新建 联系人：" style="overflow:auto;padding:10px;"></div> <div title="新建 客户：" style="padding:10px;"></div> <div title="新建 商业机会(可选)：" style="padding:10px;"></div> </div>
通过火狐等工具可以知道标题栏上右边的箭头是 <div class="panel-tool"></div>
实现：
var tools = $(".centertool").find(".panel-tool"); $(tools[0]).before("<div class=‘accordiontool‘><a href=‘javascript:void(0);‘ id=‘aLinkSearch‘>查询</a> <a href=‘javascript:void(0);‘ class=‘linkbutton‘ id=‘aLinkSave‘>关联 联系人</a></div>"); $("#aLinkSearch").click(function () { alert("123"); return false; }); $("#aLinkSave").click(function () { alert("456"); return false; });
return false 使点击LinkButton时 Panel 收缩失效。
.accordiontool {position: absolute; height: 30px; line-height: 30px; right: 40px; top:11px;} .accordiontool .linkbutton {border: 1px solid #808080; background-color: #ececec;color: #333; padding: 8px 6px; text-decoration: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;} .accordiontool .linkbutton:hover {border-color: #3072b3;border-bottom-color: #2a65a0;background-color: #3072b3;color: #fff; }
加上点样式。
原文：http://www.cnblogs.com/chenliang-zibo/p/4362611.html