手把手教你开发jquery插件（三）

　　First, i want to add options to Tabs constructor like this:

　　var tabs = $("div.tabs").tabs({

　　"openEvent": "mouseover",

　　"disabled": [1, 2],

　　"current": 3

　　});

　　These options are borrowed from jQuery UI

　　Tabs:

　　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);

　　};

　　});

　　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);

　　};

　　});

　　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?（来源：程序员）