我的Jquery笔记：插件制作与回调函数(一)
做了一个简单的插件例子，主要来学习以下功能：
1、如何建立一个jQuery插件
2、如何初始化插件，对插件中的变量进行赋值
3、如何使用回调函数返回插件执行过程中的变量
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="myplugin.js"></script>
</head>
<body>
<p class="pp1">我是红色</p>
<p class="pp2">我是绿色</p>
<p class="pp3">我是蓝色</p>
<button class="testBtn">！看我什么颜色！</button>
<script type="text/javascript">
function alertRand(data) {
alert(data);
}
$('.testBtn').click(function(event) {
$('.pp1').myplugin();//对于pp1使用的是默认的颜色，不对colour进行赋值
$('.pp2').myplugin({//对于pp2对clour赋值green，并使用回调函数
'colour': 'green'
},
function(data) {//将回调函数作为一个参数，data为myplugin插件返回的randID值，并通过调用
alertRand(data);//通过调用alertRand函数显示randID
}
);
$('.pp3').myplugin({
'colour': 'blue'
});
});
</script>
</body>
</html>myplugin.js
(function($) {
$.fn.myplugin = function(options, callback) {
var colour = null;
var obj = this;
var randID = _getRandomString(5);//获取长度为5的随机字符串
return this.each(function(index, el) {
var settings = $.extend({
colour: 'red'//默认为红色
}, options);
colour = settings.colour;//根据传入的颜色赋值给colour
obj.css('color', colour);
obj.after(//新建一个<p>来显示randID，并根据不同的颜色显示
$('<p/>')
.attr('id', randID)
.html(randID)
.css('color', colour)
);
$('#' + randID).click(function(event) {//点击新创建的<p>然后弹出对话框显示randID
alert('当前id:'+$(event.target).html()+' randID:'+randID);
});
if (typeof callback === 'function'){//判断传入的参数是否为函数，如果为函数将randID返回
callback(randID);
}
});
/*
*随机字符串函数
*return String
*/
function _getRandomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
var maxPos = $chars.length;
var pwd = '';
var i;
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
}
})(jQuery);网页完整效果
有0条评论