jquery插件之选项卡

jQuery插件编写

首先来一个简拓展jQuery对象的方法

<body >

<p>23</p>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

<script src="js/plugin.js"></script>
//这个里面的内容，首先自执行函数
(function($){
　　$.fn.extend({
　　　　"bold":function(){
　　　　　　return this.css({"fontWeight":"bold"});
　　　　}
　　});
})(jQuery)
//

<script type="text/javascript">

$(function(){

    $("p").bold();//调用

})

</script>

</body>
效果：

jQuery的插件机制

1.jQuery.extend()方法有一个重载

jQuery.extend(object) ，一个参数用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的ajax方法都是用jQuery.ajax()这样调用的，有点像"类名.方法名"静态方法的调用。一下是jQuery.extend(object)例子

//这个里面的内容

jQuery.extend({
"minValue":function(a,b){
return a<b? a:b;
},
"maxValue":function(a,b){
return a>b? a:b;
}
})

$(function(){
var i=100,j=101;
var min_v=$.minValue(i,j); //调用
console.log(min_v);
var max_v=$.maxValue(i,j);
console.log(max_v);
})
</script>

效果

100

101

重载版本：jQuery.extend([deep], target, object1, [objectN])

deep:       可选。如果设为true，则递归合并。
target:     待修改对象。
object1:   待合并到第一个对象的对象。
objectN:   可选。待合并到第一个对象的对象。

合并setting和options,修改并返回settings

var settings={validate:false,limit:5,name:"foo"};
var option={validate:true,name:"bar"};
jQuery.extend(settings,option);
console.log(settings,option);
//也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

效果

validate: true, limit: 5, name: "bar"

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object) 扩展jquery元素提供的新方法（通常用来制作插件）

jQuery.fn=jQuery.prototype={

　　init:function(selector,context){......}

}

原来jQuery.fn=jQuery.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。

我们知道扩展原型上的方法，就相当于添加“成员方法”,类的“成员方法”要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展方法，jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

自执行匿名函数/闭包

1.什么是自执行的匿名函数？

他是指：(function(){ //code })();

例如：
   bootstrap 框架中的插件写法：
   !function($){
　　//do something;
   }(jQuery);

和
(function($){
　　//do something;
})(jQuery); 是一回事。

匿名函数最大的用途就是创建闭包（这是Javascript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

例如：
     var a=1;
     (function(){
　　　　var a=100;
　　})();
      alert(a); //弹出 1

一步步封装jQuery插件

1.定一个闭包区域，防止插件”污染”
//闭包限定命名空间
;(function($){
　　//code
})(jQuery);

2.jQuery.fn.extend(object)扩展jquery方法，制作插件
//闭包限定命名空间
(function($){
　　$.fn.extend({
　　　　"tab":function(options){
　　　　　　//do something
　　　　}
　　});
})(jQuery);
第三步
;(function(options){
　　$.fn.extend({
　　　　"tab":function(options){
　　　　　　var default={
　　　　　　　　
　　　　　　};
　　　　　　var options=$.extend({},defaults,options);
　　　　　　this.each(function(){
　　　　　　　　
　　　　　　})
　　　　　　return this;
　　　　}
　　})
})(jQuery)

直接上源码

css:

html:

js:

//tab.js内部代码

;(function($){
$.fn.extend({
'tab':function(options){
console.log(options);
var defaults={
currentClass:"hover",
tabLi:".tabBar>li",
tabCont:".tab_conts>div",
eventType:"click"
//各种参数，各种属性
};
//这个是利用extend方法把 defaults对象的方法属性全部整合到 options里，
var endoptions=$.extend(defaults,options);
var _this=$(this);
_this.find(endoptions.tabLi).on(endoptions.eventType,function(){
$(this).addClass(endoptions.currentClass).siblings().removeClass(endoptions.currentClass);
var index=$(this).index();
_this.find(endoptions.tabCont).eq(index).show().siblings().hide();
})
return this;
}
})
})(jQuery)

//
<script type="text/javascript">
$(".tabBox").tab({
//各种参数，各种属性
eventType:"click"
});
$(".tabBox2").tab({
//各种参数，各种属性
eventType:"click"
});
</script>

效果图：

github演示地址：

https://ledis.github.io/tab_plugins/tab.html

带自动的选项卡

https://ledis.github.io/autoTab-plugin/tab2.html

参考地址：

http://www.cnblogs.com/joey0210/p/3408349.html

http://blog.csdn.net/chenxi1025/article/details/52222327

jquery插件之选项卡的更多相关文章

jQuery插件（选项卡）
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(select ...
使用自定义 jQuery 插件的一个选项卡Demo
前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...
使用jQuery开发tab选项卡插件（可以右键关闭多个标签）
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果二.实现思路为w ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
40个让你的网站屌到爆的jQuery插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
常用Jquery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

随机推荐

Python操作远程服务器paramiko模块介绍
paramiko模块是基于Python实现的SSH远程安全连接,可以提供在远程服务器上执行命令.上传文件到服务器或者从指定服务器下载文件的功能. paramiko模块安装方法 paramiko模块不是 ...
jQuery+php实现二级联动
public function liandong(){ $arr = Db::table("city")->where("pid=0")->sele ...
利用jQuery扩展接口为jQuery框架定义了两个自定义函数，然后调用这两个函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
8.抽象类、接口和多态.md
目录 1.抽象类 1.抽象类 2.接口和抽象类的关系 2.1实现上的区别: 22.类和接口的关系: 2.3.Java为什么只能单继承可以多实现: 2.4.接口和接口的关系: 3.多态 2.接口和抽象类 ...
Linux 安装nginx 及配置
安装openssl库 # yum install -y openssl openssl-devel 安装gcc # yum install gcc-c++ 安装 PCRE # yum ...
【C++】Mandelbrot集绘制(生成ppm文件)
曼德勃罗特集是人类有史以来做出的最奇异,最瑰丽的几何图形.曾被称为"上帝的指纹". 这个点集均出自公式:Zn+1=(Zn)^2+C.(此处Z.C均为复数)所有使得该公式无限迭代后的 ...
cdh 5.13 centos6.9安装
1.所有节点准备工作 1).关闭防火墙 2).关闭selinux 并重启系统 3).建立NTP服务器,所有数据节点每天定时同步时间. 主节点在ntp.conf中增加 restrict 192.168. ...
Ubuntu下ssh的安装
1.安装 Ubuntu缺省安装了openssh-client,,如果没有安装,可用apt-get安装上即可. 安装ssh-server sudo apt-get install openssh-ser ...
WEB 自动化思路
前期做了一个关键字驱动模型的WEB自动化项目,特意写文章归纳和总结下. 框架架构图已经实现的部分: 1. 读写excel数据模板 2.配置中心,支持properties,xml格式的配置文件 3.参 ...
ZOJ2018/4月月赛G题Traffic Light（广搜）
题意:首先T组数据,每组数据包括:第一行:一个n,m,然后下面有一个n行m列的01矩阵. 最后一行输入四个数字,分别是起点的横纵坐标,终点的横纵坐标.询问从起点到终点,最少要几步,如果到不了输出-1 ...

jquery插件之选项卡

jquery插件之选项卡的更多相关文章

随机推荐

热门专题