km之路--010 jquery 002 開發一個手風琴/摺疊面板插件

時間 2019-12-11

標籤之路 jquery 開發一個手風琴摺疊面板插件欄目 JQuery 简体版

原文原文鏈接

目標描述

我想要的插件是相似jquery-ui的accordion插件javascript

我想要的功能是這樣的：css

1. 此插件是否響應式應該是可選的，也就是寬度和高度是否自動自動填充父容器divhtml

2. 能夠自定義左邊的圖標，包括是否顯示圖標，以及自由的替換java

3. 若是面板中沒有內容，能夠控制點擊標題以後是跳轉到另外一個頁面仍是什麼都不作jquery

4. 若是面板中有內容，要支持ajax和標籤這兩種顯示方式ajax

5. 要支持事件，好比加載以前，展開面板以前，展開面板以後，ajax調用失敗與成功等編輯器

6. 面板中的內容要支持自定義渲染ide

7. 一個頁面調用屢次要不衝突函數

8. 提供訪問默認配置的方法工具

9. 提供所有展開、所有摺疊或指定某一個面板展開/摺疊的方法

參考jquery easyui的實現，應該是這樣的：

屬性
全部的屬性都定義在jQuery.fn.{plugin}.defaults裏面。例如，對話框屬性定義在jQuery.fn.dialog.defaults裏面。

事件
全部的事件（回調函數）也都定義在jQuery.fn.{plugin}.defaults裏面。

方法

調用方法的語法：$('selector').plugin('method', parameter);

解釋：

selector 是jQery對象選擇器。
plugin 是插件的名稱。
method 是相應插件現有的方法。
parameter 是參數對象，能夠是一個對象、字符串等。
全部方法都定義在jQuery.fn.{plugin}.methods。每一個方法都有2個參數：jq和param。第一個參數'jq'是必須的，這是指的jQuery對象。第二個參數'param'是指傳入方法的實際參數。

目前須要的就這麼多

基本的結構定義

html

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>Title</title>  6 <link type="text/css" rel="stylesheet" href="external/reset.css" />  7 <link type="text/css" rel="stylesheet" href="jquery.km.accordion.css"/>  8 <style>  9  body {  10  padding: 20px 0 0 20px;  11 }  12  .box {  13  padding: 20px;  14  float: left;  15 }  16  .ac-box {  17  width: 300px;  18 }  19  20  .ac-box.border{  21  border: 1px solid red;  22 }  23  p {  24  line-height: 25px;  25  text-indent: 2em;  26  padding: 0 5px;  27 }  28 </style>  29 </head>  30 <body>  31 <button id="tone">one</button>  32 <div class="box">  33 <div class="ac-box border">  34 <div id="one" class="km-accordion">  35 <h3>第一段</h3>  36 <div>  37 <p>The Clarkson family lived in the country near Cambridge，about half a mile from the nearest village  38  and about a mile from the river．They had a big，old house with a beautiful garden，a lot of flowers  39 and many old．trees．</p>  40 </div>  41 <h3>第二段</h3>  42 <div>  43 <p> 44 One Thursday morning in July，Jackie came in from the garden．She was a tall，fat woman，thirty years 45 old．It was the hottest day of the year，but she wore a warm brown skirt and yellow shirt．She went 46 into the kitchen to get a drink of water．Just then the phone rang 47 </p> 48 </div> 49 <h3>第三段</h3> 50 <div> 51 <p> 52 Jackie put the phone down．She took a cigarette from her bag and began to smoke．She felt angry 53 because her sister always asked for money．Diane was twenty years old， the youngest in the family．She 54 lived in London，in one room of a big house．She wanted to be a singer．She sang very well but she 55 could never get work． 56 </p> 57 </div> 58 <h3>第四段</h3> 59 <div> 60 <p>'Mother，please wait a minute，'Jackie said．'Peter Hobbs came here this morning．He's very angry with 61 you about that letter．He lost his job，you know．Why did you write to his office？He wants to talk to 62 you about it．'</p> 63 </div> 64 </div> 65 </div> 66 </div> 67 68 <div class="box"> 69 <div class="ac-box border"> 70 <div id="two" class="km-accordion"> 71 <h3>第一段</h3> 72 <div> 73 <p> 74 「啊，公爵，熱那亞和盧加如今是波拿巴家族的領地，不過，我得事先對您說，若是您不對我說咱們這裏處於戰爭狀態，若是您還敢袒護這個基督的敵人（我確乎相信，他是一個基督的敵人）的種種卑劣行徑和他一手形成的災禍，那麼我就再也不管您了。您就再也不是個人朋友，您就再也不是，如您所說的，個人忠實的奴隸。啊，您好，您好。我看我正在嚇唬您了，請坐，講給我聽。」</p> 75 </div> 76 <h3>第二段</h3> 77 <div> 78 <p> 79 一八○五年七月，遐邇聞名的安娜-帕夫洛夫娜-舍列爾——皇后瑪麗亞-費奧多羅夫娜的宮廷女官和心腹，在歡迎首位蒞臨晚會的達官顯要瓦西里公爵時說過這番話。安娜-帕夫洛夫娜一連咳嗽幾天了。正如她所說，她身罹流行性感冒（那時候，流行性感冒是個新詞，只有少數人才用它）。清早由一名紅衣聽差在分別發出的便函中，千篇一概地寫道：「伯爵（或公爵），如您意下尚無任何可取的娛樂，現在日晚上這個可憐的女病人的症候不導致您過度害怕，則請於七時至十時間蒞臨寒舍，不勝雀躍。安娜-舍列爾。」 80 </p> 81 </div> 82 <h3>第三段</h3> 83 <div> 84 <p> 85 他講的是優雅的法語，咱們的祖輩不只藉助它來講話，並且藉助它來思考，他提及話來帶有很平靜的、長輩庇護晚輩時特有的腔調，那是上流社會和宮廷中德高望重的老年人獨具的語調。他向安娜-帕夫洛夫娜跟前走來，把那灑滿香水的閃閃發亮的禿頭湊近她，吻吻她的手，就心平氣和地坐到沙發上 86 </p> 87 </div> 88 <h3>第四段</h3> 89 <div> 90 <p> 91 她滿腔熱情，使她取得了社會地位。有時她甚至沒有那種希冀，但爲不辜負熟悉她的人們的指望，她仍是要作一個滿腔熱情的人。安娜-帕夫洛夫娜臉上常常流露的冷淡的微笑，雖與她的憔悴的面容不相稱，但卻像養尊處優的孩童那樣，表示她常常意識到本身的微小缺點，不過她不想，也沒法並且認爲沒有必要去把它改正'</p> 92 </div> 93 </div> 94 </div> 95 </div> 96 97 98 <script type="text/javascript" charset="UTF-8" src="./external/jquery.min.js"></script> 99 <script type="text/javascript" charset="UTF-8" src="jquery.km.accordion.js"></script> 100 <!--<script type="text/javascript" charset="UTF-8" src="one.js"></script>--> 101 <script type="text/javascript" charset="UTF-8"> 102 $(function () { 103 104 }); 105 </script> 106 </body> 107 </html>

css

 1 @charset "UTF-8";  2  3 .km-accordion{  4  overflow: hidden;  5 }  6  7 .km-accordion > h3{  8  display: block;  9  background-color: #ededed; 10  padding: 6px 0 6px 25px; 11  border: 1px solid #d3d3d3; 12  cursor: pointer; 13  margin-top: 2px; 14 } 15 16 .km-accordion > h3:first-child{ 17  margin-top: 0; 18 } 19 20 .km-accordion > h3.active{ 21  background-color: #ffffff; 22 } 23 24 .km-accordion > div{ 25  display: none; 26 }

js

  1 /**
  2  * 摺疊面板
  3  *
  4  */
  5 ;(function ($, window, document, undefined) {
  6     var classes = {
  7         accordion: '.km-accordion',
  8         accordionStr: 'km-accordion',
  9 
 10         active: '.active',
 11         activeStr: 'active'
 12     };
 13 
 14     var events = {
 15         onSelect: '.kmAccordion',
 16         onUnselect: 'onUnselect.kmAccordion',
 17         onAdd: 'onAdd.kmAccordion',
 18         onBeforeRemove: 'onBeforeRemove.kmAccordion',
 19         onRemove: 'onRemove.kmAccordion'
 20     };
 21 
 22     function options(container){}
 23 
 24     function panels(container){}
 25 
 26     function resize (container){}
 27 
 28     function getSelected (container){}
 29 
 30     function getSelections(container){}
 31 
 32     function getPanel(container,which){}
 33 
 34     function getPanelIndex(container,panel){}
 35 
 36     function select(container,which){}
 37 
 38     function unselect(container,which){}
 39 
 40     function selectAll(container,which){}
 41 
 42     function unselectAll(container,which){}
 43 
 44     function add(container,options){}
 45 
 46     function remove(container,which){}
 47 
 48     function createPanel(container,param){}
 49 
 50     /**
 51      * TODO 綁定事件
 52      * @param jq
 53      */
 54     function bindEvent(jq) {}
 55 
 56     /***
 57      * TODO init
 58      * 初始化
 59      * @param jq
 60      */
 61     function init(jq) {}
 62 
 63 
 64     $.fn.kmAccordion = function (options, param) {
 65         if (typeof options === 'string') {
 66             return $.fn.kmAccordion.methods[options](this, param);
 67         }
 68 
 69         var _opts = $.extend({}, $.fn.kmAccordion.defaults, options);
 70         var jq = this;
 71         jq.config = _opts;
 72 
 73         return this.each(function () {
 74             // 插件初始化
 75             init(jq);
 76         });
 77     };
 78 
 79     $.fn.kmAccordion.methods = {
 80         /**
 81          * TODO 返回當前摺疊面板的屬性
 82          * @param jq
 83          */
 84         options: function (jq) {},
 85 
 86         /**
 87          * TODO 獲取全部面板
 88          * @param jq
 89          */
 90         panels : function(jq){},
 91 
 92         /**
 93          * TODO 調整摺疊面板大小
 94          * @param jq
 95          */
 96         resize : function (jq) {},
 97 
 98         /**
 99          * TODO 獲取選中的面板
100          * @param jq
101          */
102         getSelected: function (jq) {},
103 
104         /**
105          * TODO 獲取全部選中的面板
106          * @param jq
107          */
108         getSelections : function (jq) {},
109 
110         /**
111          * TODO 獲取指定的面板
112          * @param jq
113          * @param which 面板的標題或索引
114          */
115         getPanel: function ( jq,which) {},
116 
117         /**
118          * TODO 獲取指定面板的索引
119          * @param jq
120          * @param panel
121          */
122         getPanelIndex : function(jq,panel){},
123 
124         /**
125          * TODO 選擇指定面板
126          * @param jq
127          * @param which 面板的標題或索引
128          */
129         select: function ( jq,which) {},
130 
131         /**
132          * TODO 取消選擇指定面板
133          * @param jq
134          * @param which 面板標題或索引
135          */
136         unselect: function (jq, which) {},
137 
138         /**
139          * TODO 選擇全部面板
140          * @param jq
141          */
142         selectAll : function(jq){},
143 
144         /**
145          * TODO 取消選擇全部面板
146          * @param jq
147          */
148         unselectAll : function(jq){},
149 
150         /**
151          * TODO 添加一個新面板
152          * 默認狀況下，新增的面板會被選中
153          * @param jq
154          * @param options 面板配置項
155          */
156         add: function (jq,options) {},
157 
158         /**
159          * TODO 移除指定面板
160          * @param jq
161          * @param which 面板標題或索引
162          */
163         remove: function (jq, which) {}
164     };
165 
166     $.fn.kmAccordion.defaults = {
167         /**
168          * 寬度，能夠是百分比【相對父容器(div)】、數字(像素)、auto，默認爲auto
169          */
170         width: 'auto',
171         /**
172          * 高度，能夠是百分比【相對父容器(div)】、數字(像素)、auto，默認爲auto
173          */
174         height: 'auto',
175         /**
176          * 若是爲true，則自適應父容器【div】，默認爲true
177          */
178         fit: true,
179         /**
180          * 是否顯示邊框，默認爲false
181          */
182         border: false,
183         /**
184          * 邊框樣式，字面量對象形式
185          */
186         borderStyle: null,
187         /**
188          * 定義在展開和摺疊的時候是否顯示動畫效果。默認：true
189          */
190         animate: true,
191         /**
192          * 若是爲true，則能夠同時展開多個面板
193          */
194         multiple: false,
195         /**
196          * 初始化時默認選中的面板索引號，若是爲-1，則都不展開。默認：0
197          */
198         selected: 0,
199         /**
200          * 設置面板標題對齊方式，可用值：'left', 'center', 'right'，默認爲'left'
201          */
202         halign: 'left',
203 
204         /**
205          * TODO 用戶選擇面板時觸發
206          * @param title
207          * @param index
208          */
209         onSelect: function (title, index) {},
210 
211         /**
212          * TODO 面板被取消選擇時觸發
213          * @param title
214          * @param index
215          */
216         onUnselect: function (title, index) {},
217 
218         /**
219          * TODO 添加新面板時觸發
220          * @param title
221          * @param index
222          */
223         onAdd: function (title, index) {},
224 
225         /**
226          * TODO 移除面板以前觸發，返回false可取消移除操做
227          * @param title
228          * @param index
229          */
230         onBeforeRemove: function (title, index) {},
231 
232         /**
233          * TODO 面板被移除時觸發
234          * @param title
235          * @param index
236          */
237         onRemove: function (title, index) {}
238     };
239 })(jQuery, window, document);

默認效果

未定義

1. 圖標

2. 標題上的按鈕

3. 面板。其實我如今只是實現一個容器，中間的面板還沒作，因爲徹底參考easyui來作工做量實在是有點大，如今只能實現一個基本的架子

4. 遠程加載。遠程加載涉及到容器自己與面板內容的遠程加載，且這又涉及到組件的繼承問題，因此只能滯後了

初步實現

js

  1 /**
  2  * 摺疊面板
  3  *
  4  */
  5 ;(function ($, window, document, undefined) {
  6     var classes = {
  7         accordion: '.km-accordion',
  8         accordionStr: 'km-accordion',
  9 
 10         active: '.active',
 11         activeStr: 'active'
 12     };
 13 
 14     var events = {
 15         onSelect: '.kmAccordion',
 16         onUnselect: 'onUnselect.kmAccordion',
 17         onAdd: 'onAdd.kmAccordion',
 18         onBeforeRemove: 'onBeforeRemove.kmAccordion',
 19         onRemove: 'onRemove.kmAccordion'
 20     };
 21 
 22     function options(container) {
 23     }
 24 
 25     function panels(container) {
 26     }
 27 
 28     function resize(container) {
 29     }
 30 
 31     function getSelected(container) {
 32     }
 33 
 34     function getSelections(container) {
 35     }
 36 
 37     /**
 38      * 根據標題或索引返回指定的面板
 39      * @param container
 40      * @param which
 41      */
 42     function getPanel(container, which) {
 43         var panelAndParam = [];
 44         panelAndParam[0] = null;
 45         // TODO 優化選擇
 46         if ('string' === typeof which) {
 47             panelAndParam[0] = container.children("h3[title='" + which + "']");
 48             panelAndParam[1] = which;
 49 
 50             /**
 51              * TODO 工具類 加強jquery.index方法，返回當前元素在父元素中相同的全部元素集合中的索引
 52              * 如
 53              * <div>
 54              * <h3 id="h1"></h3>
 55              * <div></div>
 56              * <h3 id="h2"></h3>
 57              * <div></div>
 58              * * <h3 id="h3"></h3>
 59              * <div></div>
 60              * <h3 id="h4"></h3>
 61              * <div></div>
 62              * </div>
 63              * h3#h2 應該返回1而不是2
 64              */
 65             panelAndParam[2] = panelAndParam[0].index() / 2;
 66         } else if ("number" === typeof which) {
 67             panelAndParam[0] = container.children('h3').eq(which);
 68             panelAndParam[1] = panelAndParam[0].text();
 69             panelAndParam[2] = which;
 70         }
 71         return panelAndParam;
 72     }
 73 
 74     function getPanelIndex(container, panel) {
 75     }
 76 
 77 
 78     /**
 79      * 選擇指定面板
 80      * @param container
 81      * @param which 面板標題或索引
 82      */
 83     function select(container, which) {
 84         var panelAndParam = getPanel(container, which);
 85         var titleElement = panelAndParam[0];
 86 
 87         if (titleElement) {
 88             var title = panelAndParam[1];
 89             var index = panelAndParam[2];
 90             var animate = container.config.animate;
 91             titleElement.addClass(classes.activeStr);
 92             if (animate) {
 93                 titleElement.next('div').slideDown();
 94             } else {
 95                 titleElement.next('div').show();
 96             }
 97             if (!container.config.multiple) {
 98                 titleElement.siblings('h3').each(function (i) {
 99                     unselect(container, $(this).text());
100                 });
101             }
102             container.config.onSelect.call(this, title, index);
103         }
104     }
105 
106     /**
107      * 取消選擇指定面板
108      * @param container
109      * @param which 面板標題或索引
110      */
111     function unselect(container, which) {
112         var panelAndParam = getPanel(container, which);
113         var titleElement = panelAndParam[0];
114         if (titleElement) {
115             var title = panelAndParam[1];
116             var index = panelAndParam[2];
117             var animate = container.config.animate;
118             titleElement.removeClass(classes.activeStr);
119             if (animate) {
120                 titleElement.next('div').slideUp();
121             } else {
122                 titleElement.next('div').hide();
123             }
124             container.config.onUnselect.call(this, title, index);
125         }
126     }
127 
128     function selectAll(container, which) {
129     }
130 
131     function unselectAll(container, which) {
132     }
133 
134     function add(container, options) {
135     }
136 
137     function remove(container, which) {
138     }
139 
140     function createPanel(container, param) {
141     }
142 
143     /**
144      * 綁定事件
145      * @param jq
146      */
147     function bindEvent(jq) {
148         jq.on(events.onSelect, jq.config.onSelect);
149         jq.on(events.onUnselect, jq.onUnselect);
150         jq.on(events.onAdd, jq.config.onAdd);
151         jq.on(events.onBeforeRemove, jq.config.onBeforeRemove);
152         jq.on(events.onRemove, jq.config.onRemove);
153     }
154 
155     /**
156      * 初始化標題
157      * @param jq
158      */
159     function initTitle(jq) {
160         jq.children('h3').each(function () {
161             $(this).attr('title', $(this).text());
162         });
163         var halign = jq.config.halign;
164         // 設置標題
165         if ('left' !== halign) {
166             switch (halign) {
167                 case 'center': {
168                     jq.find('h3').css({
169                         'padding-left': '0',
170                         'padding-right': '0',
171                         'text-align': 'center'
172                     });
173                     break;
174                 }
175                 case 'right': {
176                     jq.find('h3').css({
177                         'padding-left': '0',
178                         'padding-right': '25px',
179                         'text-align': 'right'
180                     });
181                     break;
182                 }
183                 default: {
184                     break;
185                 }
186             }
187         }
188     }
189 
190     /**
191      * 初始化選擇面板
192      * @param jq
193      */
194     function initSelect(jq) {
195         var selected = jq.config.selected;
196         if (0 <= selected && selected < jq.children('h3').length) {
197             select(jq, selected);
198         }
199     }
200 
201     /**
202      * 初始化邊框樣式
203      * @param jq
204      */
205     function initBorder(jq) {
206         if (jq.config.border) {
207             var borderStyle = jq.config.borderStyle;
208             jq.css(borderStyle);
209             jq.attr('offsetWidth', jq.parent().width()).attr('offsetHeight', jq.parent().height());
210         }
211     }
212 
213     /**
214      * 初始化高度與寬度
215      * @param jq
216      */
217     function initWidthAndHeight(jq) {
218         // 若是fit爲true，則忽略寬度與高度的設置
219         if (jq.config.fit) {
220             return;
221         }
222 
223         if ('auto' !== jq.config.width) {
224             jq.css({
225                 'width': jq.config.width + 'px'
226             });
227         }
228 
229         if ('auto' !== jq.config.height) {
230             jq.css({
231                 'height': jq.config.height + 'px'
232             });
233         }
234     }
235 
236     function initStyle(jq) {
237         initTitle(jq);
238         initBorder(jq);
239         initSelect(jq);
240         initWidthAndHeight(jq);
241     }
242 
243 
244     /***
245      * TODO init
246      * 初始化
247      * @param jq
248      */
249     function init(jq) {
250         initStyle(jq);
251         bindEvent(jq);
252         jq.children('h3').click(function () {
253             var titleClass = $(this).attr('class');
254             // TODO 工具類 判斷某個元素是否包含給定的class樣式
255             if (undefined === titleClass || titleClass.indexOf(classes) < 0) {
256                 console.log('click:select');
257                 select(jq, $(this).text());
258             }
259 
260             if (undefined !== titleClass && titleClass.indexOf(classes.activeStr) >= 0) {
261                 console.log('click:unselect');
262                 unselect(jq, $(this).text());
263             }
264         })
265     }
266 
267 
268     $.fn.kmAccordion = function (options, param) {
269         if (typeof options === 'string') {
270             return $.fn.kmAccordion.methods[options](this, param);
271         }
272 
273         var _opts = $.extend({}, $.fn.kmAccordion.defaults, options);
274         var jq = this;
275         jq.config = _opts;
276 
277         return this.each(function () {
278             // 插件初始化
279             init(jq);
280         });
281     };
282 
283 
284     $.fn.kmAccordion.methods = {
285         /**
286          * 返回當前摺疊面板的屬性
287          * @param jq
288          */
289         options: function (jq) {
290             return jq.config;
291         },
292 
293         /**
294          * TODO 獲取全部面板
295          * @param jq
296          */
297         panels: function (jq) {
298         },
299 
300         /**
301          * TODO 調整摺疊面板大小
302          * @param jq
303          */
304         resize: function (jq) {
305         },
306 
307         /**
308          * TODO 獲取選中的面板
309          * @param jq
310          */
311         getSelected: function (jq) {
312         },
313 
314         /**
315          * TODO 獲取全部選中的面板
316          * @param jq
317          */
318         getSelections: function (jq) {
319         },
320 
321         /**
322          * TODO 獲取指定的面板
323          * @param jq
324          * @param which 面板的標題或索引
325          */
326         getPanel: function (jq, which) {
327             return jq.each(function () {
328                 getPanel(jq, which);
329             });
330         },
331 
332         /**
333          * TODO 獲取指定面板的索引
334          * @param jq
335          * @param panel
336          */
337         getPanelIndex: function (jq, panel) {
338         },
339 
340         /**
341          * 選擇指定面板
342          * @param jq
343          * @param which 面板的標題或索引
344          */
345         select: function (jq, which) {
346             return jq.each(function () {
347                 select(jq, which);
348             });
349         },
350 
351         /**
352          * TODO 取消選擇指定面板
353          * @param jq
354          * @param which 面板標題或索引
355          */
356         unselect: function (jq, which) {
357             return jq.each(function () {
358                 unselect(jq, which);
359             });
360         },
361 
362         /**
363          * TODO 選擇全部面板
364          * @param jq
365          */
366         selectAll: function (jq) {
367         },
368 
369         /**
370          * TODO 取消選擇全部面板
371          * @param jq
372          */
373         unselectAll: function (jq) {
374         },
375 
376         /**
377          * TODO 添加一個新面板
378          * 默認狀況下，新增的面板會被選中
379          * @param jq
380          * @param options 面板配置項
381          */
382         add: function (jq, options) {
383         },
384 
385         /**
386          * TODO 移除指定面板
387          * @param jq
388          * @param which 面板標題或索引
389          */
390         remove: function (jq, which) {
391         }
392     };
393 
394     $.fn.kmAccordion.defaults = {
395         /**
396          * 寬度，能夠是百分比【相對父容器(div)】、數字(像素)、auto，默認爲auto
397          */
398         width: 'auto',
399         /**
400          * 高度，能夠是百分比【相對父容器(div)】、數字(像素)、auto，默認爲auto
401          */
402         height: 'auto',
403         /**
404          * 若是爲true，則自適應父容器【div】，默認爲true
405          */
406         fit: true,
407         /**
408          * 是否顯示邊框，默認爲false
409          */
410         border: false,
411         /**
412          * 邊框樣式，字面量對象形式
413          */
414         borderStyle: null,
415         /**
416          * 定義在展開和摺疊的時候是否顯示動畫效果。默認：true
417          */
418         animate: true,
419         /**
420          * 若是爲true，則能夠同時展開多個面板
421          */
422         multiple: false,
423         /**
424          * 初始化時默認選中的面板索引號，若是爲-1，則都不展開。默認：0
425          */
426         selected: 0,
427         /**
428          * 設置面板標題對齊方式，可用值：'left', 'center', 'right'，默認爲'left'
429          */
430         halign: 'left',
431 
432         /**
433          * 用戶選擇面板時觸發
434          * @param title
435          * @param index
436          */
437         onSelect: function (title, index) {
438         },
439 
440         /**
441          * 面板被取消選擇時觸發
442          * @param title
443          * @param index
444          */
445         onUnselect: function (title, index) {
446         },
447 
448         /**
449          * TODO 添加新面板時觸發
450          * @param title
451          * @param index
452          */
453         onAdd: function (title, index) {
454         },
455 
456         /**
457          * TODO 移除面板以前觸發，返回false可取消移除操做
458          * @param title
459          * @param index
460          */
461         onBeforeRemove: function (title, index) {
462         },
463 
464         /**
465          * TODO 面板被移除時觸發
466          * @param title
467          * @param index
468          */
469         onRemove: function (title, index) {
470         }
471     };
472 })(jQuery, window, document);

調用

如今的調用其實和easyui沒有什麼區別了

更進一步

如今已經有展開/收縮的能力了，其中的某些方法並未實現，好比add和remove方法，緣由在於這涉及到遠程加載與面板中內容加載的問題。

除了經過監聽click事件以外，還可使用MutationObserver來監聽元素屬性的變化，這樣當元素的class發生變化的時候，就能夠接收到事件，而後在監聽事件的處理中解決，如：

 1 <div class="box border">
 2     <span id="one" class="red" title="hello">hello world</span>
 3 </div>
 4 
 5 
 6 <script type="text/javascript" charset="UTF-8" src="./external/jquery.min.js"></script>
 7 <script type="text/javascript" charset="UTF-8" src="one.js"></script>
 8 <script type="text/javascript" charset="UTF-8">
 9     $(function () {
10         var MutationObserver = window.MutationObserver;
11         var target = document.querySelector('#one');
12         var observer = new MutationObserver(function (mutations) {
13             mutations.forEach(function (mutation) {
14                 console.log(mutation);
15                 $(mutation.target).trigger('click');
16             })
17         });
18 
19         var config = {attributes: true, attributeFilter:['class']};
20 
21         observer.observe(target,config);
22 
23         $('#one').click(function () {
24             console.log('click');
25         });
26 
27 
28     });
29 </script>