[JQ权威指南]对象级别插件的开发

(1)功能描述
在列表

元素中，鼠标在表项
元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项
选中的背景色，
(2)搭建框架
新建一个JS文件，命名为jquery.lifocuscolor.js,并在文件中使用$.fn.extend()方法完成框架的搭建

/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：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;

            $(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)引用插件

<!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">
<head>
    <title>编写一个对象级别的插件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Plugin/jquery.lifocuscolor.js">
    </script>
    <style type="text/css">
           body{font-size:12px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
           .divFrame .divContent{padding:8px;line-height:1.6em}
           .divFrame .divContent ul{padding:0px;margin:0px;list-style-type:none}
           .divFrame .divContent ul li span{margin-right:20px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#u1").focusColor("red");//调用自定义的插件
        })
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              对象级别的插件
         </div>
         <div class="divContent">
              <ul id="u1">
                  <li><span>张三</span><span>男</span></li>
                  <li><span>李四</span><span>女</span></li>
                  <li><span>王五</span><span>男</span></li>
              </ul>
         </div>
     </div>

</body>
</html>

(5)页面效果

这里写图片描述

原文地址：https://david.blog.csdn.net

[JQ权威指南]对象级别插件的开发

相关推荐