基于jQuery实现的Accordion手风琴自定义插件

  1 (function ($) {
  2     ‘use strict‘;
  3     var defaults = {
  4         url: null,
  5         param: {},
  6         data: {},
  7         fill: true,
  8         level_space: 15,
  9         onitemclick: null,
 10         style: {
 11             header: "accordion-header",
 12             header_title: "accordion-header-title",
 13             content: "accordion-content",
 14             selected: "selected",
 15             icon_base: "fa",
 16             icon_collapse: "fa-angle-up",
 17             icon_expand: "fa-angle-down"
 18         }
 19     }
 20     var methods = {
 21         init: function (options) {
 22             return this.each(function () {
 23                 var $this = $(this);
 24                 if (!$this.hasClass("accordion")) {
 25                     $this.addClass("accordion");
 26                 }
 27                 var settings = $this.data(‘tw.accordion‘);
 28                 if (typeof (settings) == ‘undefined‘) {
 29                     settings = $.extend({}, defaults, options);
 30                     $this.data(‘tw.accordion‘, settings);
 31                 } else {
 32                     settings = $.extend({}, settings, options);
 33                     $this.data(‘tw.accordion‘, settings);
 34                 }
 35                 if (settings.url) {
 36                     $.ajax({
 37                         type: "post",
 38                         async: false,
 39                         url: settings.url,
 40                         data: settings.param,
 41                         success: function (data) {
 42                             settings.data = data;
 43                         }
 44                     });
 45                 }
 46                 if (settings.fill) {
 47                     $this.height("100%");
 48                 }
 49                 if (settings.data.length > 0) {
 50                     $this.data("count", settings.data.length);
 51                     $.each(settings.data, function () {
 52                         this.level = 1;
 53                         var item = $this.accordion("add", this);
 54                         $this.append(item);
 55                     });
 56                     if ($this.find("." + settings.style.selected).length == 0) {
 57                         var data = $this.find(">li:first-child").data("data");
 58                         $this.accordion("select", data);
 59                     }
 60                 }
 61             });
 62         },
 63         add: function (data) {
 64             var $this = $(this);
 65             var settings = $this.data("tw.accordion");
 66             var item = $("<li class=‘" + settings.style.header + "‘></li>");
 67             item.data("data", data);
 68             var header = $("<div class=‘" + settings.style.header_title + "‘ data-accordion=‘" + data.id + "‘>" +
 69                 "<i class=‘" + settings.style.icon_base + "" + data.icon + "‘></i>" +
 70                 "<span>" + data.name + "</span></div>");
 71             header.css("padding-left", settings.level_space * data.level);
 72             item.append(header);
 73             if (data.childrens) {
 74                 var toggle = $("<i class=‘" + settings.style.icon_base + "" + settings.style.icon_collapse + "‘></i>");
 75                 toggle.css({ "font-size": "1.4em", "position": "absolute", "top": "7px", "right": "7px" });
 76                 header.append(toggle);
 77                 var content = $("<ul class=‘" + settings.style.content + "‘></ul>");
 78                 content.data("count", data.childrens.length);
 79                 $.each(data.childrens, function () {
 80                     this.level = data.level + 1;
 81                     var child = $this.accordion("add", this);
 82                     content.append(child);
 83                 });
 84                 item.append(content);
 85             }
 86             header.click(function () {
 87                 $this.accordion("select", data);
 88             });
 89             if (data.selected) {
 90                 $this.accordion("select", data);
 91             }
 92             return item;
 93         },
 94         select: function (data) {
 95             var $this = $(this);
 96             var settings = $this.data("tw.accordion");
 97             var header = $this.find("[data-accordion=‘" + data.id + "‘]");
 98             var item = header.parent();
 99             if (!header.hasClass(settings.style.selected) && !item.hasClass(settings.style.selected)) {
100                 var sibling = item.siblings();
101                 sibling.removeClass(settings.style.selected).children("." + settings.style.selected).removeClass(settings.style.selected);
102                 sibling.children("." + settings.style.icon_expand).removeClass(settings.style.icon_expand).addClass(settings.style.icon_collapse);
103                 if (data.childrens) {
104                     item.addClass(settings.style.selected);
105                     header.find("." + settings.style.icon_collapse).removeClass(settings.style.icon_collapse).addClass(settings.style.icon_expand);
106                     if (settings.fill) {
107                         var count = item.parent().data("count") - 1;
108                         item.css("height", "calc(100% - " + (item.height() * count) + "px)");
109                     }
110                 } else {
111                     header.addClass(settings.style.selected);
112                 }
113             }
114             if (settings.onitemclick) {
115                 settings.onitemclick(data);
116             }
117         },
118         update: function (url, param) {
119             var $this = $(this);
120             var settings = $this.data("tw.accordion");
121             if (typeof url == "object") {
122                 settings.param = url;
123             } else {
124                 settings.url = url;
125                 settings.param = param;
126             }
127             $this.accordion("init", settings);
128         },
129         destroy: function (options) {
130             return $(this).each(function () {
131                 var $this = $(this);
132                 $this.removeData(‘accordion‘);
133             });
134         }
135     }
136     $.fn.accordion = function () {
137         var method = arguments[0];
138         var args = arguments;
139         if (typeof (method) == ‘object‘ || !method) {
140             method = methods.init;
141         } else if (methods[method]) {
142             method = methods[method];
143             args = $.makeArray(arguments).slice(1);
144         } else {
145             $.error(‘Method ‘ + method + ‘ does not exist on tw.accordion‘);
146             return this;
147         }
148         return method.apply(this, args);
149     }
150 })(jQuery);

  1 .accordion {
  2     margin:0;
  3     padding:0;
  4     font-size:14px;
  5 }
  6     .accordion > .accordion-header {
  7         list-style: none;
  8         margin: 0;
  9         padding: 0;
 10         border-bottom: 1px solid #ddd;
 11     }
 12         .accordion > .accordion-header.selected > .accordion-header-title {
 13             color: #0094ff;
 14         }
 15         .accordion > .accordion-header > .accordion-header-title {
 16             position: relative;
 17             width: 100%;
 18             height: 35px;
 19             line-height: 35px;
 20             background: #eee;
 21             border-bottom: 1px solid #ccc;
 22             cursor: pointer;
 23         }
 24             .accordion > .accordion-header > .accordion-header-title > i:first-child {
 25                 font-size: 1.3em;
 26             }
 27             .accordion > .accordion-header > .accordion-header-title > span {
 28                 position: relative;
 29                 top: -1px;
 30                 left: 5px;
 31             }
 32         .accordion > .accordion-header > .accordion-content {
 33             display: none;
 34             width: 100%;
 35             height: calc(100% - 35px);
 36             margin: 0;
 37             padding: 0;
 38         }
 39         .accordion > .accordion-header.selected > .accordion-content {
 40             display: block;
 41         }
 42 .accordion-content > .accordion-header {
 43         list-style: none;
 44         margin: 0;
 45         padding: 0;
 46 }
 47     .accordion-content > .accordion-header.selected {
 48         color: #0094ff;
 49     }
 50     .accordion-content > .accordion-header > .accordion-header-title {
 51         position: relative;
 52         width: 100%;
 53         height: 32px;
 54         line-height: 32px;
 55         cursor: pointer;
 56         border-bottom: 1px solid #ccc;
 57     }
 58         .accordion-content > .accordion-header > .accordion-header-title:hover {
 59             background:#eee;
 60         }
 61         .accordion-content > .accordion-header > .accordion-header-title.selected {
 62             color: #fff;
 63             background: #0094ff;
 64             border-left: 3px solid #ff6a00;
 65             border-bottom: 0px;
 66         }
 67             .accordion-content > .accordion-header > .accordion-header-title > i:first-child {
 68                 font-size: 1.2em;
 69             }
 70             .accordion-content > .accordion-header > .accordion-header-title > span {
 71                 position: relative;
 72                 top: -1px;
 73                 left: 5px;
 74             }
 75             .accordion-content > .accordion-header > .accordion-header-title.selected > i:first-child {
 76                 position:relative;
 77                 left:-3px;
 78             }
 79             .accordion-content > .accordion-header > .accordion-header-title.selected > span {
 80                 position: relative;
 81                 top: -1px;
 82                 left: 2px;
 83             }
 84         .accordion-content > .accordion-header > .accordion-content {
 85             display: none;
 86             width: 100%;
 87             height: calc(100% - 32px);
 88             margin: 0;
 89             padding: 0;
 90         }
 91         .accordion-content > .accordion-header.selected > .accordion-content {
 92             display: block;
 93         }