手把手教你开发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?(来源:程序员)
手把手教你开发jquery插件(三)的更多相关文章
- 手把手教你开发jquery插件
I have said that i dislike jQuery UI’s unified API, so i want to get the instance of the component a ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- 手把手教你开发Chrome扩展三:关于本地存储数据
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...
- 【转】教你开发jQuery插件
阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...
- 教你开发jQuery插件
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程&g ...
- 手把手教你开发chrome扩展
转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...
- 开发JQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
- 手把手教你开发Chrome扩展二:为html添加行为
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 上一节我们 ...
随机推荐
- TouchSlide触屏滑动特效插件的使用
官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...
- Spring,Struts2,MyBatis,Activiti,Maven,H2,Tomcat集成(三)——H2,MyBatis集成
1.配置h2,连接池,MyBatis Maven依赖: <!-- spring与数据库访问集成(非Hibernate) --> <dependency> <groupId ...
- Linux服务器---ssh登录
Ssh登录 Ssh是建立在应用层和传输层的安全协议,专门为远程登录回话和其他网络服务提供安全性.利用ssh可以有效的防止远程管理中的信息泄露问题,同时ssh传输的数据是经过压缩的,可以加快传输 ...
- MongoDB— 细说操作
基本操作 由于是开篇,就大概的说下基本的“增删查改“,我们再开一个cmd,输入mongo命令打开shell,其实这个shell就是mongodb的客户端, 同时也是一个js的编译器,默认连接的是“te ...
- vue v-for 和 v-if 、v-else一起使用造成的bug
现象:导致v-else 执行v-for的length次数, 从现象看应该v-for先解析,然后将v-if和v-else包在其中 解决方案:很简单,tempalte 将v-if v-else 隔离到最外 ...
- mp4v2 基本知识
mp4v2 和mp4的一些基础知识 由于项目需要做mp4文件的合成(264+aac)和mp4文件的解析: MP4文件本身就是一个容器,对于视频来说就是把不同的内容放按照mp4的规则存放而已: 如果完全 ...
- Python3 matplotlib的绘图函数subplot()简介
Python3 matplotlib的绘图函数subplot()简介 一.简介 matplotlib下, 一个 Figure 对象可以包含多个子图(Axes), 可以使用 subplot() 快速绘制 ...
- 主攻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 ...
- gcc与glibc关系
glibc是什么,以及与gcc的关系? glibc是gnu发布的libc库,也即c运行库.glibc是linux 系统中最底层的api(应用程序开发接口),几乎其它任何的运行库都会倚赖于glibc.g ...
- 如何写出格式优美的javadoc?
如果你读过Java源码,那你应该已经见到了源码中优美的javadoc.在eclipse 中鼠标指向任何的公有方法都会显示出详细的描述,例如返回值.作用.异常类型等等. 本文主要来自<Thinki ...