手把手教你开发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;

　　});