对象级别的插件开发:
(1)功能描述:
在列表<ul>元素中,鼠标在表项<li>元素移动时,可以自定义其获取焦点(focus)时的背景颜色,即设置表项<li>元素选中的背景色。
(2)搭建框架:
/*
功能:设置列表中表项获取鼠标焦点时的背景色
参数:li_col[可选]鼠标所在表项行的背景色
返回:原调用对象
示例:$("ul").focusColor("red");
*/
;(function($){
$.fn.extend({
"yourPluginName":function(pram_value){
//各种默认属性或参数的设置
this.each(function(){
//插件实现的代码
})
}
})
})(jQuery);
(3)代码编写:
根据功能描述,在搭建的框架中,首先设置插件的默认属性值,由于允许用户设置自己的颜色值,因此创建一个颜色参数,并对该值进行初始化设置;同时,根据参数是否为空,赋予该参数不同的颜色值;另外设置一个变量,保存丢失焦点时的颜色值,其实现的代码如下所示:
;(function($){
$.fn.extend({
"focusColor":function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色不为空,使用设置的颜色,否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;
//遍历表项<li>中的全部元素
$(this).find("li").each(function() {
...
});
}
});
})(jQuery);
在遍历表项<li>中,需要对象编写两个事件。
一个是鼠标移入事件mouseover(),在该事件中,将传回的变量def_col值设置为对象的背景色,其代码如下:
$(this).find("li").each(function() {
$(this).mouseover(function() { //获取鼠标焦点移出事件
$(this).css("background-color", li_col); //使用设置的颜色
})
})
另一个是鼠标移出事件,mouseout(),在该事件中,将背景色还原成鼠标移入前被变量lst_col保存的颜色值,其代码如下:
$(this).find("li").each(function() {
$(this).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", li_col); //恢复原来的颜色
})
})
这两个可以进行合并,最终代码如下:
$(this).find("li").each(function() { //遍历表项<li>中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
}).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
})
在代码最后结束时,必须返回一个jQuery对象,以方便其调用对象的链写操作。因此,最后加上一行返回jQuery对象,代码如下:
;(function($) {
$.fn.extend({
"focusColor":function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色不为空,使用设置的颜色,否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;
//遍历表项<li>中的全部元素
$(this).find("li").each(function() { //遍历表项<li>中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
})
.mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
});
return $(this); //返回jQuery对象,保持链式操作
}
});
})(jQuery);
(4)引用插件:
自己编写的插件保存为JS文件后,就可以像其他插件一样,被需要使用的文件所调用。其使用方法也是一样,先引入JS文件,然后在JS代码中调用该插件中的各种方法。为了验证文件jquery.lifocuscolor.js中插件功能,新建一个HTML文件pl_LiGetFocus.html,引入该插件文件并调用该插件的方法,代码如下:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"></script>
<style type="text/css">
省略部分代码...
</style>
<script type="text/javascript">
$(function() {
$("#ul").focusColor(); //调用自定义的插件
//$("#ul").focusColor("red"); //调用自定义的插件
})
</script>
<div class="divFrame">
<div class="divTitle">
对象级别的插件
</div>
<div class="divContent">
<ul id="ul">
<li><span>张三</span><span>男</span></li>
<li><span>李四</span><span>女</span></li>
<li><span>王五</span><span>男</span></li>
</ul>
</div>
</div>