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(哈哈,自己 ...

随机推荐

关于git经常忘记的：远程仓库关联。
我们有时习惯建立好工程后再传到git上,这是时候就忘记咋弄啦, 其实,只要配置远程仓库就行: git remote add +url...具体看网上哦,这里提醒下 Git clone远程分支 Git ...
关于网上“强大的vim”矫正！！
参考链接在这里: 强大的vim配置文件,让编程更随意 - ma6174 - 博客园, http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393. ...
hdu1753-大明A+B-(java大数)
大明A+B Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
SVN Commit：将本地代码更新到服务器代码
1.点击客户端“TortoiseSVN” 选中后显示: 点击Import: 点击“ok”:
Unable to compile class for JSP
https://www.cnblogs.com/mthoutai/p/7136304.html 错误提示: The return type is incompatible with JspSource ...
dbcp第一次获取连接的时间问题
最近优化代码,发现第一次调用数据库连接时非常慢,往后便不再发生.经了解,数据库连接是用dbcp管理的,想在网上查找答案,但没有找到.在某人的提醒下决定研究源代码: 部分源代码如下(BasicDataS ...
ajax+js数据模板+后台
.net 后台,ajax+js模板引擎的数据填充,制作无刷新分页 js模板用laytpl 待续...
js setInterval参数设置
语法 setInterval(code,interval) ①可以有第三个参数,第三个参数作为第一个参数(函数)的参数 ②第一个参数是函数,有三种形式: 1.传函数名,不用加引号,也不加括号,如 s ...
sqoop2 缺少 jackson-core-asl-1.8.8.jar 和 jackson-mapper-asl-1.8.8.jar 这两个jar包
[root@spark2 client]# cat /var/log/sqoop2/localhost.2017-12-22.log 十二月 22, 2017 10:29:17 上午 org.apac ...
缩点+染色+DFS codeforce467D
题目链接:https://vjudge.net/contest/219056#problem/A 推荐博客:https://blog.csdn.net/ck_boss/article/details/ ...

jquery插件之选项卡

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

随机推荐

热门专题