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

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2014-08-27   阅读次数: 123   查看权限: 游客查看

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);

使用例子:点击这里

关键词: easyui,插件,jquery   编辑时间: 2014-08-28 17:21:40

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐