Home  >  Article  >  php教程  >  Implementing Tabs tab custom plug-in based on jQuery

Implementing Tabs tab custom plug-in based on jQuery

高洛峰
高洛峰Original
2016-12-06 13:25:181265browse

No matter how many controls I found online, the functions were not satisfactory, so I had to write it myself.

Many people need to use the Tabs plug-in, and there are many examples on the Internet, but either the style does not match or the use is not used (my own writing may not be better than others, but I love it when I use it smoothly)

I will post it directly below Code, don’t comment if you don’t like it:

(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=&#39;" + settings.style.header_panel + "&#39;></ul>"));
  $this.append($("<div class=&#39;" + settings.style.content_panel + "&#39;></div>"));
  if (settings.data) {
   if (typeof settings.data === &#39;string&#39;) {
   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=&#39;" + tab.id + "&#39;]").length == 0) {
  var header = $("<li class=&#39;" + settings.style.header + "&#39; data-tab=&#39;" + tab.id + "&#39;>" +
   "<i class=&#39;" + settings.style.icon_base + "" + tab.icon + "&#39;></i>" +
   "<span class=&#39;tab-title&#39;>" + tab.name + "</span></li>");
  if (tab.canClose) {
   var close = $("<i class=&#39;" + settings.style.icon_base + "" + settings.style.icon_close + "&#39;></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=&#39;" + settings.style.content + "&#39; data-tab=&#39;" + tab.id + "&#39;></div>");
  if (settings.type == "iframe") {
   content.append("<iframe src=&#39;" + tab.url + "?target_id=" + tab.id + "&#39;></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=&#39;" + tab.id + "&#39;]").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(&#39;src&#39;, 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=&#39;" + id + "&#39;]");
  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(&#39;tabs&#39;);
  });
 }
 }
 $.fn.tabs = function () {
 var method = arguments[0];
 var args = arguments;
 if (typeof (method) == &#39;object&#39; || !method) {
  method = methods.init;
 } else if (methods[method]) {
  method = methods[method];
  args = $.makeArray(arguments).slice(1);
 } else {
  $.error(&#39;Method &#39; + method + &#39; does not exist on tw.tabs&#39;);
  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;
  }


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn