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

随机推荐

处理TypeError: Converting circular structure to JSON
// Demo: Circular reference var o = {}; o.o = o; // Note: cache should not be re-used by repeated ca ...
oracle 日志恢复数据
1:首先查找redo,如果redo有可供恢复的信息,就那redo中的信息进行恢复,此时一般在恢复时,类似如下:SQL> recover database;Media recovery compl ...
如何使用CBO,CBO与RULE的区别
Oracle的优化器有两种优化方式,即基于规则的优化方式(Rule-Based Optimization,简称为RBO)和基于代价的优化方式(Cost-Based Optimization,简称为CB ...
php常见排序
public function actionQuickSort(){ $arr = ['5', '4', '3', '2', '1', '0']; $quickRes = $this->quic ...
sql 求max和min，但是第二大，第二小怎么算？
利用子查询,但这样速度较慢. SELECT Baoming.id, Baoming.addtime AS '报名时间', CONCAT(Members.realname,Members.usernam ...
Docker容器管理及代码调用
这篇文章主要讲解Docker的容器管理,实现服务的部署,以Redis为例.我用的是Utuntu16.04,所以软件直接从库中下载,库中的Docker不是最新版本.但是不影响部署,如需要最新可在官网下载 ...
usb-blaster安装
插入usb-blaster后,无法安装驱动,一直显示感叹号,更新驱动后显示“文件的哈希值不在指定的目录”这样的错误提示,解决方法如下:1.Windows键+ R,输入shutdown.exe /r / ...
springboot jpa sql查询与传值
public interface ARepository extends PagingAndSortingRepository<A, APK>, JpaSpecificationExecu ...
Java读取文件时第一行出现乱码“？”问号
我们在使用Java在读取文件(txt.dat等)时,如果文件不是utf-8格式的话,读取结果会出现,中文字符变乱码的情况,所以一般在读取时转为UTF-8格式读取. 但这时会出现一种情况,第一次读取第一 ...

jquery插件之选项卡

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

随机推荐

热门专题