您的位置：首页 > Web前端 > JQuery

jQuery插件的简要介绍。

2015-09-16 22:56 756 查看

1.jquery.extend()和jquery.fn.extend()的区别：

jquery.extend()是给jquery添加新的全局函数，即插件写完之后通过jquery.myplugin();就可以访问到我们自定义的插件。

jquery.fn.extend()是给jquery对象开发的插件，即开发后要通过$(“#div”).myplugin()访问。

2.理解jquery.extend(true,{},obj1,obj2)

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。第一个参数true表示深度扩展.(具体的可以看网上更详细的介绍)

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” }

3.例子：在开发的过程中我们经常会遇到需要弹出一个提示框，并带有确认和取消按钮，下面我们就来编写一个“callAlert”插件，带有确认和删除的回调方法。

下面就先直接上代码了：

/**
* 带取消和确认回调事件的提示框
*
*/
(function($){
$.extend({
callAlert:function(opts){
$(".cawindow").fadeIn("slow");//弹出提示框
$(".cawindow").shake(2,10,400);//下面新增的fn对象插件，可以对弹出的窗口在定义些复杂的动作。
var fn={
sure:function(){
//这个方法是留个后面用后编写自己的确认函数覆盖用的。
},
cancel:function(){
//这个方法是留个后面用后编写自己的取消函数覆盖用的。
}
}
$("#casure").unbind("click");//取消之前注册的click事件，以免重复一直注册。
$("#casure").click(function(){
if(opts.sure){
fn.sure = opts.sure;
//将用户的sure事件覆盖插件的sure事件
$(".cawindow").fadeOut("slow");
fn.sure();
//调用sure事件，此时该事件就是使用这自己写的sure事件了。
}
})
$("#cacancel").unbind("click");
$("#cacancel").click(function(){
if(opts.cancel){
fn.cancel = opts.cancel;
$(".cawindow").fadeOut("slow");
fn.cancel();
}
})

}
});

$.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {

this.each(function() {
var jqNode = $(this);
jqNode.css({position: 'relative'});
for (var x=1; x<=intShakes; x++) {
jqNode.animate({ left: (intDistance) },(((intDuration / intShakes) / 2)))
.animate({ right: (intDistance) },(((intDuration / intShakes) / 2)));
//           .animate({ left: intDistance },((intDuration/intShakes)/2)).stop()
//           .animate({ right: intDistance },((intDuration/intShakes)/2)).stop();
//          .animate({ left: 0 },(((intDuration/intShakes)/4)));
}
});
return this;
}

})(jQuery);

插件到这里就大概写完了。一般编写插件会有一个default变量，定义插件的默认变量。

var opts = .extend(,.extend({}, .fn.myplugin.defaults, options);

将该默认变量暴露出去，方便使用者更改。

$.fn.myplugin.defaults = {

speed: ‘1000’,

background: ‘yellow’

};

下面是调用插件的具体例子

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="callAlert.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div class="cawindow" style="width: 300px;z-index:999;position: fixed;top:100px;left: 500px; border:1px solid #666666;border-radius:5px;display: none;
background: none 0% 0% repeat scroll rgb(232, 223, 209);
color: brown;
border-radius: 5px;
text-align: center;
font-size: 18px;">
<%--<div class="cahead" style="width: 100%;height: 50px;">

</div>--%>
<div class="cacontent" style="width: 100%;height: 130px;line-height: 130px;">

</div>
<div class="cafooter" style="width: 100%;height: 50px;">
<button value="sure" id="casure" style="float: right;display:block;width: 50px;height: 30px;margin-right: 10px;border-radius: 5px;">关闭</button>
<%--<button value="cancel" id="cacancel" style="float: right;display:block;width: 50px;height: 30px;margin-right: 10px;">删除</button>--%>
</div>
</div>
<button id="test">测试按钮</button>
</body>
</html>

test.js

$(document).ready(function(){
$("#test").click(function(){
$.callAlert({
sure:function(){
alert("sure");
},
cancel:function(){
alert("cancel");
}
})
})
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航