关于jQuery写插件及其演示

页面导航:首页 > 网络编程 > JavaScript > 关于jQuery写插件及其演示

关于jQuery写插件及其演示

来源: 作者: 时间:2016-02-01 09:32 【

关于写jQuery插件是很有必要的,这是前端学习当中必须经过的一个过程对于初次写插件先想清楚原理(function($){$ fn yourName = function(options){ 各种属性、参数}var options = $ extend(defaul

关于写jQuery插件是很有必要的,这是前端学习当中必须经过的一个过程

 

 

对于初次写插件先想清楚原理
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

 

这是一个基础的模板

 

其中的var options = $.extend(defaults, options);

 

1.$.extend()方法

$.extend()方法在JQuery中有两个用法,第一次是扩展方法,

第二个方法是

jQuery.extend([deep], target, object1, [objectN])

返回值:Object

把2个对象合并得到新的target,deep是可选的(递归合并)

合并 settings 和 options,修改并返回 settings。

jQuery 代码:
var settings = { validate: false, limit: 5, name: foo };
var options = { validate: true, name: bar };
jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: bar }

描述:

合并 defaults 和 options, 不修改 defaults。

jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: foo };
var options = { validate: true, name: bar };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: bar }
empty == { validate: true, limit: 5, name: bar }

2中扩展:

第一种,看代码

view source print?
$(function(){
jQuery.extend({
modalshow: function (options) {
var defaults = {
triggerID: 'LoginShow',
callback: function () { }
}
       
//这里是$.extend的第二种用法
       var opts = $.extend({},defaults, options);
if ($(# + opts.triggerID)[0] == null) {
var $triggerBTN = $('');
$triggerBTN.bind(click, function () {
alert(opts.triggerID);
});
$(body).append($triggerBTN);
} else {
$(# + opts.triggerID).bind(click, function () {
alert(opts.triggerID);
})
}
}
});
$.modalshow();//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成
})

第二种扩展

view source print?
$(function(){
jQuery.fn.extend({
modalshow: function (options) {
var defaults = {
//这里的this是JQuery对象
triggerID: this.attr(id),
callback: function () { }
}
      
//这里是$.extend的第二种用法
       var opts = $.extend(defaults, options);
$(# + opts.triggerID).bind(click, function () {
alert(opts.triggerID);
})
}
});
$(#loginShow).modalshow();//这里是调用的地方,这里需要先在HTML中加入元素
})


我在这里写了一个比较完整的插件是关于选项卡的 //这个是文件 我写的插件时引入的Tab.js




<script type=text/javascript src=Jquery.js></script>
<script type=text/javascript src=Tab.js></script>




 


AAA

BBB

CCC



<script type=text/javascript>
$(document).ready(function() {
$('.tabs').myTab({
operate:'mouver',
auto:false,
time:1000,
delay:true,
delaytime:0
})
//利用闭包的原理,对于myTab函数中的一些元素进行初始化
});
</script>








//下面的是Tab.js文件注释我写的比前清楚了



/***
* 标题:选项卡插件
* 编写时间:2015年7月14号
* 作者:Helios
* 邮箱:
***/








;(function($){
$.fn.myTab=function(options){
return this.each(function(){
var defaults={
operate: 'click',
auto: true,
time: 4000,
delay: true,
delayTime: 500
}


var opts = $.extend(defaults, options), //这里面两个参数的顺序不能改变,因为后面的那个时不会被覆盖掉的
//$.extend(defaults, options);表示的是如果options中的参数总是有值的话,那么options中的值将会代替defaults中的值
//如果options参数传入的值为空,那么就可以使用默认设置的值。
self = $(this), //获取当前的tabs
items = self.children('ul.menu').children('li'), //获取上面的是那三个
tabBox = self.children('div.main'), //获取到了main这个节点
tabBoxItems = tabBox.children('div'), // 获取mian下面的div
timer; //设置了一个定时器


var tabHandle = function(index){ //这是进行函数对选中的li和对应的div进行变换
items.siblings('li').removeClass('on').end().eq(index).addClass('on');
tabBoxItems.siblings().hide().end().eq(index).show();
//end()函数的用法,就是结束对当前节点的操作继续对以前的那个节点继续操作
},


delay = function(elem){ //这个延时函数
opts.delay ? setTimeout(function(){tabHandle(elem);},opts.delaytime) :tabHandle(elem);
},
start = function(){ //开始函数 如果参数设置了自动 就执行下面的第二行代码,如果没有设置的话就开启了定时器
if(!opts.auto) return ;
setInterval(autoRun,opts.time);


},
autoRun =function(){ //自动播放函数
var on = self.find('li.on'), //获取当前on所在的li
firstItem = items.eq(0),//设置默认第一个li
len = items.length, //
index = on.index()+1,
item = index ===len ? firstItem : on.next('li'), //当前的索引如果等于li的总长度就返回默认的第一个,如果不是就是下一个
i = index ===len ? 0 : index; // 如果播放到了最后一个就跳转到第一个




on.removeClass('on'); //移除当前li上面的样式
item.addClass('on'); //把该选中的增加样式
tabBoxItems.siblings().hide().end().eq(index).show(); // 更换div中的内容 和tabHandle 执行一样的操作


}
//bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
//第一个参数传递事件,第二个参数还改事件对应的函数
items.bind(opts.operate, function () {
var index = items.index($(this));
delay(index)
});


if (opts.auto) { //如果设置了auto的话判断成功
start();
self.hover(function () {
clearInterval(timer);
timer = undefined;
}, function () {
start();
})
}
})
}
})(jQuery);



 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<