基于jQuery实现的Tabs选项卡自定义插件

Posted 2020-08-20

控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。

Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手）

下面直接贴代码，不喜勿喷：

  1 (function ($) {
  2     ‘use strict‘;
  3     var defaults = {
  4         type: "iframe",
  5         onchanged: null,
  6         style: {
  7             header_panel: "tab-headers",
  8             content_panel: "tab-contents",
  9             header: "tab-header",
 10             content: "tab-content",
 11             selected: "selected",
 12             icon_base: "fa",
 13             icon_close: "fa-close"
 14         }
 15     }
 16     var methods = {
 17         init: function (options) {
 18             return this.each(function () {
 19                 var $this = $(this);
 20                 if (!$this.hasClass("tabs")) {
 21                     $this.addClass("tabs");
 22                 }
 23                 var settings = $this.data(‘tw.tabs‘);
 24                 if (typeof (settings) == ‘undefined‘) {
 25                     settings = $.extend({}, defaults, options);
 26                     $this.data(‘tw.tabs‘, settings);
 27                 } else {
 28                     settings = $.extend({}, settings, options);
 29                     $this.data(‘tw.tabs‘, settings);
 30                 }
 31                 if ($this.find("." + settings.style.header_panel).length == 0 || $this.find("." + settings.style.content_panel).length == 0) {
 32                     $this.empty();
 33                     $this.append($("<ul class=‘" + settings.style.header_panel + "‘></ul>"));
 34                     $this.append($("<div class=‘" + settings.style.content_panel + "‘></div>"));
 35                 }
 36                 if (settings.data) {
 37                     if (typeof settings.data === ‘string‘) {
 38                         settings.data = $.parseJSON(settings.data);
 39                     }
 40                     $.each(settings.data, function () {
 41                         $this.tabs("add", this);
 42                     });
 43                 }
 44             });
 45         },
 46         add: function (tab) {
 47             var $this = $(this);
 48             var settings = $this.data("tw.tabs");
 49             var headers = $this.find("." + settings.style.header_panel);
 50             var contents = $this.find("." + settings.style.content_panel);
 51             if (headers.find("[data-tab=‘" + tab.id + "‘]").length == 0) {
 52                 var header = $("<li class=‘" + settings.style.header + "‘ data-tab=‘" + tab.id + "‘><i class=‘" + settings.style.icon_base + "" + tab.icon + "‘></i><span class=‘tab-title‘>" + tab.name + "</span></li>");
 53                 if (tab.canClose) {
 54                     var close = $("<i class=‘" + settings.style.icon_base + "" + settings.style.icon_close + "‘></i>");
 55                     close.click(function () {
 56                         $this.tabs("remove", tab.id);
 57                     });
 58                     header.append(close);
 59                 }
 60                 header.data("tw.tab", tab);
 61                 headers.append(header);
 62                 var content = $("<div class=‘" + settings.style.content + "‘ data-tab=‘" + tab.id + "‘></div>");
 63                 if (settings.type == "iframe") {
 64                     content.append("<iframe src=‘" + tab.url + "?target_id=" + tab.id + "‘></iframe>");
 65                 } else if (settings.type == "ajax"){
 66                     $.ajax({
 67                         url: tab.url,
 68                         type: "post",
 69                         async: false,
 70                         data: { target_id: tab.id },
 71                         success: function (result) {
 72                             content.html(result);
 73                         }
 74                     });
 75                 } else {
 76                     content.html(tab.content);
 77                 }
 78                 contents.append(content);
 79                 if (tab.selected) {
 80                     $this.tabs("select", tab);
 81                 }
 82             } else {
 83                 $this.tabs("select", tab);
 84             }
 85         },
 86         select: function (tab) {
 87             var $this = $(this);
 88             var settings = $this.data("tw.tabs");
 89             $this.find("." + settings.style.selected).removeClass(settings.style.selected);
 90             if (typeof tab == "object") {
 91                 $this.find("[data-tab=‘" + tab.id + "‘]").addClass(settings.style.selected);
 92             } else {
 93                 $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected);
 94             }
 95             if (settings.onchanged) {
 96                 settings.onchanged(tab);
 97             }
 98         },
 99         refresh: function () {
100             var $this = $(this);
101             var selected = $this.find("." + settings.style.selected);
102             var tab = $this.find("." + settings.style.header).data("tw.tab");
103             if (settings.type == "iframe") {
104                 selected.find("iframe").attr(‘src‘, tab.url + "?target_id=" + tab.id);
105             } else if (settings.type == "ajax") {
106                 $.ajax({
107                     url: tab.url,
108                     type: "post",
109                     async: false,
110                     data: { target_id: tab.id },
111                     success: function (result) {
112                         content.html(result);
113                     }
114                 });
115             } else {
116                 content.html(tab.content);
117             }
118         },
119         remove: function (id) {
120             var $this = $(this);
121             var settings = $this.data("tw.tabs");
122             var tab = $this.find("[data-tab=‘" + id + "‘]");
123             if (tab.find("." + settings.style.selected)) {
124                 var index = tab.eq(0).index();
125                 $this.tabs("select", index);
126             }
127             tab.remove();
128         },
129         destroy: function (options) {
130             return $(this).each(function () {
131                 var $this = $(this);
132                 $this.removeData(‘tabs‘);
133             });
134         }
135     }
136     $.fn.tabs = 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.tabs‘);
146             return this;
147         }
148         return method.apply(this, args);
149     }
150 }
151 )(jQuery);

  1 .tabs {
  2     width:100%;
  3     height:100%;
  4 }
  5     .tabs .tab-headers {
  6         margin:0;
  7         padding:0 10px;
  8         height:40px;
  9         list-style:none;
 10         background:#f5f5f5;
 11         border-bottom:1px solid #ccc;
 12     }
 13         .tabs .tab-headers .tab-header {
 14             float:left;
 15             height:30px;
 16             font-size:12px;
 17             padding:7px 15px 0;
 18             margin-top:10px;
 19             margin-right:5px;
 20             border:1px solid #ccc;
 21             border-bottom:none;
 22             position:relative;
 23             cursor:pointer;
 24         }
 25             .tabs .tab-headers .tab-header:hover {
 26                 background:#ccc;
 27                 color:#0094ff;
 28             }
 29             .tabs .tab-headers .tab-header.selected {
 30                 background:#fff;
 31                 border:none;
 32                 cursor:default;
 33                 padding-top:5px;
 34                 margin-left:1px;
 35                 margin-right:6px;
 36                 border-top:3px solid #0094ff;
 37             }
 38             .tabs .tab-headers .tab-header .tab-title {
 39                 margin-left:5px;
 40             }
 41             .tabs .tab-headers .tab-header .fa-close {
 42                 position:relative;
 43                 right:-6px;
 44                 top:0;
 45             }
 46                 .tabs .tab-headers .tab-header .tab-close:hover {
 47                     color:#f00;
 48                     cursor:pointer;
 49                 }
 50     .tabs .tab-contents {
 51         width: 100%;
 52         height: calc(100% - 40px);
 53     }
 54         .tabs .tab-contents .tab-content {
 55             display:none;
 56         }
 57             .tabs .tab-contents .tab-content.selected {
 58                 display: block;
 59                 width: 100%;
 60                 height: 100%;
 61                 overflow: hidden;
 62             }
 63                 .tabs .tab-contents .tab-content.selected iframe {
 64                     width: 100%;
 65                     height: 100%;
 66                     border: none;
 67                 }