<div>        <div style="padding-left:100px; padding-bottom:12px; float:left">            <div id="accordionContainer" style="width:300px;height:600px">                <div title="静态html" closable="true">                    <p>项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1</p>                    <div id="text">                        <h3>无题</h3>                        <p>月落湖面两清影，</p>                        <p>岸柳丝丝弄轻盈。</p>                        <p>此番凉意写不出，</p>                        <p>难画秋月一片晴。</p>                    </div>                </div>                <div title="iframe加载" isiframe="true" url="/innerpage.html" iconcls="icon-edit" closable="false">                    111                </div>                <div title="远程HTML加载" datatype="html" url="/content.html" iconcls="icon-save" closable="true">                    32333                </div>            </div>        </div>       </div>    <script type="text/javascript">               var accordion;        $(function () {            accordion = $("#accordionContainer").accordion({                items: [{                    title: ‘远程加载JSON数据‘,                    closable: false,                    iconcls: ‘icon-print‘,                    actived: true,// 激活状态                                       url: ‘testServer/jsonQuestTest.ashx?flag=tree‘,//如果不配置采用公用 $.fn.tabs.defaults里的配置                    dataType: ‘json‘// //如果不配置采用公用 $.fn.tabs.defaults里的配置                 },{                    title: ‘文本测试‘,                    closable: false,                    iconcls: ‘icon-back‘,                    actived: false,// 激活状态                                       content: ‘<a>我是测试内容.....................</a>‘// 可以是文本,可以是$("#id")对象                                    }],                onl oadSuccess: function (title, context) {                    console.log(title + "加载完成");                                        if (title == "远程加载JSON数据") {                        $("<ul id=‘tree‘></ul>").appendTo(context.target).tree({                            onClick: function (data) {                                console.log(JSON.stringify(data));                                alert("click");                            },                            animate: true,                            isPlain: false,                            checkbox: true,                            textField: ‘text1‘,                            idField: ‘id1‘,                            data: context.data,                            lazy: true,                            url: ‘testServer/jsonQuestTest.ashx?flag=tree‘,                            onl oadSuccess: function (data) {                                console.log("服务器数据返回：" + JSON.stringify(data));                            }                        });                    }                },                activedHandler: function (tilte,context) {                    console.log("actived=" + tilte);                },                closedHandler: function (title) {                    console.log("closed=" + title);                }            });        });        function addaccordion() {            accordion.accordion("addAccordion", {                title: ‘动态添加tab‘,                closable: true,                iconcls: ‘icon-back‘,                actived: false,// 激活状态                 url: ‘testServer/jsonQuestTest.ashx‘,//如果不配置采用公用 $.fn.tabs.defaults里的配置                dataType: ‘json‘,// //如果不配置采用公用 $.fn.tabs.defaults里的配置                 onl oadSuccess: function (title, context) {                    context.target.html(title+"loadsucc；我自己注册的事件 "+JSON.stringify(context.data));                }            });        }        function getAccordion() {            var res = accordion.accordion("getActived");           alert(res.titleObj.attr("title"));        }    </script>

  1 /**************************************************************  2 *作者:hjwen  3 *电邮:hjwen88@126.com  4 *版本：1.0  5 *版权许可：中国通用开源许可协议V1.0  6 *说明：myui组件accordion组件  7 ***************************************************************/  8 (function ($) {  9     /****** 10     *渲染目标：renderHtml为构建html结构的函数，init初始化会调用 11     *******/ 12     var itemTitleContainer, itemContentContainer, itemCount; 13     var contentHeight = 0; 14     function renderHtml(target) { 15         createAccordions(target); 16     }; 17     /**********私有方法开始********************/ 18     function createAccordions(target) { 19         var opts = target.data("settings"); 20         var items = opts.items; 21         $.each(items, function (i, item) { 22             if (item.exist == null) { 23                 item.exist = $("<div></div>").appendTo(target); 24             }  25             createAccordion(item, i); 26         }); 27         itemContentContainer.animate({ height: contentHeight + "px" },300); 28         itemTitleContainer.css("border-bottom", "1px solid #99BBE8"); 29     } 30     function createAccordion(item, index) { 31         var onePanel = item.exist;        32         if (onePanel != null) { 33             var panelOpt = { 34                 title: item.title, 35                 iconCls: item.iconcls, 36                 collapseable: false, //可收缩 37                 closeable: item.closable, 38                 expandable: false,//可展开 39                 maximizable: false//可最大化                   40             }; 41             if (typeof item.url != ‘undefined‘ && item.url != ‘‘ && item.url != null) { 42                 panelOpt.remoteRequest = {                            43                     dataType: item.dataType, 44                     url: item.url, 45                     load: function () { }, 46                     loaded: function (result) { 47                         if (typeof item.onLoadSuccess == ‘function‘) 48                             item.onLoadSuccess(item.title, { data: result, target: item.exist }); 49                     } 50                 }; 51             } 52             if (item.closable) { 53                 panelOpt.onClosed=function (txt) { 54                     contentHeight = contentHeight + 30; 55                     itemCount--; 56                     itemContentContainer.height(contentHeight + "px"); 57                     if (typeof item.closedHandler == ‘function‘) { 58                         item.closedHandler(txt); 59                     } 60                 } 61             } 62             var panel = onePanel.panel(panelOpt); 63             var tmpObj = panel.panel("getPanelObjs"); 64             tmpObj.contentObj.css({ "height": "0" }).parent("div").css("height", "auto"); 65             if (item.content != null) { 66                 if (typeof item.content == ‘object‘) { 67                     item.content.appendTo(tmpObj.contentObj); 68                 } else { 69                     tmpObj.contentObj.html(item.content); 70                 } 71             } 72             if (index < itemCount - 1) { 73                 tmpObj.contentObj.css("border-bottom", "none"); 74             } 75             tmpObj.titleObj.css({ "background": "#E0ECFF", "border-bottom": "none" }).attr("title",item.title).attr("for",index).bind({ 76                 click: function () { 77                     itemContentContainer.animate({ height: 0 }, 300); 78                     itemTitleContainer.css("border-bottom", "none"); 79                     itemTitleContainer = $(this).css("border-bottom", "1px solid #99BBE8"); 80                     itemContentContainer = $(this).next().animate({ height: contentHeight + "px" }, 300); 81                     if (typeof item.activedHandler == ‘function‘) { 82                         item.activedHandler(itemTitleContainer.children(".panel-tilte").children("h2").text(), itemContentContainer); 83                     } 84                 }, 85                 mouseenter: function () { 86                     $(this).css({ 87                         ‘cursor‘: ‘pointer‘, 88                         ‘background‘: ‘#E8F0FC‘ 89                     }); 90                 }, 91                 mouseleave: function () { 92                     $(this).css({ 93                         "background": "#E0ECFF" 94                     }); 95                 } 96             }); 97             if (index == 0) { 98                 itemTitleContainer = tmpObj.titleObj; 99                 itemContentContainer = tmpObj.contentObj;100             }101             if (item.actived) {102                 itemTitleContainer = tmpObj.titleObj;103                 itemContentContainer = tmpObj.contentObj;104             }            105         }106     };107     /**********私有方法结束*******************/108     /*****************************************************************************109     *对外的函数统一封装到methods中110     *调用方式：$.pluginInstance.pluginName("methodName",params) 111     ******************************************************************************/112     var methods = {113         init: function (options) {114             var $this = $(this);115             var settings116             if (typeof options == ‘undefined‘)117                 settings = $.fn.accordion.defaults;118             else119                 settings = $.extend({}, $.fn.accordion.defaults, options);120             var newItemArr = [];121             var existItems = $this.children("div");//已经存在的item项122             if (existItems.length > 0) {123                 $.each(existItems, function (i, it) {124                     var $it = $(it);125                     var opt = {126                         title: $it.attr("title"),127                         content: $it.attr("content") == undefined ? null : $("#" + $it.attr("content")),128                         closable: $it.attr("closable") == "true" ? true : false,129                         iconcls: $it.attr("iconcls") == undefined ? "" : $it.attr("iconcls"),130                         actived: $it.attr("actived") == "true" ? true : false,// 激活状态131                         isiframe: $it.attr("isiframe") == "true" ? true : false,//如果不配置采用公用 $.fn.accordion.defaults里的配置132                         url: $it.attr("url") == undefined ? "" : $it.attr("url"),//如果不配置采用公用 $.fn.accordion.defaults里的配置133                         dataType: $it.attr("dataType") == undefined ? "json" : $it.attr("dataType"),  //如果不配置采用公用 $.fn.accordion.defaults里的配置134                         exist: $it, //135                         onl oadSuccess: settings.onLoadSuccess,//fn(title,resdata)136                         activedHandler: settings.activedHandler,//fn(title,context)137                         closedHandler: settings.closedHandler //fn(title) tab被关闭时触发138                     };139                     if (opt.isiframe)140                         opt.dataType = ‘iframe‘;141                     newItemArr.push(opt);142                 });143             }144             //合并每一个accordion项的默认设置145             $.each(settings.items, function (i, item) {146                 var newIt = $.extend({}, $.fn.accordion.itemdefaults, item);147                 newIt.exist = null;148                 if (typeof newIt.onLoadSuccess != ‘function‘)149                     newIt.onLoadSuccess = settings.onLoadSuccess;//fn(title,resdata)150                 if (typeof newIt.activedHandler != ‘function‘)151                     newIt.activedHandler = settings.activedHandler;//fn(title,context)152                 if (typeof newIt.closedHandler != ‘function‘)153                     newIt.closedHandler = settings.closedHandler; //fn(title) tab被关闭时触发154                 newItemArr.push(newIt);155             });156             settings.items = newItemArr;157             itemCount = settings.items.length;158             //设置每一项的高度159             contentHeight = $this.height() - 30 * newItemArr.length;          160             //创建ui布局161             $this.data(‘settings‘, settings);162             renderHtml($this);163             if ($.myui.isDebug) {164                 $.myui.log("jQuery.accordion init finish......");165             }166             return $this;167         },168         destroy: function (options) {169             var $this = $(this);170             $this.removeData(‘settings‘);171             return $this.remove();172         },173         /***174         *opt={175             title: ‘Accordion标题‘,176             closable: false,177             iconcls: ‘‘,178             actived: false,// 激活状态179             isiframe: false,//如果不配置采用公用 $.fn.accordion.defaults里的配置180             url: ‘‘,//如果不配置采用公用 $.fn.accordion.defaults里的配置181             content: ‘‘,//内容默认为空，如果该属性有值，则优先默认采用这个，即使设置url也不会去远程加载数据，content可以是html对象，也可以是文本182             dataType: ‘json‘// //如果不配置采用公用 $.fn.accordion.defaults里的配置183         }184         ***/185         addAccordion: function (opts) {186             var newOpt = $.extend({}, $.fn.accordion.itemdefaults, opts);187             newOpt.actived = true;188             var $this = $(this);189             //修改最后一个的border-bottom", "none"190             $this.children().last().children(".panel-body").css("border-bottom", "none");191             newOpt.exist = $("<div></div>").appendTo($this);            192             contentHeight = contentHeight - 30;           193             if (itemContentContainer!=null)194                 itemContentContainer.animate({ height: 0 }, 300).css("border-bottom", "none");195             if (itemTitleContainer!=null)196                 itemTitleContainer.css("border-bottom", "none");197             createAccordion(newOpt, itemCount + 1);198             itemContentContainer.animate({ height: contentHeight + "px" },300);199             itemTitleContainer.css("border-bottom", "1px solid #99BBE8");200             return $this;201         },202         getActived: function () {203             return { titleObj: itemTitleContainer, contentObj: itemContentContainer };204         }205     };206     /********************207     *组件的构造函数208     *********************/209     $.fn.accordion = function () {210         var method = arguments[0];211         if (methods[method]) {212             method = methods[method];213             arguments = Array.prototype.slice.call(arguments, 1);214         } else if (typeof (method) == ‘object‘ || !method) {215             if ($.myui.isDebug) {216                 $.myui.log("jQuery.accordion init.....");217             }218             method = methods.init;219         } else {220             $.error(‘Method ‘ + method + ‘ does not exist on jQuery.accordion‘);221             return this;222         }223         return method.apply(this, arguments);224     };225     /********************226     *组件的默认配置值227     *options={228         items: [], //accordion项配置，对应$.fn.accordion.itemdefaults229         isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用230         url: ‘‘,231         dataType: ‘json‘,// json/html 远程加载时的数据格式232         onl oadSuccess: null,//fn(title,resdata)233         activedHandler: null,//fn(title,context)234         closedHandler: null //fn(title) accordion被关闭时触发235     }236     *********************/237     $.fn.accordion.defaults = {238         items: [], //accordion项配置，对应$.fn.accordion.itemdefaults239         isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用240         url: ‘‘,241         dataType: ‘json‘,// json/html 远程加载时的数据格式242         onl oadSuccess: null,//fn(title,resdata)243         activedHandler: null,//fn(title,context)244         closedHandler: null //fn(title) accordion被关闭时触发245     };246     /***247     *每一个accordion项目的默认配置248     ****/249     $.fn.accordion.itemdefaults = {250         title: ‘accordion标题‘,251         closable: false,//是否可以删除252         iconcls: ‘‘,253         actived: false,// 激活状态254         isiframe: false,//如果不配置采用公用 $.fn.accordion.defaults里的配置255         url: ‘‘,//如果不配置采用公用 $.fn.accordion.defaults里的配置256         content: null,//内容默认为空，如果该属性有值，则优先默认采用这个，即使设置url也不会去远程加载数据，content可以是html对象，也可以是文本257         dataType: ‘json‘// //如果不配置采用公用 $.fn.accordion.defaults里的配置        258     }259 })(jQuery);