The examples in this article summarize common function encapsulation for projects based on jquery. Share to everyone for your reference, specific as follows:
<reference path= "Jquery-1.8.0.min.js"/> * * div or element centered * @return/jQuery.fn.mCenterDiv = function () {This
. css ("position", "absolute");
This.css ("Border", "1px solid #ccc");
This.css ("Top", ($ (window). Height ()-this.height ())/2 + $ (window). scrolltop () + "px");
This.css ("Left", ($ (window). Width ()-this.width ())/2 + $ (window). ScrollLeft () + "px");
This.show (100);
return this;
}; * * Replace all conforming characters in the string * @param asource Source String * @param afindtext to replace the character * @param Areptext after the replacement character * @return * * Jquery.mreplaceall
= function (Asource,afindtext, areptext) {var raregexp = new RegExp (Afindtext, "G");
Return Asource.replace (Raregexp, Areptext);
}; * * To determine if object is empty, undefined or null * @param object * @return/jquery.misnull = function (obj) {if (obj = "" | | typeof (obj) = = "Undefined" | |
obj = = null) {return true;
else {return false;
}
}; * * Get URL parameter * @param name parameter * @return/jquery.mgeturlparam = function (name) {var reg = new RegExp ("(^|&)" + NAme + "= ([^&]*) (&|$)");
var r = window.location.search.substr (1). Match (REG); if (r!= null) return unescape (r[2]);
return null;
}; * * * multiplication function, used to get accurate multiplication result * @param arg1 parameter 1 * @param arg2 Parameter 2 * @return * * Jquery.maccmul = function (Arg1, arg2) {var m = 0
, S1 = arg1.tostring (), S2 = arg2.tostring (); try {m + = S1.split (".") [1].length} catch (e) {} try {m + = S2.split (".") [1].length} catch (e) {} return Number (S1.replace (".", "")) * Number (S2.replace (".", ""))/Math.pow (M)}/* * Fetch with Machine number * @param x lower limit * @param y Upper bound * @return/jquery.mgetrandom = function (x, y) {return parseint (Math.random () * (y-x
+ 1) + x);
}; * * The value is rounded (leave 2 decimal places) formatted into amount form * @param num (number or string) * @return amount format string, such as ' 1,234,567.45 '/Jquery.mformatcurrenc
y = function (num) {num = num.tostring (). Replace (/\$|\,/g, "");
if (isNaN (num)) num = "0";
Sign = (num = (num = math.abs (num)));
num = Math.floor (num * 100 + 0.50000000001);
cents = num% 100; num = Math.floor (num ). ToString ();
if (cents <) cents = "0" + cents; for (var i = 0; I < Math.floor ((Num.length-(1 + i))/3) i++) num = num.substring (0, Num.length-(4 * i + 3)) +
', ' + num.substring (Num.length-(4 * i + 3)); Return ((sign)?
": '-') + num + '. ' + cents); * * * Regular verification * @param s validation String * @param type validation type money,china,mobile etc * @return/Jquery.mcheck = function (s, type) {VA
R Objbool = false;
var objexp = ""; Switch (type) {case ' money '://amount format, the format is defined as a positive number with decimals, up to three digits after the decimal point = "^[0-9]+[\.]" Objexp [0-9]
{0,3}$ ";
Break
Case ' numletter_ '://English letters and numbers and underscores are composed of Objexp = "^[0-9a-za-z\_]+$";
Break
Case ' numletter '://English alphabet and digital composition objexp = "^[0-9a-za-z]+$";
Break
Case ' Numletterchina ':///Chinese characters, letters, numbers constitute objexp = "^[0-9a-za-z\u4e00-\u9fa5]+$";
Break Case ' email '://mail address format objexp = ' ^ ([a-za-z0-9_\.\-]) +\@ (([a-za-z0-9\-]) +\.)
+ ([a-za-z0-9]{2,4}) +$ ";
Break Case ' Tel '://fixed-line format objexp =/^ (\d2,3) | (\d{3}\-))? (0\d2,3|0\d{2,3}-)?
[1-9]\d{6,7} (\-\d{1,4})? $/;
Break
Case ' mobile '://Mobile number Objexp = "^ (13[0-9]|15[0-9]|18[0-9])" ([0-9]{8}) $ ";
Break Case ' decimal '://floating-point number objexp = ' ^[0-9]+ ([.]
[0-9]+)? $ ";
Break
Case ' URL '://url Objexp = "(http://|https://) {0,1}[\w\/\.\?\&\=]+";
Break
Case ' Date '://date yyyy-mm-dd format objexp =/^ (\d{1,4}) (-|\/) (\d{1,2}) \2 (\d{1,2}) $/;
Break
Case ' int '://integer objexp = ' ^[0-9]*[1-9][0-9]*$ ';
Break
Case ' int+ '://Positive integer containing 0 objexp = "^\\d+$";
Break Case ' int-'://Negative integer contains 0 objexp = "^ (-\\d+) | (
0+)) $ ";
Break
Case ' Chinese '://objexp =/^[\u0391-\uffe5]+$/;
Break
var re = new RegExp (OBJEXP);
if (Re.test (s)) {return true;
else {return false;
}
}; * * Get the value of the control * @param controlID control ID * @param controltype type such as Text radio * @return * * jquery.mgetvalue = function (Controli D, ControlType) {var objvalue =""; Switch (controltype) {case ' text '://text input Box ObjValue = $.trim ($ ("#" + ControlID + ""). attr ("value"));
Take the value to the left and right space break;
Case ' Radio '://Radio Box ObjValue = $ ("input[name=" + ControlID + "']:checked"). attr ("value");
Break
Case ' SELECT '://dropdown list ObjValue = $ ("#" + ControlID + ""). attr ("value");
Break Case ' checkbox '://Multiple Marquee $ ("input[name= '" + ControlID + "']:checked"). each (function () {ObjValue + = $ (this). V
Al () + ",";
});
Break
Default:break;
return objvalue;
}; * * Set the value of the control * @param controlID control ID * @param controltype type such as Text radio * @param controlvalue bound value * @return * * Jquery.mset Value = function (ControlID, ControlType, controlvalue) {switch (controltype) {case ' text '://Text input box//$ ("#tx Tuserid "). attr (" value ", ' This is bound content '); Fill content//$ ("input[name= ' radio1 '][value= ' Shanghai ')"). attr ("Checked", true); Radio Group Radio: Set value= ' Shanghai ' items as currently selected//$ ("#select1"). attr ("value", ' Portugal '); Drop down boxSelect: Set value= ' China ' items for the current selection//$ ("Input[name= ' checkbox1 '][value= ' black '],[value= ' Blue ')"). attr ("Checked", true); Multi-selection box: Sets multiple values to the current selection $ ("#" + ControlID + ""). attr ("value", controlvalue);
Fill the content break;
Case ' Radio '://Radio Box $ ("input[name=" + ControlID + "'][value= '" + Controlvalue + "']"). attr ("Checked", true);
Break
Case ' SELECT '://dropdown list $ ("#" + ControlID + ""). attr ("value", controlvalue);
Break Case ' checkbox '://Multi-selection box $ ("input[name= '" + ControlID + "'][value= '" + controlvalue + "'],[value= '" + Controlvalue + " '] "). attr (" Checked ", true);
Multi-selection box: Set multiple values to the current selected break;
Default:break;
}
}; * * Compatible with IE Firefox browser automatic jump * @param url Jump URL * @return * * jquery.mautonav = function (URL) {if ($.browser.msie) {var ref
Erlink = document.createelement (' a ');
Referlink.href = URL;
Document.body.appendChild (Referlink);
Referlink.click ();
else {location.href = URL;
}
}; * * Table Form parity row set color and move mouse line discoloration * @param table ID * @return */jquery.mtablehover = function (table) {$ ("#" + table). each (function () {var o = $ (this);
Sets the even-numbered row and odd row color O.find ("Tr:even"). CSS ("Background-color", "#EFF3FB");
O.find ("Tr:odd"). CSS ("Background-color", "#FFFFFF"); Mouse move interlace color hover usage key O.find ("Tr:not (: A)"). Hover (function () {$ (this). attr ("Bcolor", $ (this). CSS ("background-
Color "). CSS (" Background-color "," #E0E0E0 ");
The function () {$ (this). CSS ("Background-color", $ (this). attr ("Bcolor"));
});
});
}; * * GridView Alternate color mouse over color multiple * C # Get Select Value Request.Form.Get ("Chkitem") * @param objgridview ID * @return/Jquery.mgridview =
function (Objgridview) {var headcolor = {background: ' #E0ECFF ', color: ' #333 '};
var normalcolor = {background: ' #f7f6f3 '};
var altercolor = {background: ' #EDF1F8 '};
var hovercolor = {background: ' #89A5D1 '};
var selectcolor = {background: ' #ACBFDF '};
var nullcolor = {};
Get obj id var gridviewid = "#" + Objgridview; Even $ (gRidviewid + ">tbody tr:even"). CSS (NormalColor);
A (Gridviewid + ">tbody tr:first"). CSS (Nullcolor). CSS (Headcolor);
Odd $ (Gridviewid + ">tbody tr:odd"). CSS (Altercolor);
Hover $ (Gridviewid + ">tbody tr"). Click (function () {var cb = $ (this). Find ("Input:checkbox"); var CHF = typeof (Cb.attr ("checked")) = = "undefined"?
True:false;
Cb.attr ("Checked", CHF);
var expr1 = Gridviewid + ' >tbody >tr >td >input:checkbox:checked ';
var expr2 = Gridviewid + ' >tbody >tr >td >input:checkbox ';
var SelectAll = $ (expr1). Length = = $ (expr2). length;
$ (' #chkAll '). attr (' checked ', selectall);
}). Hover (function () {$ (this). CSS (Hovercolor);
The function () {$ (Gridviewid + ">tbody tr:even"). CSS (NormalColor);
$ (Gridviewid + ">tbody tr:first"). CSS (Nullcolor). CSS (Headcolor);
$ (Gridviewid + ">tbody tr:odd"). CSS (Altercolor);
}); All check $ ("#chkAll"). Click (function () {$ (gridviewid + ' >tbody >tr >td >input:checkbox:visible '). attr (' checked ', this.checked);
});
Check Status $ (Gridviewid + ' >tbody >tr >td >input:checkbox '). Click (function () {var cb = $ (this); var CHF = typeof (Cb.attr ("checked")) = = "undefined"?
True:false;
Cb.attr ("Checked", CHF);
var expr1 = Gridviewid + ' >tbody >tr >td >input:checkbox:checked ';
var expr2 = Gridviewid + ' >tbody >tr >td >input:checkbox ';
var SelectAll = $ (expr1). Length = = $ (expr2). length;
$ (' #chkAll '). attr (' checked ', selectall);
});
}; * * Screen Center display processing Progress * @param info display text * @param type mode 0 Mask 1 No mask * @param typepic picture 0:load 1:ok 2:error * @return * * JQUERY.M
Maskload = function (info, type, typepic) {var pic = "";
Switch (typepic) {case 0://loading pic = "./images/loading.gif";
Break
Case 1://OK pic = "./images/right.png";
Break
Case 2://Error pic = "./images/error.png";
Break DefauLT://any other value when pic = "./images/loading.gif";
Break } if (type = = 0) {$ ("<div class=\" Datagrid-mask\ "></div>"). CSS ({display: "Block", wid
Th: "100%", Position: "Absolute", left: "0", Top: "0", Opacity: "0.3", Height: "100%",
Filter: "Alpha (opacity=30)", Background: "#ccc"}). Appendto ("body");
}; $ ("<div class=\" datagrid-mask-msg\ "></div>"). CSS ({position: "absolute", Top: "50%", PA Dding: "12px 5px 10px 30px", Width: "Auto", Height: "16px", border: "1px solid #D1D1D1", Backgroun D: "#ffffff url (' + pic + ') no-repeat scroll 5px Center", Display: "Block", Left: ($ (document.body). Outerwi
DTH (TRUE)-190/2, Top: ($ (window). Height ()-2}). HTML (info). Appendto ("body");
};
* * Screen Center Hide processing Progress * @return/jquery.mmaskloadclose = function () {$ (". Datagrid-mask"). Remove ();
$ (". Datagrid-mask-msg"). Remove (); };
* * Control creates span as Tip tip * @param o with this * @param tip text * @param typepic picture 0:load 1:ok 2:error * @return * * Jquery.mtip
= function (o, Tip, typepic) {var pic = "";
Switch (typepic) {case 0://loading pic = "./images/loading.gif";
Break
Case 1://OK pic = "./images/right.png";
Break
Case 2://Error pic = "./images/error.png";
Break
Default://Other value pic = "./images/loading.gif";
Break
var etip = document.createelement ("span");
var ObjID = $ (o). attr ("id") + "_tipdiv";
var value = $ (o). Val ();
Absolute path var x = $ (o). Offset (). Top;
var y = $ (O). Offset (). Left;
var w = $ (o). width ();
var h = $ (o). Height ();
Etip.setattribute ("id", ObjID);
try {document.body.appendChild (etip);
catch (e) {} $ ("#" + ObjID). Hide ();
$ ("#" + ObjID). css ({top:x, left:y + W +, height:h, Position: "Absolute"}); $ ("#" + ObjID). HTML ("
<reference path= "Jquery-1.8.3.min.js"/>/************************************************************** //***************************jquery Extension ****************************//************************************ /jquery.misnull = function (obj) {if (obj = = "" | | typeof (obj) = = "Undefined" | |
obj = = null) {return true;
else {return false;
}
};
Jquery.mchecknull = function (ID, tipid, nullmess, CType) {var str = $.mgetvalue (ID, CType); var tid = ($.misnull (tipid))?
Id:tipid; var obj = ($.misnull (tipid))?
$.mtip: $.mtipcustom;
if ($.misnull (str)) {obj ("#" + Tid, nullmess, 2);
else {obj ("#" + Tid, "", 1);
}
};
Jquery.mchecknullandreg = function (ID, tipid, nullmess, Regmess, CType, rtype) {var str = $.mgetvalue (ID, CType); var tid = ($.misnull (tipid))?
Id:tipid; var obj = ($.misnull (tipid))?
$.mtip: $.mtipcustom;
if ($.misnull (str)) {obj ("#" + Tid, nullmess, 2);
}else {if ($.mcheck (str, rtype)) {obj ("#" + Tid, "", 1);
else {obj ("#" + Tid, regmess, 2);
}
}
};
Jquery.mcheck = function (s, type) {var objbool = false;
var objexp = ""; Switch (type) {case ' money '://amount format, the format is defined as a positive number with decimals, up to three digits after the decimal point = "^[0-9]+[\.]" Objexp [0-9]
{0,3}$ ";
Break
Case ' numletter_ '://English letters and numbers and underscores are composed of Objexp = "^[0-9a-za-z\_]+$";
Break
Case ' numletter '://English alphabet and digital composition objexp = "^[0-9a-za-z]+$";
Break
Case ' Numletterchina ':///Chinese characters, letters, numbers constitute objexp = "^[0-9a-za-z\u4e00-\u9fa5]+$";
Break Case ' email '://mail address format objexp = ' ^ ([a-za-z0-9_\.\-]) +\@ (([a-za-z0-9\-]) +\.)
+ ([a-za-z0-9]{2,4}) +$ ";
Break Case ' Tel '://fixed-line format objexp =/^ (\d2,3) | ( \d{3}\-))? (0\d2,3|0\d{2,3}-)?
[1-9]\d{6,7} (\-\d{1,4})? $/;
Break
Case ' mobile '://Mobile number Objexp = "^ (13[0-9]|15[0-9]|18[0-9])" ([0-9]{8}) $ ";
Break Case ' decimal '://floating-point number objexp = ' ^[0-9]+ ([.]
[0-9]+)? $ "; BReak;
Case ' URL '://url Objexp = "(http://|https://) {0,1}[\w\/\.\?\&\=]+";
Break
Case ' Date '://date yyyy-mm-dd format objexp =/^ (\d{1,4}) (-|\/) (\d{1,2}) \2 (\d{1,2}) $/;
Break
Case ' int '://integer objexp = ' ^[0-9]*[1-9][0-9]*$ ';
Break
Case ' int+ '://Positive integer containing 0 objexp = "^\\d+$";
Break Case ' int-'://Negative integer contains 0 objexp = "^ (-\\d+) | (
0+)) $ ";
Break
Case ' Chinese '://objexp =/^[\u0391-\uffe5]+$/;
Break
var re = new RegExp (OBJEXP);
if (Re.test (s)) {return true;
else {return false;
}
};
Jquery.mtip = function (o, Tip, typepic) {var pic = "";
Switch (typepic) {case 0://loading pic = "/images/publicnew/loading.gif";
Break
Case 1://OK pic = "/images/publicnew/right.png";
Break
Case 2://Error pic = "/images/publicnew/error.png";
Break
Default://Other value pic = "/images/publicnew/onload.gif";
Break } var ETip = document.createelement ("span");
var ObjID = $ (o). attr ("id") + "_tipdiv";
var value = $ (o). Val ();
Absolute path var x = $ (o). Offset (). Top;
var y = $ (O). Offset (). Left;
var w = $ (o). width ();
var h = $ (o). Height ();
Etip.setattribute ("id", ObjID);
try {document.body.appendChild (etip);
catch (e) {} $ ("#" + ObjID). Hide ();
$ ("#" + ObjID). css ({top:x, left:y + W +, height:h, Position: "Absolute"});
$ ("#" + ObjID). HTML (" "+ Tip);
$ ("#" + ObjID). Show ();
};
Jquery.mtipcustom = function (o, Tip, typepic) {var pic = "";
Switch (typepic) {case 0://loading pic = "/images/publicnew/loading.gif";
Break
Case 1://OK pic = "/images/publicnew/right.png";
Break
Case 2://Error pic = "/images/publicnew/error.png";
Break
Default://Other value pic = "/images/publicnew/onload.gif";
Break }
$("#"+ O). HTML ("
More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"
I hope this article will help you with the jquery program design.