对象级别插件的开发（如何调用jQuery插件学习第十六天）

对象级别的插件开发：

（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>