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

随机推荐

[cocos2d-x]移动平台游戏开发(图)
FreeMind的.mm文件下载: http://yunpan.cn/cfL3QrrQVkVTd (提取码:a125)
ie11 调试工具不能使用
使用ie11仿真ie8测试兼容性的时候,方便调试 dom和仿真都不能用搜索 https://www.ludou.org/win7-ie-11-f12-bug.html也有相关问题安装补丁 64位的 ...
LISTVIEW显示JPEG缩略图
http://www.ctsys.cn/files/SHOW_FILES.ASPX?ID=22 许多的JPEG图片浏览器(如由我设计的<JPEG浏览缩放器>),都可以将JPEG缩略图放置到 ...
26.如何使用python操作我们自己创建的docker image呢？
因为逻辑复杂我们建个文件来 python #是单行注释 '''是多行注释或者””” 我们想使用python来操作docker 那么就要一个api https://github.com/docker ...
web自动化测试中接口测试学习笔记
一.web基础 web是实现:客户端浏览器端<—————>服务端交互的应用: web通常包含两部分:web客户端.web服务端:web客户端技术包含html.javascript.aj ...
使用pickle进行存储变量
有时候我们需要把我们的变量内容存下来,这时我们就可以用pickle来操作. 存储操作如下所示: #!/usr/bin/python # -*- coding:utf-8 -*- import pick ...
NYOJ44-子串和-（dp||思维）
题目描述: 给定一整型数列{a1,a2...,an},找出连续非空子串{ax,ax+1,...,ay},使得该子序列的和最大,其中,1<=x<=y<=n. 输入描述: 第一行是一个整 ...
led 的 platform驱动实现
http://www.linuxidc.com/Linux/2014-03/97756.htm http://blog.sina.com.cn/s/blog_6b94d5680101cn0t.html ...
centos 升级sqlite3
1.yum remove sqlite3 2. 下载: wget -O sqlite-autoconf-.tar.gz https://www.sqlite.org/2019/sqlite-autoc ...
大型运输行业实战_day13_1_定时任务spring-quartz
1.jar包拷贝quartz-2.2.3.jar包到项目 2.编写定时任务类TicketQuart.java package com.day02.sation.task; import com.da ...

jquery插件之选项卡

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

随机推荐

热门专题