手把手教你开发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?(来源:程序员)

posted @ 2018-05-29 10:33  雷林鹏  阅读(154)  评论(0编辑  收藏  举报