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)例子

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

//这个里面的内容

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

//

<script type="text/javascript">

$(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:

<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
ul,li{
list-style: none;
}
.tabBox{
width:400px;
height:500px;
}
.tabBox2{
width:400px;
height:500px;
}
.tabBar{
width:100%;
height:60px;
border:1px solid #ccc;
}
.tabBar li{
float:left;
width:33.33%;
height:58px;
text-align: center;
line-height: 58px;
border-right:1px solid #ccc;
cursor:pointer;
}
.tabBar li.hover{
background:#ddd;
}
.tabBar li:last-child{
border-right:0;
}
.tab_conts{
width:100%;
height:440px;
border:1px solid #ccc;
border-top:0;
}
.tab_conts .tab_cont{
float:left;
width:100%;
height:100%;
display:none;
}
.tab_conts .block{
display: block;
}
</style>

html:

<div class="tabBox">
<ul class="tabBar">
<li class="hover">标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class="tab_conts">
<div class="tab_cont block">1</div>
<div class="tab_cont">2</div>
<div class="tab_cont">3</div>
</div>
</div>
<br/>
<div class="tabBox2">
<ul class="tabBar">
<li class="hover">标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class="tab_conts">
<div class="tab_cont block">1</div>
<div class="tab_cont">2</div>
<div class="tab_cont">3</div>
</div>
</div>

js:

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

//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插件之选项卡的更多相关文章

  1. jQuery插件（选项卡）

    使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(select ...

  2. 使用自定义 jQuery 插件的一个选项卡Demo

    前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...

  3. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  4. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  5. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  6. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

  7. 常用Jquery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  8. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

  9. 常用JQuery插件

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

随机推荐

  1. 关于新版OPENWRT拔PPTP的619错或PPTPD无法连接问题笔记

    旧版的openwrt要安装kmod-ipt-nethelper这个包 对于新版,如3.18或4.xx内核的ROM,要安装kmod-nf-nathelper-extra这个包

  2. mysql如何出查出最近7天，最近30天，最近n天的记录？

    已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...

  3. C# 图像处理:复制屏幕到内存中,拷屏操作

    /// <summary> /// 复制屏幕到内存中 /// </summary> /// <returns>返回内存流</returns> publi ...

  4. mp4格式(转帖加修改） 转载

    下面的软件下载地址:http://download.csdn.net/source/2607382 ftyp: 这是一个筐,可以装mdat等其他Box. 例:00 00 00 14 66 74 79 ...

  5. 解决idea控制台乱码及项目乱码

    如果控制台出现乱码,解决办法: 第1方案:.找到安装idea的路径下找idea文件下的bin中vmoptions文件,打开该文件,加上-Dfile.encoding=UTF-8 第二方案: 第3种方案 ...

  6. 学JS的心路历程-物件与原型（三）

    昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...

  7. Qt的action控件中采用默认绑定，没有connect显示绑定！！！

    使用qt创建界面时,可以选用代码设计也可以选用qt design来设计.最近看我同事的代码,以前写action都是使用connect链接槽函数的, 网上大多数人都是这样,然后我就纳闷,怎么没有conn ...

  8. js高级-函数的四种调用模式

    1.对象方法调用模式  方法内部的this指向当前调用者的对象d 定义类 (构造函数) function Dog (dogName){ //创建一个空对象   让空对象==this this.name ...

  9. js基础-数组及数据类型

    数组也是引用类型 构造函数创建数组 Object 构造函数类型(所有类型基类)   Array 构造函数类型 求幂运算符 **   2**32-1 数组容量最大 arry.length 如果减小len ...

  10. SSH 登录时出现如下错误：Disconnected:No supported authentication methods available

    SSH 登录时出现如下错误:Disconnected:No supported authentication methods available 更新时间:2017-06-07 13:26:11   ...