手把手教你开发jquery插件
I have said that i dislike jQuery UI’s unified API, so i want to
get the instance of the component after invoke like this:
$(function() {
var tabs = $("div.tabs").tabs();
// Note: Now tabs is the instance of the component
window.setTimeout(function() {
tabs.clickTab(2);
}, 2000);
});
To achieve this, i modified the plugin code:
(function($) {
function Tabs(tabs, panes) {
var that = this;
this.tabs = tabs;
this.panes = panes;
this.current = 0;
this.clickTab(0);
this.tabs.click(function() {
that.clickTab(that.tabs.index(this));
});
}
Tabs.prototype = {
clickTab: function(index) {
this.current = index;
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
};
$.fn.tabs = function() {
var tabs = this.children("ul").find("li > a");
var panes = this.children("div");
return new Tabs(tabs, panes);
};
})
Note that Tabs is defined in the self-execution function, so it will be hidden
from the outside world.
And we public the clickTab metod in the prototype. I works well.
This article is over, below is some advance topics.
====================================================
How to extend Tabs class?
It maybe a little difficult because it’s a private function.
Never mind, just change the prototype of $.fn.tabs:
(function($) {
function Tabs(tabs, panes) {
// ...
}
Tabs.prototype = {
// ...
};
$.fn.tabs = function() {
// ...
};
$.fn.tabs.prototype = Tabs.prototype;
});
We can extend the Tabs class like this:
$.fn.tabs.prototype.getLength = function() {
return this.tabs.length;
};
$(function() {
var tabs = $("div.tabs").tabs();
alert(tabs.getLength());
});
Or we can use the method introduced in jQuery core, which is described in
my last post.
(function($) {
$.fn.tabs = function() {
var tabs = this.children("ul").find("li > a");
var panes = this.children("div");
return new $.fn.tabs.prototype.init(tabs, panes);
};
$.fn.tabs.prototype = {
init: function(tabs, panes) {
var that = this;
this.tabs = tabs;
this.panes = panes;
this.current = 0;
this.clickTab(0);
this.tabs.click(function() {
that.clickTab(that.tabs.index(this));
});
},
clickTab: function(index) {
this.current = index;
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
};
$.fn.tabs.prototype.init.prototype = $.fn.tabs.prototype;
});
