简单例子：
1、
<html><head>
<title></title>
<style type="text/css">
.add {
background:#ccc;
}
.remove {
background:#fff;
}
</style>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
//编写简单插件
(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
$.fn.myHover = function(){
return this.each(function(){ // 为每一个使用本插件的对象都添加hover事件，this是html dom对象，返回html dom element
// return 返回到对象。
$(this).hover(function () { $(this).addClass("add");}, // $(this) 是jquery对象，返回object
function () {$(this).addClass("remove")});
})
}
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () { //在点击事件发生时使用插件。
$("#div1").myPlugin();
});
$(".hover").myHover().css("color","green"); // 直接使用，在插件中已经定义了hover事件。
// 因为myHover中已经return，返回到了jquery对象，因此可以实现jquery对象的链式操作。
// 插件应该返回一个JQuery对象，以便保证插件的可链式操作。
});
</script>
</head>
<body>
<div id="btn1" style="width:100px;height:100px;border:1px solid #000;" class="hover">btn1</div>
<br />
<div id="div1" style="width:100px;height:100px;border:1px solid #000;" class="hover">div1</div>
</body>
</html>
2、利用var obj = $.extend(default,options)将默认值和传进来的值联合在一起。
<html>
<head>
<title></title>
<style type="text/css">
.add {
background:#ccc;
}
.remove {
background:#fff;
}
</style>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
//编写简单插件
(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
$.fn.myHover = function (options1,options2) {
//在插件中定义默认值
var defaultVal = {
Text: options1,
ForeColor: options2
};
//利用$.extend()把默认值和插件参数（用户传进来的值）联合在一起
var obj = $.extend(defaultVal, options1,options2); //定义了一个扩展对象，带有默认值和传进来的值
// 获取扩展对象的值：obj.Text，obj.ForeColor
//为每一个使用本插件的对象都添加hover事件，遍历每一个符合指定条件的对象
return this.each(function () {
var selObject = $(this); //获取当前对象
var oldText = selObject.text();
var oldColor = selObject.css("color"); //获取当前对象的颜色属性
selObject.hover(
function () {
selObject.addClass("add");
selObject.text(obj.Text);
selObject.css("color", obj.ForeColor);
},
function () {
selObject.addClass("remove");
selObject.text(oldText);
selObject.css("color", oldColor);
});
})
}
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#div1").myPlugin();
});
$(".hover").myHover("xuanze1","blue").css("color",'yellow');
});
</script>
</head>
<body>
<div id="btn1" style="width:100px;height:100px;border:1px solid #000;" class="hover">btn1</div>
<br />
<div id="div1" style="width:100px;height:100px;border:1px solid #000;" class="hover">div1</div>
</body>
</html>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
