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?(来源:程序员)

手把手教你开发jquery插件(三)的更多相关文章

  1. 手把手教你开发jquery插件

    I have said that i dislike jQuery UI’s unified API, so i want to get the instance of the component a ...

  2. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  3. 手把手教你开发Chrome扩展三:关于本地存储数据

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...

  4. 【转】教你开发jQuery插件

    阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...

  5. 教你开发jQuery插件

    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程&g ...

  6. 手把手教你开发chrome扩展

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...

  7. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  8. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

  9. 手把手教你开发Chrome扩展二:为html添加行为

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 上一节我们 ...

随机推荐

  1. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  2. Spring,Struts2,MyBatis,Activiti,Maven,H2,Tomcat集成(三)——H2,MyBatis集成

    1.配置h2,连接池,MyBatis Maven依赖: <!-- spring与数据库访问集成(非Hibernate) --> <dependency> <groupId ...

  3. Linux服务器---ssh登录

    Ssh登录     Ssh是建立在应用层和传输层的安全协议,专门为远程登录回话和其他网络服务提供安全性.利用ssh可以有效的防止远程管理中的信息泄露问题,同时ssh传输的数据是经过压缩的,可以加快传输 ...

  4. MongoDB— 细说操作

    基本操作 由于是开篇,就大概的说下基本的“增删查改“,我们再开一个cmd,输入mongo命令打开shell,其实这个shell就是mongodb的客户端, 同时也是一个js的编译器,默认连接的是“te ...

  5. vue v-for 和 v-if 、v-else一起使用造成的bug

    现象:导致v-else 执行v-for的length次数, 从现象看应该v-for先解析,然后将v-if和v-else包在其中 解决方案:很简单,tempalte 将v-if v-else 隔离到最外 ...

  6. mp4v2 基本知识

    mp4v2 和mp4的一些基础知识 由于项目需要做mp4文件的合成(264+aac)和mp4文件的解析: MP4文件本身就是一个容器,对于视频来说就是把不同的内容放按照mp4的规则存放而已: 如果完全 ...

  7. Python3 matplotlib的绘图函数subplot()简介

    Python3 matplotlib的绘图函数subplot()简介 一.简介 matplotlib下, 一个 Figure 对象可以包含多个子图(Axes), 可以使用 subplot() 快速绘制 ...

  8. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  9. gcc与glibc关系

    glibc是什么,以及与gcc的关系? glibc是gnu发布的libc库,也即c运行库.glibc是linux 系统中最底层的api(应用程序开发接口),几乎其它任何的运行库都会倚赖于glibc.g ...

  10. 如何写出格式优美的javadoc?

    如果你读过Java源码,那你应该已经见到了源码中优美的javadoc.在eclipse 中鼠标指向任何的公有方法都会显示出详细的描述,例如返回值.作用.异常类型等等. 本文主要来自<Thinki ...