基于jQuery實現Tabs選項卡自定義插件

更新時間：2016年11月21日 08:44:35 作者：丿風輕灬云淡

這篇文章主要為大家詳細介紹了基于jQuery實現Tabs選項卡自定義插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下

控件這東西網上找的多少都有些功能不如意的，只能自己動手來寫了。

Tabs插件很多人都需要用到，網上也有很多的例子，但是不是風格不搭調就是用著不習慣（自己寫的不一定比別人的好但用著順手In love）

下面直接貼代碼，不喜勿噴：

(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;
  }

本文已被整理到了jquery選項卡操作方法匯總、大家還可以點擊javascript選項卡操作方法匯總進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jQuery中isFunction方法的BUG修復
修復 jQuery 中 isFunction 方法的 BUG
2010-01-01
JQuery Easyui Tree的oncheck事件實現代碼
最近項目中有用到Easyui Tree，我想要checkbox的選中事件，但是api只提供了一個onClick事件，我百度、google之后，額，還是看js吧
2010-05-05
jq源碼解析之綁在$,jQuery上面的方法(實例講解)
下面小編就為大家?guī)硪黄猨q源碼解析之綁在$,jQuery上面的方法(實例講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
使用jQuery實現Web頁面換膚功能的要點解析
網頁換膚的實質就是切換CSS樣式,關鍵是給用戶做出點擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實現Web頁面換膚功能的要點解析:
2016-05-05
jQuery提示插件alertify使用指南
alertifyjs是一個非侵入式，可定制的JavaScript通知組件。包括可定制的對話框，和右下角消息彈出框。完全可定制的警報，確認和提示對話框、完全自定義的通知系統(tǒng)、回調參數處理包括“確定“和”取消“按鈕的點擊、允許對話框排隊
2015-04-04
jqueryUI tab標簽頁代碼分享
這篇文章主要為大家分享了jqueryUI tab標簽頁代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
jquery offset函數應用實例
點擊一個按鈕，然后在按鈕的下方顯示一個div,當按鈕位于角落時，div的位置設定就需要調整，不然，div將顯示不完全.我打算使用offset()方法實現此功能
2012-11-11
jquery實現可拖動DIV自定義保存到數據的實例
這篇文章主要介紹了jquery實現可拖動DIV自定義保存到數據，有需要的朋友可以參考一下
2013-11-11
jQuery tagsinput在h5郵件客戶端中應用詳解
為了保證在pc，ios，android端都可以使用，所以使用H5頁面的方式嵌入app的webview中。接下來通過本文給大家介紹jquery tagsinput在h5郵件客戶端中應用詳解，感興趣的朋友一起看看吧
2016-09-09
Jquery解析Json格式數據過程代碼
Json是一種輕量級的數據交換格式，本節(jié)為大家介紹的是Jquery解析Json格式數據的過程，很詳細，看看就知道了
2014-10-10