自定义jQuery插件

1、在编写对象级别的插件时,使用jQuery.fn.extend()方法进行功能扩展;针对类级别的插件,使用jQuery.extend()方法进行扩展。

2、

(1)对象级别插件开发实例:

/*------------------------------------------------------------/
功能:设置列表中表项获取鼠标焦点时的背景色
参数:li_col【可选】 鼠标所在表项行的背景色
返回:原调用对象
示例:$("ul").focusColor("red");
/------------------------------------------------------------*/
; (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);
使用:

<script type="text/javascript">
        $(function() {
            $("#u1").focusColor("red");//调用自定义的插件
        })
    </script>

              <ul id="u1">
                  <li><span>张三</span><span>男</span></li>
                  <li><span>李四</span><span>女</span></li>
                  <li><span>王五</span><span>男</span></li>
              </ul>

(2)类级别的插件实例:
/*------------------------------------------------------------/
功能:计算二个数字相加或相减的结果
参数:数字p1,p2
返回:两数相加后的结果
示例:$.AddNum(1,2);
/------------------------------------------------------------*/
; (function($) {
    $.extend({
        "addNum": function(p1, p2) {
            //如果传入的数字不为空,使用传入的数字,否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum": function(p1, p2) {
            //如果传入的数字不为空,使用传入的数字,否则为0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1 > p2) { //如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);

使用:

 <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); //调用自定义的插件计算两数之和
            $("#Button2").click(function() {
                $("#Text6").val(
                $.subNum($("#Text4").val(),
                       $("#Text5").val()));
            }) //调用自定义的插件计算两数之差
        })
    </script>
<body>
    <div class="divFrame">
         <div class="divTitle">
              类级别的插件
         </div>
         <div class="divContent">两数相加:
             <input id="Text1" type="text" class="txt" />
             +
             <input id="Text2" type="text" class="txt" />
             =
             <input id="Text3" type="text" class="txt" />
             <input id="Button1" type="button" 
                    value="等于" class="btn" />
             <hr />两数相减:
             <input id="Text4" type="text" class="txt" />
             - 
             <input id="Text5" type="text" class="txt" />
             =
             <input id="Text6" type="text" class="txt" />
             <input id="Button2" type="button" 
                    value="等于" class="btn"/>
         </div>
     </div>
    
</body>



















阅读更多

扫码向博主提问

yven_style

非学,无以致疑;非问,无以广识
去开通我的Chat快问
换一批

没有更多推荐了,返回首页