Step by step to create a jQuery tabs plugin - 3
6154 단어 jquery
var tabs = $("div.tabs").tabs({
"openEvent": "mouseover",
"disabled": [1, 2],
"current": 3
});
These options are borrowed from jQuery UITabs :
openEvent:(String,"click")
The type of event to be used for selecting a tab.
disabled:(Array,[])
An array containing the position of the tabs (zero-based index) that should be disabled on initialization.
current:(Number,0)
Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.
The plugin code:
(function($) {
function Tabs(tabs, panes, options) {
var that = this;
this.options = {
"openEvent": "mouseover",
"disabled": [],
"current": 0
};
$.extend(this.options, options);
this.tabs = tabs.removeClass("current");
this.panes = panes.hide();
this.current = this.options.current;
this.openTab(this.current);
this.tabs[this.options.openEvent](function() {
that.openTab(that.tabs.index(this));
});
}
Tabs.prototype = {
openTab: function(index) {
this.current = index;
if (this.current !== -1 && $.inArray(this.current, this.options.disabled) === -1) {
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
}
};
$.fn.tabs = function(options) {
var tabs = this.children("ul").find("li > a");
var panes = this.children("div");
return new Tabs(tabs, panes, options);
};
})(jQuery);
Second, add some events to the plugin like this:
var tabs = $("div.tabs").tabs({
"openEvent": "mouseover",
"disabled": [1, 2],
"current": 3,
"events": {
"open": function(event, index) {
console.log("[events-open]You click tab " + index);
}
}
});
The plugin source code:
(function($) {
function Tabs(tabs, panes, options) {
var that = this;
this.options = {
"openEvent": "mouseover",
"disabled": [],
"current": 0,
"events": {}
};
$.extend(this.options, options);
this.tabs = tabs.removeClass("current");
this.panes = panes.hide();
this.current = this.options.current;
$.each(this.options.events, function(key, value) {
$(that).bind(key, value);
});
// Open current tab
this.openTab(this.current);
// Register open tab event
this.tabs[this.options.openEvent](function() {
that.openTab(that.tabs.index(this));
});
}
Tabs.prototype = {
openTab: function(index) {
this.current = index;
if (this.current !== -1 && $.inArray(this.current, this.options.disabled) === -1) {
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
$(this).trigger("open", [this.current]);
}
}
};
$.fn.tabs = function(options) {
var tabs = this.children("ul").find("li > a");
var panes = this.children("div");
return new Tabs(tabs, panes, options);
};
})(jQuery);
The result:
[events-open]You click tab 3
[events-open]You click tab 4
[events-open]You click tab 0
Notice: In this section, we bind event to a JavaScript object not the jQuery object,which i have mentioned in my last article .
Third, add some methods so that we can invoke like this:
tabs.bind("open", function(event, index) {
console.log("[bind-open]You click tab " + index);
});
Source code:
Tabs.prototype = {
openTab: function(index) {
// ...
},
bind: function(name, fn) {
$(this).bind(name, fn);
}
};
The result:
[events-open]You click tab 3
[events-open]You click tab 4
[bind-open]You click tab 4
[events-open]You click tab 3
[bind-open]You click tab 3
[events-open]You click tab 0
[bind-open]You click tab 0
Well, this series of tutorials has been finished. Pretty simple, isn’t it?
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.