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

JQuery插件开发简单实例

2015-10-12 11:49 591 查看

经常使用Jquery的各种插件，却对如何开发插件一无所知，以为是一件很麻烦的事儿？其实不然，下面通过一个简单的实例，来看一下Jquery Plugin的开发。

先看DEMO：动画菜单

不用插件如何实现以上效果：

$(document).ready(function() {

$('ul#menu li:even').addClass('even');

$('ul#menu li a').mouseover(function() {

$(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });

}).mouseout(function() {

$(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });

}).click(function() {

$(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
});

});

我们希望封装成插件：

$(document).ready(function() {

$(#menu).animateMenu({
padding:20
})

});

JQuery插件结构

(function($){
//定义JQuery插件
$.fn.extend({

//插件名称
pluginname: function() {
//对选择出的每个Jquery对象执行操作
return this.each(function() {

//插件代码

});
}
});

})(jQuery);

带有选项的插件结构

(function($){
$.fn.extend({

//传递选项
pluginname: function(options) {
//默认选项
var defaults = {
padding: 20,
mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
}

var options =  $.extend(defaults, options);
return this.each(function() {
var o = options;

//插件代码
//访问选项值
alert(o.padding);

});
}
});

})(jQuery);

动画菜单插件代码

(function($){
$.fn.extend({
//插件名 - animatemenu
animateMenu: function(options) {
//默认设置
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
};

var options = $.extend(defaults, options);

return this.each(function() {
var o =options;

//当前菜单
var obj = $(this);

//所有菜单项
var items = $("li", obj);

//设置背景色
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);

//添加鼠标事件
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);

}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
});

});
}
});
})(jQuery);

全部测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function($){
$.fn.extend({
animateMenu: function(options) {
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee',
};

var options = $.extend(defaults, options);

return this.each(function() {
var o =options;
var obj = $(this);
var items = $("li", obj);

$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);

items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);

}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);

});
});
}
});
})(jQuery);

</script>

<script type="text/javascript">
$(document).ready(function() {
$('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
});
</script>
<style>
body {font-family:arial;font-style:bold}
a {color:#666; text-decoration:none}
#menu {list-style:none;width:160px;padding-left:10px;}
#menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Posts</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航