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

2020-05-24 21:38:05易采站长站整理

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

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",