wide/static/js/tabs.js

110 lines
3.2 KiB
JavaScript
Raw Normal View History

2014-10-20 13:32:06 +04:00
var Tabs = function (obj) {
2014-10-12 08:15:51 +04:00
obj._$tabsPanel = $(obj.id + " > .tabs-panel");
obj._$tabs = $(obj.id + " > .tabs");
2014-08-29 13:24:08 +04:00
this.obj = obj;
this._init(obj);
2014-08-27 14:10:12 +04:00
};
2014-08-29 13:24:08 +04:00
$.extend(Tabs.prototype, {
2014-10-20 13:32:06 +04:00
_init: function (obj) {
2014-08-29 13:24:08 +04:00
var _that = this;
2014-10-20 13:32:06 +04:00
obj._$tabs.on("click", "div", function (event) {
2014-08-29 13:24:08 +04:00
var id = $(this).data("index");
_that.setCurrent(id);
2014-09-19 13:58:29 +04:00
if (typeof (obj.clickAfter) === "function") {
obj.clickAfter(id);
}
2014-08-29 13:24:08 +04:00
});
2014-10-20 13:32:06 +04:00
obj._$tabs.on("click", ".ico-close", function (event) {
2014-08-29 13:24:08 +04:00
var id = $(this).parent().data("index");
_that.del(id);
event.stopPropagation();
});
},
2014-10-20 13:32:06 +04:00
_hasId: function (id) {
var $tabs = this.obj._$tabs;
if ($tabs.find("div[data-index=" + id + "]").length === 0) {
return false;
}
return true;
},
add: function (data) {
// 添加当前 tab
if (this.getCurrentId() === data.id) {
return false;
}
// 当前 tab 已经存在
if (this._hasId(data.id)) {
this.setCurrent(data.id);
return false;
}
2014-08-29 13:24:08 +04:00
var $tabsPanel = this.obj._$tabsPanel,
$tabs = this.obj._$tabs;
this.obj._prevId = $tabs.children("div.current").data("index");
$tabs.children("div").removeClass("current");
$tabsPanel.children("div").hide();
$tabs.append('<div class="current" data-index="' + data.id + '">'
2014-09-12 08:01:45 +04:00
+ data.title + '<span class="ico-close font-ico"></span></div>');
2014-08-29 13:24:08 +04:00
$tabsPanel.append('<div data-index="' + data.id + '">' + data.content
+ '</div>');
2014-10-20 13:32:06 +04:00
if (typeof data.after === 'function') {
data.after();
}
2014-08-29 13:24:08 +04:00
},
2014-10-20 13:32:06 +04:00
del: function (id) {
2014-08-29 13:24:08 +04:00
var $tabsPanel = this.obj._$tabsPanel,
$tabs = this.obj._$tabs,
prevId = undefined,
currentId = $tabs.children(".current").data("index");
$tabs.children("div[data-index='" + id + "']").remove();
$tabsPanel.children("div[data-index='" + id + "']").remove();
if (this.obj._prevId === id) {
this.obj._prevId = $tabs.children("div:first").data("index");
}
if (currentId !== id) {
prevId = currentId;
} else {
prevId = this.obj._prevId;
}
2014-09-19 13:58:29 +04:00
2014-08-29 13:24:08 +04:00
this.obj.removeAfter(id, prevId);
2014-09-12 13:50:46 +04:00
this.setCurrent(prevId);
2014-08-29 13:24:08 +04:00
},
2014-10-20 13:32:06 +04:00
getCurrentId: function () {
2014-08-29 13:24:08 +04:00
var $tabs = this.obj._$tabs;
return $tabs.children(".current").data("index");
},
2014-10-20 13:32:06 +04:00
setCurrent: function (id) {
2014-08-29 13:24:08 +04:00
if (!id) {
return false;
}
var $tabsPanel = this.obj._$tabsPanel,
$tabs = this.obj._$tabs;
var $currentTab = $tabs.children(".current");
if ($currentTab.data("index") === id) {
return false;
}
this.obj._prevId = $currentTab.data("index");
$tabs.children("div").removeClass("current");
$tabsPanel.children("div").hide();
$tabs.children("div[data-index='" + id + "']").addClass("current");
$tabsPanel.children("div[data-index='" + id + "']").show();
}
2014-08-27 14:10:12 +04:00
});