这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要为大家详细介绍了基于 jQuery 实现 Accordion 手风琴自定义插件, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言。(没有经过彻底测试,不过问题应该不大)
下面老规矩,直接贴代码:
- (function($) {
- 'use strict';
- var defaults = {
- url: null,
- param: {},
- data: {},
- fill: true,
- level_space: 15,
- onitemclick: null,
- style: {
- header: "accordion-header",
- header_title: "accordion-header-title",
- content: "accordion-content",
- selected: "selected",
- icon_base: "fa",
- icon_collapse: "fa-angle-up",
- icon_expand: "fa-angle-down"
- }
- }
- var methods = {
- init: function(options) {
- return this.each(function() {
- var $this = $(this);
- if (!$this.hasClass("accordion")) {
- $this.addClass("accordion");
- }
- var settings = $this.data('tw.accordion');
- if (typeof(settings) == 'undefined') {
- settings = $.extend({},
- defaults, options);
- $this.data('tw.accordion', settings);
- } else {
- settings = $.extend({},
- settings, options);
- $this.data('tw.accordion', settings);
- }
- if (settings.url) {
- $.ajax({
- type: "post",
- async: false,
- url: settings.url,
- data: settings.param,
- success: function(data) {
- settings.data = data;
- }
- });
- }
- if (settings.fill) {
- $this.height("100%");
- }
- if (settings.data.length > 0) {
- $this.data("count", settings.data.length);
- $.each(settings.data,
- function() {
- this.level = 1;
- var item = $this.accordion("add", this);
- $this.append(item);
- });
- if ($this.find("." + settings.style.selected).length == 0) {
- var data = $this.find(">li:first-child").data("data");
- $this.accordion("select", data);
- }
- }
- });
- },
- add: function(data) {
- var $this = $(this);
- var settings = $this.data("tw.accordion");
- var item = $("<li class='" + settings.style.header + "'></li>");
- item.data("data", data);
- var header = $("<div class='" + settings.style.header_title + "' data-accordion='" + data.id + "'>" + "<i class='" + settings.style.icon_base + "" + data.icon + "'></i>" + "<span>" + data.name + "</span></div>");
- header.css("padding-left", settings.level_space * data.level);
- item.append(header);
- if (data.childrens) {
- var toggle = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_collapse + "'></i>");
- toggle.css({
- "font-size": "1.4em",
- "position": "absolute",
- "top": "7px",
- "right": "7px"
- });
- header.append(toggle);
- var content = $("<ul class='" + settings.style.content + "'></ul>");
- content.data("count", data.childrens.length);
- $.each(data.childrens,
- function() {
- this.level = data.level + 1;
- var child = $this.accordion("add", this);
- content.append(child);
- });
- item.append(content);
- }
- header.click(function() {
- $this.accordion("select", data);
- });
- if (data.selected) {
- $this.accordion("select", data);
- }
- return item;
- },
- select: function(data) {
- var $this = $(this);
- var settings = $this.data("tw.accordion");
- var header = $this.find("[data-accordion='" + data.id + "']");
- var item = header.parent();
- if (!header.hasClass(settings.style.selected) && !item.hasClass(settings.style.selected)) {
- var sibling = item.siblings();
- sibling.removeClass(settings.style.selected).children("." + settings.style.selected).removeClass(settings.style.selected);
- sibling.children("." + settings.style.icon_expand).removeClass(settings.style.icon_expand).addClass(settings.style.icon_collapse);
- if (data.childrens) {
- item.addClass(settings.style.selected);
- header.find("." + settings.style.icon_collapse).removeClass(settings.style.icon_collapse).addClass(settings.style.icon_expand);
- if (settings.fill) {
- var count = item.parent().data("count") - 1;
- item.css("height", "calc(100% - " + (item.height() * count) + "px)");
- }
- } else {
- header.addClass(settings.style.selected);
- }
- }
- if (settings.onitemclick) {
- settings.onitemclick(data);
- }
- },
- update: function(url, param) {
- var $this = $(this);
- var settings = $this.data("tw.accordion");
- if (typeof url == "object") {
- settings.param = url;
- } else {
- settings.url = url;
- settings.param = param;
- }
- $this.accordion("init", settings);
- },
- destroy: function(options) {
- return $(this).each(function() {
- var $this = $(this);
- $this.removeData('accordion');
- });
- }
- }
- $.fn.accordion = function() {
- var method = arguments[0];
- var args = arguments;
- if (typeof(method) == 'object' || !method) {
- method = methods.init;
- } else if (methods[method]) {
- method = methods[method];
- args = $.makeArray(arguments).slice(1);
- } else {
- $.error('Method ' + method + ' does not exist on tw.accordion');
- return this;
- }
- return method.apply(this, args);
- }
- })(jQuery);
- .accordion {
- margin:0;
- padding:0;
- font-size:14px;
- }
- .accordion > .accordion-header {
- list-style: none;
- margin: 0;
- padding: 0;
- border-bottom: 1px solid #ddd;
- }
- .accordion > .accordion-header.selected > .accordion-header-title {
- color: #0094ff;
- }
- .accordion > .accordion-header > .accordion-header-title {
- position: relative;
- width: 100%;
- height: 35px;
- line-height: 35px;
- background: #eee;
- border-bottom: 1px solid #ccc;
- cursor: pointer;
- }
- .accordion > .accordion-header > .accordion-header-title > i:first-child {
- font-size: 1.3em;
- }
- .accordion > .accordion-header > .accordion-header-title > span {
- position: relative;
- top: -1px;
- left: 5px;
- }
- .accordion > .accordion-header > .accordion-content {
- display: none;
- width: 100%;
- height: calc(100% - 35px);
- margin: 0;
- padding: 0;
- }
- .accordion > .accordion-header.selected > .accordion-content {
- display: block;
- }
- .accordion-content > .accordion-header {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .accordion-content > .accordion-header.selected {
- color: #0094ff;
- }
- .accordion-content > .accordion-header > .accordion-header-title {
- position: relative;
- width: 100%;
- height: 32px;
- line-height: 32px;
- cursor: pointer;
- border-bottom: 1px solid #ccc;
- }
- .accordion-content > .accordion-header > .accordion-header-title:hover {
- background:#eee;
- }
- .accordion-content > .accordion-header > .accordion-header-title.selected {
- color: #fff;
- background: #0094ff;
- border-left: 3px solid #ff6a00;
- border-bottom: 0px;
- }
- .accordion-content > .accordion-header > .accordion-header-title > i:first-child {
- font-size: 1.2em;
- }
- .accordion-content > .accordion-header > .accordion-header-title > span {
- position: relative;
- top: -1px;
- left: 5px;
- }
- .accordion-content > .accordion-header > .accordion-header-title.selected > i:first-child {
- position:relative;
- left:-3px;
- }
- .accordion-content > .accordion-header > .accordion-header-title.selected > span {
- position: relative;
- top: -1px;
- left: 2px;
- }
- .accordion-content > .accordion-header > .accordion-content {
- display: none;
- width: 100%;
- height: calc(100% - 32px);
- margin: 0;
- padding: 0;
- }
- .accordion-content > .accordion-header.selected > .accordion-content {
- display: block;
- }
来源: http://www.phperz.com/article/17/0428/330364.html