easyui 插件开发范例--正整数字框

【Javascript】
下载
新闻
文章
easyui 插件开发范例--正整数字框

(function($) {
        //处理disabled和readonly
        function rea_dis(_this,v,p){
            return _this.each(function(){
                var opt = $.data(this,"nb_box");
                opt.options[p] = v;
                v ? opt.field.find("input").attr(p,p) : opt.field.find("input").removeAttr(p);
            });
        }
        //处理onChange
        function _change(_this,inp,v){
            var opt = $.data(_this,"nb_box").options;
            if(!inp){
                v = $.data(_this,"nb_box").options.value;//初始化时执行
                opt.originalValue = v;//存储原始值，优化作用
                $(_this).nb_box("readonly",opt.readonly);
                $(_this).nb_box("disabled",opt.disabled);
                $.data(_this,"nb_box").options.onChange.call(null,v);
            }else if(!opt.disabled){
                var max = opt.max,min = opt.min;
                max != null && v > max && (v = max);//纠正最大值
                min != null && v < min && (v = min);//纠正最小值
                inp.val(v);
                if(opt.originalValue != v){
                    $(_this).val(v);
                    opt.originalValue = v;//存储原始值，优化作用
                    $.data(_this,"nb_box").options.onChange.call(null,v);
                }
            }
        }
        $.fn.nb_box = function(obj,str){
            if(typeof obj == "string"){
                var met = $.fn.nb_box.methods[obj];
                if(met){
                    return met(this,str);//执行方法
                }
            }else{
                obj = obj||{};//兼容参数为空时
                return this.each(function(){
                    var _this = this,_data = $.data(_this,"nb_box");
                    if(_data){
                        $.extend(_data.options,obj);
                    }else{
                        var doc = $('<span class="number_box"><button type="button" class="number_but">-</button><input type="text" class="number_input" style="imeMode:disabled" /><button type="button" class="number_but">+</button></span>').insertAfter(this);
                        _data = $.data(_this,"nb_box",{options:$.extend({},$.fn.nb_box.defaults(_this),obj),field:doc});//缓存数据
                        $("button",doc).click(function(){
                            var inp = $(this).siblings("input"),v = parseInt(inp.val() || 0) + $.data(_this,"nb_box").options.step * ( $(this).text() == '-' ? -1 : 1);
                            _change(_this,inp,v);
                        });
                        $("input",doc).change(function(){
                            _change(_this,$(this),$(this).val().replace(/\D/g,""));
                        })[0].onkeyup = function(){
                            this.value = this.value.replace(/\D/g,"");
                        };
                        $(_this).hide();//本身并隐藏
                    }
                    $("input",$.data(_this,"nb_box").field).val($.data(_this,"nb_box").options.value).css("width",$.data(_this,"nb_box").options.width);//赋值和宽度
                    _change(_this);//触发onchange
                });
            }
        };
        //默认配置和从节点元素上读取配置合并
        $.fn.nb_box.defaults = function(doc){
            var t = $(doc);
            return $.extend({},{width:50,min:0,max:null,step:1,onChange:function(){},readonly:(t.attr("readonly") ? true : false),disabled:(t.attr("disabled") ? true : false),value:(t.val() || "" )});
        };
        //定义所有方法
        $.fn.nb_box.methods = {
            options:function(jq){
                return $.data(jq[0],"nb_box").options;//获取参数
            },
            readonly:function(jq,v){
                rea_dis(jq,v,"readonly");
            },
            disabled:function(jq,v){
                rea_dis(jq,v,"disabled");
            },
            destroy:function(jq){
                return jq.each(function(){
                    $.data(this,"nb_box").field.remove();
                    $(this).removeData("nb_box");
                    $(this).show();
                });
            },
            setValue:function(jq,v){
                return jq.each(function(){
                    _change(this,$.data(this,"nb_box").field.find("input"),v);//触发onchange
                });
            },
            getValue:function(jq){
                var arr = [];
                jq.each(function(){
                    arr.push($.data(this,"nb_box").options.originalValue);
                });
                return arr.join(",");
            }
        };
    })(jQuery);
使用例子：点击这里