How jquery encapsulates the input box plugin _jquery

Objective

In the development of large-scale projects, plug-in is a trend, the similar multiple use of things packaged into a common plug-in, to improve development efficiency. When other developers invoke Plug-ins, it takes a simple one or two lines of code to achieve very complex content or effects.

In this section I will share with you how I encapsulate an input box plugin.

"Rendering Analysis"

(1) Default display: The border is gray, the middle has input hint information

(2) Get focus: The border is blue, no input content when there is input message, the input content when the middle display input

(3) Loss of focus: Enter the correct border into a light green, and have a √ error, the border red, and there is an X

"Functional Analysis"

Private method: Not external embodiment, plug-in internal call itself;

Public methods: externally provided interfaces that other developers can call

(1) Drawing the DOM (Private method): Based on the HTML structure in the rendering analysis, it is dynamically plotted using jquery.

(2) Focus event (Private method): To the input box binding into the move out of events, different state input boxes should make different rendering.

(3) legality test (private method): According to the input content, verify the legitimacy of the input, and give a hint.

(4) Length check (private method): According to the input, verify the length of the input, and give tips.

(5) Status Show (Private method): According to the results of the checksum (right, wrong, lose focus, get focus), show different states

(6) Set Size (public method): Other developers can change the size of the input box by this method as needed

(7) Gray function (public method): Sometimes we need to put the input box gray, prohibit users to change their values.

(8) Value acquisition (public method): input box The most important is of course the value inside, this method must be provided to other developers to call it.

(9) Value Reset (Public method): Most of the time, we need to give the input box to the initial value, such as just enter the page, so this method is also necessary.

(10) Default value (public method): Called when other developers need to customize the input box.

"Development Steps"

(1) Draw a simple DOM

Before we encapsulate a component, we'd better write out its HTML structure, which is good for the quick layout when we encapsulate it. Depending on the requirements above, its DOM structure is as follows:

<div class= "Input_container" >
<input type= "text" class= "Input_text Input_text_blur" placeholder= "" >
<div class= "Input_result" ></div>
</div>

(2) Initializing plug-ins: Storing common values and calling functions that draw the DOM structure of the input box

Initialize plug-in
init:function () {
//Common value store
var _this = this;
_this.type = _this.settings.type;
_this.spec = _this.settings.spec;
_this.length = _this.settings.length;
_this.placeholder = _this.settings.placeholder;
_this.isrequired = _this.settings.isrequired;
Initializes the input box DOM structure
_this._initinputdom ();

(3) Initialize the input box DOM structure: using jquery to dynamically generate DOM structure, to avoid other developers to manually write, in fact, is using jquery to the first step of the three lines of HTML interface writing, write a lot, in fact, the function of a (*^__^*) ...

_initinputdom:function () {
var _this = this,
Inputcontainer = $ (' <div></div> '),
inputcontent = $ (' <input type= ' + _this.type + ' "> '),
Inputresult = $ (' <div></div> ');
Inputcontainer.addclass (' Input_container ');
Inputcontent.addclass (' Input_text input_text_blur ');
Inputresult.addclass (' Input_result ');
Inputcontainer.append (inputcontent);
Inputcontainer.append (Inputresult);
_this.element.append (Inputcontainer);
Log the DOM
_this.input = _this.element.find (' input ') that is currently required to operate;
_this.container = _this.element.find ('. Input_container ');
if (_this.placeholder!== null) {
//placeholder hint information
_this.input.prop (' placeholder ', _this.placeholder);
}
_this._initevent ();
},

(4) Binding event: Get focus, lose focus blur, value changes change, note that when the input box is read-only, you do not need to bind the event

Binding event
_initevent:function () {
var _this = this;
Get focus, lose focus blur, Value change
///If the input box is read-only, do not manipulate
_this.input.focus (function () {
if!$ (this). attr (' ReadOnly ')) {
_this._setstatus (this, ' focus ');
}
}). Blur (function () {
if (!$ (this). attr (' readonly ')) {
if (_this.getvalue () = = ') {
if (_this.isrequired) {
//required to lose focus
_this._setstatus (this, ' error ');
} else {
//non-required item lost focus
_this._setstatus (this, ' Blur ');
}
else {
//There is worth checking for direct value Check
if (_this._checkspec ()) {
_this._setstatus (this, ' right ');
} else {
_ This._setstatus (this, ' Error ');}}}
. KeyUp (function () {
_this._checklenght ();
});;
},

(5) Value correctness check: By reading the Rules of input box values, to verify the correctness of the input content

Verify input Box input
_checkspec:function () {
var _this = this;
Return _this.spec.test (_this.getvalue ());
},

(6) Length check: To verify the correctness of input length by reading the length rule of the input box value

Verify input box input length
_checklenght:function () {
var _this = this,
inputlength = _this.length,
//8-32 scope of this format
currentlength = _this.getvalue (). Length,
//length is within range
Lengthflag = true;
if (/^\d+-\d+$/.test (inputlength)) {
//Interval range
var valuerange = inputlength.split ('-');
The current value length is less than the set range
if (parseint (Valuerange[0], ten) > Currentlength) {
Lengthflag = false;
}
The current value is longer than the set range, and the mask input
if (Currentlength > parseint (valuerange[1)) {
_this.setvalue (_this.getvalue). SUBSTRING (0, parseint (valuerange[1]));
}
else if (/^\d+$/.test (inputlength)) {
//fixed length
//Current length is not equal to set length
if (currentlength!== parseint (inputlength ) {
Lengthflag = false;
}
}
Length is not in the interval fluttering red
if (!lengthflag) {
_this._setstatus (_this.input, ' Error ');
} else {
_this._setstatus (_this.input, ' Focus ');
}
,

(7) Set the status of the input box: According to the results of the verification, display a different state

Set the status of the input box, correct, error, lose focus, get focus
_setstatus:function (inputobj, status) {
$ (inputobj). Removeclass (' Input_text_ Focus Input_text_blur input_text_right input_text_error ');
$ (inputobj). Siblings ('. Input_result '). Removeclass (' Input_result_right input_result_error ');
if (Status = = "Right") {
$ (inputobj). addclass (' input_text_right ');
$ (inputobj). Siblings ('. Input_result '). addclass (' Input_result_right '). Text (' √ ');
else if (status = = "Error") {
$ (inputobj). addclass (' Input_text_error ')
$ (inputobj). Siblings ('. Input_ Result '). addclass (' Input_result_error '). Text (' x ');
else if (status = = "Blur") {
$ (inputobj). addclass (' Input_text_blur ');
} else if (status = = "Focus") {
$ ( inputobj). addclass (' Input_text_focus ');
}
,

(8) Set the input box size: Provides a simple interface to set the size of the input box Small,big, or digital

Set the input box size
setsize:function (size) {
var _this = this;
var scalesize = 1;
if (size = = = ' small ') {
scalesize = 0.8
} else if (size = = ' big ') {
scalesize = 1.2;
} else if (parseint (size, ten)!== NaN) {
scalesize = parseint (size, ten)
};
_this.container.css (' transform ', ' scale (' + scalesize + ') ');

(9) Ash operation: no input content

Input Box Gray
setgrey:function (flag) {
var _this = this;
if (flag) {
_this.input.prop (' readonly ', ');
} else {
_this.input.removeattr (' readonly ');
} ,

(10) Get the value, reset the value implementation

Gets the input box value
getvalue:function () {return
this.input.val ();
},
//Set Input box value
setvalue:function ( STR) {
this.input.val (str);
}

(11) Customization of the Input box interface

Default parameter
$.fn. Createinput.defaultvalue = {
//input box type: Text,password type
: "Text",
//input box rule
spec:null,
//Length
Length:null,
//Description input field
placeholder:null,//
whether must fill
isrequired:false
};

"How To call"

Generate input Box
$ ("#username"). Createinput ({
type: "Text",
Spec:/^[0-9]\d*$/,
length: ' 5-8 ',
placeholder: ' cannot be empty, can only enter a number, Length is 5-8 ',
isrequired:true
});
Call public method
var myinput = $ ("#username"). Data (' Createinput ');

The above is a small set of jquery to introduce how to encapsulate the input box plug-ins, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!