Small and practical digital plus and minus plug-ins (jquery plugin)

Their first jquery plugin, though small in size, has a little achievement and a further understanding of jquery.

Simple and practical digital plus and minus plug-ins, the implementation of the text box by the Add and subtract buttons to the number of changes and deletions.

：

Parameters:

Default value, maximum value, minimum value, or increase/decrease degree.

You can set parameters individually for each input, or uniformly for all input. The reference code is below:

How to use:

1. Reference CSS, JS file (remember to quote jquery.min.js)

2. Front Desk:

2.1 No parameters

<inputtype= "text"class= "Numbertext" /><Scripttype= "Text/javascript">    $(". Numbertext"). Spinner ();</Script>

2.2 Overall parameters

<inputtype= "text"class= "Numbertext"/><Scripttype= "Text/javascript">    $(". Numbertext"). Spinner ({value:1, min:0, Max: the, Step:1    });</Script>

2.3 Setting parameters individually

<inputtype= "text"class= "Numbertext"value= "One"Data-step= "1"Data-min= "0"Data-max= "Ten" /><inputtype= "text"class= "Numbertext"value= "One"Data-step= "1"Data-min= "0"/><inputtype= "text"class= "Numbertext" /><Scripttype= "Text/javascript">    $(". Numbertext"). Spinner ({value:5, min:-2, Max: the, Step:2    });</Script>

3.CSS

Span.spin-text{Display:Inline-block;Overflow:Hidden;Border:1px solid Silver;}Span.spin-text. Spin-val{Border:1px solid Silver;Border-top:None;Border-bottom:None;vertical-align:Middle;width:30px;Height:18px;text-align:Center; }Span.spin-text a{Display:Inline-block;width:20px;Height:20px;Line-height:20px;Border:None;text-align:Center;vertical-align:Middle;text-decoration:None;background:#fff;font-family:Song Body;Font-weight:Bold;font-size:14px; }span.spin-text a:hover{background:#f3f3f3; }

4.JS

/*jquery plus minus number plugin Metro-liang time: 2015-10-16 version: v1.0*//*parameter: Value: Default min: allowable minimum max: Maximum allowable value step: Increase or decrease*/; (function($) {$.fn.extend ({spinner:function(options) {return  This. each (function () {                varDefaults ={value:1, min:1, Max:100, Step:1                }; var_this = $ ( This); varopts =$.extend (defaults, options); Opts.step= _this.data ("step")! =NULL? _this.data ("Step"): Opts.step; Opts.min= _this.data ("min")! =NULL? _this.data ("Min"): opts.min; Opts.max= _this.data ("Max")! =NULL? _this.data ("Max"): Opts.max; Opts.value= _this.val ()! = ""?_this.val (): Opts.value; if(Opts.value > Opts.max | | opts.value <opts.min) {Opts.value=Opts.max; }                varContainer = $ (' <span></span> '). addclass (' Spin-text ')); varTextField = _this.addclass (' Spin-val '). Val (opts.value). CSS ("Ime-mode", "Disabled"). KeyPress (function () {                    return(/[\d]/. Test (String.fromCharCode (Event.keycode))); }). bind ("Copy cut Paste",function(e) {return false;                }); varDECREASEBTN = $ (' <a href= ' javascript:void (0) ' >-</a> '). Click (function() {ChangeValue (-1) }); varINCREASEBTN = $ (' <a href= ' javascript:void (0) ' >+</a> '). Click (function() {ChangeValue (1) });                Textfield.before (DECREASEBTN). After (INCREASEBTN);                Textfield.add (INCREASEBTN). Add (DECREASEBTN). Wrapall (container); functionChangeValue (d) {varValue =parseint (Textfield.val ()); if(IsNaN (value)) {Value=opts.min; }                    var_val = value + D *Opts.step; if(_val <= opts.max && _val >=opts.min) {value=_val;                } textfield.val (value);        }            }); }    });}) (jQuery);

Small and practical digital plus and minus plug-ins (jquery plugin)