Implement the Tabs tab custom plug-in based on jquery _jquery

Control this thing on the Internet to find a number of some of the features are not satisfactory, only to write their own hands.

Tabs Plug-ins Many people need to use, the Internet also has a lot of examples, but is not the style is not used to adjust (oneself write is not necessarily better than others, but with a convenient in love)

The following directly paste code, do not like to spray:

(function ($) {' Use strict '; var defaults = {type: "iframe", Onchanged:null, Style: {header_panel: "Tab-headers", Content_panel: "Tab-content
 S ", 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 + "' >&
   Lt;/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 + "" ></ifra
  Me> "); 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 $ (a). 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 to 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;
 }

This article has been sorted out to the JQuery tab operation method Summary, you can also click the JavaScript tab operation method Summary to learn.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.