需求：
（1）实现手风琴面板控件，支持静态HTML与JSON方式创建控件
（2）支持远程加载数据
（3）支持面板激活、远程加载事件注册
（4）支持动态添加、删除项目
实现图例
客户代码
<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")对象
}],
onLoadSuccess: 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‘,
onLoadSuccess: 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里的配置
onLoadSuccess: 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 *电邮:[email protected]
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 settings
116 if (typeof options == ‘undefined‘)
117 settings = $.fn.accordion.defaults;
118 else
119 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 onLoadSuccess: 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.itemdefaults
229 isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用
230 url: ‘‘,
231 dataType: ‘json‘,// json/html 远程加载时的数据格式
232 onLoadSuccess: 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.itemdefaults
239 isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用
240 url: ‘‘,
241 dataType: ‘json‘,// json/html 远程加载时的数据格式
242 onLoadSuccess: 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);
我的开源框架之Accordion控件
时间： 2024-10-06 02:46:30