jQuery扩展

很多时候基于jQuery的easyui并不能满足我们，比如说IP控件。下面讲讲怎么给jQuery扩展出一个可行通用的IP控件出来。

在jQuery中通常使用$(“#id”)来获取一个dom节点，然而获取的是一个jQuery对象（$或者jQuery），并不是dom对象。所以扩展属性或者方法只需要扩展到$或者jQuery上即可。

$.extend([deep,]desObj,sourceObj1,sourceObje2...)

①、deep是bool类型，表示递归扩展，可省略。
②、把sourceObjX（desObj后面所有的参数）的属性和方法扩展到desObj
③、如果只有一个参数（如：$.extend(sourceObj)）则把sourceObj扩展到$


我们做的这个IP控件就是要给jQuery的方法扩展故使用

$.fn.extend(...)

具体扩展如下：

(function($){
    $.fn.extend({
        // 要扩展的内容
    });
});

例如我要在一个div上扩展一个叫做iptext的IP界面控件
扩展：

(function($){
    $.fn.extend({
        iptext : function() { // 画页面的代码 }
    });
});

HTML代码

<div id="ip"></div>

JavaScript代码

$("#ip").iptext();

上面简单的例子说清楚，下面就上我扩展的IP控件


扩展代码iptext.js

// 在页面加载完成后加载iptext扩展
$(function(){
    (function($){
        $.fn.extend({
            // func方法名（可省略），options传进来的参数
            iptext : function(func,options){
                if(func && typeof(func) == "string"){
                    switch(func){
                    // destroy方法，销毁iptext控件
                    case "destroy":
                        this.html("");
                        this.removeClass("ui-iptext");
                        break;
                    // getValue方法，获取iptext的值
                    case "getValue" :
                        var arr = this.find("input");
                        return arr[0].value+'.'+arr[1].value+'.'+arr[2].value+'.'+arr[3].value;
                    // 验证iptext输入内容是否合法
                    case "valid" :
                        if(this.find(".ui-iperror") || this.find(".ui-iperror").length>0) {
                            return false;
                        }
                        return true;
                    }
                    return;
                }
                if(func && typeof(func) == "object"){
                    options = func;
                }

                // 出事化ip样式
                if(!options){
                    options = {};
                }
                if(!options.height) {
                    options.height = 18;
                }
                if(!options.width) {
                    options.width = 125;
                }
                this.width(125);
                this.height(18);
                //this.css("float","left");
                this.html("<img src=\"ipbg.png\"/> <input class=\"ip1\"/> <input class=\"ip2\"/><input class=\"ip3\"/><input class=\"ip4\"/>");

                // 调节样式
                this.find("input").css("width","28px").css("outline","none");
                this.find("input").css("height",(parseInt(options.height)-2)+"px");
                this.find("input").css("position","relative").css("float","left").css("margin-left","3px").css("top",1-parseInt(options.height));
                this.find("input").first().css("margin-left","5px");
                this.find("input").last().css("width","26px");

                this.find("input").css("border","0px");
                this.addClass("ui-iptext");

                this.find("input").blur(function(e) {
                    var err = $(this).parent().find(".ui-iperror");
                    if(err && err.length>0) {
                        err.focus();
                    }
                });
                this.find("input").keydown(function(e){
                    if(e.key == 'Backspace'){
                        if((this.value+"").length == 0){
                            $(this).prev().focus();
                            return false;
                        }
                        return true;
                    }
                    if(e.key == 'Delete'){
                        return true;
                    }
                    if(e.key =='.' || e.key == 'Tab'){
                        $(this).next().focus();
                        return false;
                    }

                    if(e.key == "ArrowRight" || e.key == "ArrowDown"){
                        $(this).next().focus();
                        return false;
                    }
                    if(e.key == "ArrowLeft" || e.key == "ArrowUp"){
                        $(this).prev().focus();
                        return false;
                    }

                    value = parseInt(e.key);
                    if(isNaN(value)){
                        return false;
                    }
                    return true;
                });
                this.find("input").keyup(function(e){

                    var value = null;
                    value = parseInt(this.value);
                    if(value < 0){
                        this.value = 0;
                    }
                    if(value>255) {
                        if(options.tipStyle == "tip"){
                            $(this).css("outline","block");
                            $(this).css("border","red solid 1px");
                            $(this).addClass("ui-iperror");
                            return;
                        } else {
                            this.value=255;
                        }
                    }
                    if(options.tipStyle == "tip") {
                        $(this).removeClass("ui-iperror");
                        $(this).css("outline","none");
                        $(this).css("border","none");
                    }

                    // 不动
                    if(e.key == 'Delete'
                        ||e.key == 'Backspace' 
                        || e.key =='.' 
                        || e.key == 'Tab' 
                        || e.key == "ArrowRight" 
                        || e.key == "ArrowDown" 
                        || e.key == "ArrowLeft" 
                        || e.key == "ArrowUp"){
                        return;
                    }
                    // 移动
                    if(value>99){
                        $(this).next().focus();
                    }

                });
            }
        });
    })(jQuery);
});

HTML代码

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="iptext.js"></script>
        <script type="text/javascript">

            $(function(){
                $("#ip").iptext({tipStyle:"tip"});
            });
        </script>
    </head>
    <body>
        <div id="ip"></div>
    </body>
</html>

资源文件列表:
扩展js里面的ipbg.png：
jquery-1.8.0.min.js自己去网上下载