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)例子
<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
转载于:https://www.cnblogs.com/zhihou/p/8023282.html
jquery插件之选项卡相关推荐
- 动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用,淡入淡出效果(用)
代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_c ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- 自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
- 常用JQuery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- 七个帮助你处理Web页面层布局的jQuery插件
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...
- 200个 jquery插件
引用:http://paranimage.com/jquery-plugin-list/ jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其te ...
- 常用JQuery插件整理 1
常用JQuery插件整理 虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery ...
最新文章
- NA-NP-IE系列实验35:标准ACL
- Queue接口中add()与offer(),remove()与poll(),element()与peek()方法区别
- redis中KEYS替代命令
- hadoop hive集群_基于伪分布式Hadoop搭建Hive平台详细教程
- Audio-based snore detection using deep neural networks解读
- 解决自动更新时 系统提示“某些设置由你的系统管理员管理”的方法
- STM8学习笔记---IAR工程中添加文件夹
- linux mint关于web开发的相关环境配置
- MySql 数据库安装、环境变量配置 以及 本地连接
- Repeater思路整理
- fiddler html 保存,Fiddler的几个简单设置
- error:LNK2005解决
- w7系统桌面没有计算机图标不见了,win7系统桌面图标不见了怎么办?
- OpenG数组讲解之Remove Duplicates from 1D Array.vi
- 五天带你学完《计算机网络》,期末考试不挂科
- 微信公众号对接电影网站,回复名称推送电影
- 利用Landsat8数据的不同波段组合监测冰雪分布情况
- 【案例练习】17个华丽的UI效果的实现 ,激发你的创造灵感
- H3C SecPath F100 系列防火墙基本配置
- django 进阶第二天 生鲜超市学习 model
热门文章
- Tensorflow学习-工具相关
- Android实战技术:深入理解Android的RPC方式与AIDL
- 区块链基础知识系列 第二课 区块链共识算法
- linux下oracle数据库升级,Oracle数据库在LinuxAS4升级
- matlab randint函数
- 数学之美系列六 -- 图论和网络爬虫 (Web Crawlers)
- 科技论文的几种类型-如何写好科技论文之我见(二)
- 2021.02.03 Visual QA论文阅读
- 洛谷 [SDOI2009]晨跑
- 三值的排序 Sorting a Three-Valued Sequence