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

(function ($) { 'use strict'; var defaults = { type: "iframe", onchanged: null, style: {  header_panel: "tab-headers",  content_panel: "tab-contents",  header: "tab-header",  content: "tab-content",  selected: "selected",  icon_base: "fa",  icon_close: "fa-close" } } var methods = { init: function (options) {  return this.each(function () {  var $this = $(this);  if (!$this.hasClass("tw.tabs")) {   $this.addClass("tabs");  }  var settings = $this.data('tw.tabs');  if (typeof (settings) == 'undefined') {   settings = $.extend({}, defaults, options);   $this.data('tw.tabs', settings);  } else {   settings = $.extend({}, settings, options);   $this.data('tw.tabs', settings);  }  $this.empty();  $this.append($("<ul class='" + settings.style.header_panel + "'></ul>"));  $this.append($("<div class='" + settings.style.content_panel + "'></div>"));  if (settings.data) {   if (typeof settings.data === 'string') {   settings.data = $.parseJSON(settings.data);   }   $.each(settings.data, function () {   $this.tabs("add", this);   });  }  }); }, add: function (tab) {  var $this = $(this);  var settings = $this.data("tw.tabs");  var headers = $this.find("." + settings.style.header_panel);  var contents = $this.find("." + settings.style.content_panel);  if (headers.find("[data-tab='" + tab.id + "']").length == 0) {  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>");  if (tab.canClose) {   var close = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_close + "'></i>");   close.click(function () {   $this.tabs("remove", tab.id);   });   header.append(close);  }  header.data("tw.tab", tab);  header.click(function () {   $this.tabs("select", tab);  });  headers.append(header);  var content = $("<div class='" + settings.style.content + "' data-tab='" + tab.id + "'></div>");  if (settings.type == "iframe") {   content.append("<iframe src='" + tab.url + "?target_id=" + tab.id + "'></iframe>");  } else if (settings.type == "ajax"){   $.ajax({   url: tab.url,   type: "post",   async: false,   data: { target_id: tab.id },   success: function (result) {    content.html(result);   }   });  } else {   content.html(tab.content);  }  contents.append(content);  if (tab.selected) {   $this.tabs("select", tab);  }  } else {  $this.tabs("select", tab);  } }, select: function (tab) {  var $this = $(this);  var settings = $this.data("tw.tabs");  $this.find("." + settings.style.selected).removeClass(settings.style.selected);  if (typeof tab == "object") {  $this.find("[data-tab='" + tab.id + "']").addClass(settings.style.selected);  } else {  $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected);  $this.find("." + settings.style.content).eq(tab).addClass(settings.style.selected);  }  if (settings.onchanged) {  settings.onchanged(tab);  } }, refresh: function () {  var $this = $(this);  var selected = $this.find("." + settings.style.selected);  var tab = $this.find("." + settings.style.header).data("tw.tab");  if (settings.type == "iframe") {  selected.find("iframe").attr('src', tab.url + "?target_id=" + tab.id);  } else if (settings.type == "ajax") {  $.ajax({   url: tab.url,   type: "post",   async: false,   data: { target_id: tab.id },   success: function (result) {   content.html(result);   }  });  } else {  content.html(tab.content);  } }, remove: function (id) {  var $this = $(this);  var settings = $this.data("tw.tabs");  var tab = $this.find("[data-tab='" + id + "']");  if (tab.find("." + settings.style.selected)) {  var index = tab.eq(0).index() - 1;  $this.tabs("select", index);  }  tab.remove(); }, destroy: function (options) {  return $(this).each(function () {  var $this = $(this);  $this.removeData('tabs');  }); } } $.fn.tabs = 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.tabs');  return this; } return method.apply(this, args); }})(jQuery);

.tabs { width:100%; height:100%;} .tabs .tab-headers { margin:0; padding:0 10px; height:40px; list-style:none; background:#f5f5f5; border-bottom:1px solid #ccc; } .tabs .tab-headers .tab-header {  float:left;  height:30px;  font-size:12px;  padding:7px 15px 0;  margin-top:10px;  margin-right:5px;  border:1px solid #ccc;  border-bottom:none;  position:relative;  cursor:pointer; }  .tabs .tab-headers .tab-header:hover {  background:#ccc;  color:#0094ff;  }  .tabs .tab-headers .tab-header.selected {  background:#fff;  border:none;  cursor:default;  padding-top:5px;  margin-left:1px;  margin-right:6px;  border-top:3px solid #0094ff;  }  .tabs .tab-headers .tab-header .tab-title {  margin-left:5px;  }  .tabs .tab-headers .tab-header .fa-close {  position:relative;  right:-6px;  top:0;  }  .tabs .tab-headers .tab-header .tab-close:hover {   color:#f00;   cursor:pointer;  } .tabs .tab-contents { width: 100%; height: calc(100% - 40px); } .tabs .tab-contents .tab-content {  display:none; }  .tabs .tab-contents .tab-content.selected {  display: block;  width: 100%;  height: 100%;  overflow: hidden;  }  .tabs .tab-contents .tab-content.selected iframe {   width: 100%;   height: 100%;   border: none;  }