jquery UI Bootstrap implement custom style _jquery

First look at the effect chart of the custom prompt box

Alert normal hints can of course customize the style

Confrim Confirmation Box supports callback

Copy Code code as follows:

Message prompt, callback (True/false) callback function
window.shconfirm = function (message, callback)
callback function parameter is True/false

Prompt invite user input box

Copy Code code as follows:

Message hint information, callback (MSG) callback function (message entered by user), Param:regex for regular validation of input, regexmsg positive validation does not pass the prompt
Window.shprompt = function (message, callback, regex, regexmsg)
Here the message is the hint messages *
Callback for callback function * Return parameter for user input value (userinputmsg)
The regex and regexmsg 2 parameters are optional to validate user input and 2 parameters need to appear simultaneously. cannot be used alone.

The following is the implementation of JS,

Currently this is an alert hint that consolidates the jquery UI and Bootstrap itself.

Copy Code code as follows:

(function () {
var _shconfirm = {};
var _shprompt = {};
Closed packet initialization;
$ (function () {
$ ("#dialogalert"). Dialog ({
Modal:true,
Autoopen:false,
Show: {
Effect: "Blind",
duration:500
},
Hide: {
Effect: "Explode",
duration:500
},
Buttons: {
OK: function () {
$ (This). dialog ("Close");
}
}
});
$ ("#dialogconfirm"). Dialog ({
Modal:true,
Autoopen:false,
Show: {
Effect: "Slide",
duration:500
},
Hide: {
Effect: "Drop",
duration:500
},
Buttons: {
OK: function () {
_shconfirm.shconfirmcallback (TRUE);
$ (This). dialog ("Close");
},
Cancel: function () {
_shconfirm.shconfirmcallback (FALSE);
$ (This). dialog ("Close");
}
}
});
$ ("#dialogprompt"). Dialog ({
Modal:true,
Autoopen:false,
Show: {
Effect: "Blind",
duration:500
},
Hide: {
Effect: "Puff",
duration:500
},
Buttons: {
OK: function () {
if (_shprompt.shpromptobj.regex) {
if (!_shprompt.shpromptobj.regex.test ("#dialogprompt. Text"). Val ()) {
$ ("#dialogprompt. Alert. Promptmsg"). HTML (_SHPROMPT.SHPROMPTOBJ.REGEXMSG);
$ ("#dialogprompt. Alert"). Slidedown ();
Return
} else {
$ ("#dialogprompt. Alert"). Hide ();
}
}
_shprompt.shpromptobj.callback ($ ("#dialogprompt. Text"). Val ());
$ (This). dialog ("Close");
},
Cancel: function () {
_shprompt.shpromptobj.callback ($ ("#dialogprompt. Text"). Val ());
$ (This). dialog ("Close");
}
}
});
});
Window.shalert = function (message) {
$ ("#dialogalert. Msgcontent"). HTML (message);
$ ("#dialogalert"). Dialog ("Open");
};
Message prompt, callback (True/false) callback function
window.shconfirm = function (message, callback) {
$ ("#dialogconfirm. Msgcontent"). HTML (message);
$ ("#dialogconfirm"). Dialog ("Open");
_shconfirm.shconfirmcallback = callback;
};
Message hint information, callback (MSG) callback function (message entered by user), Param:regex for regular validation of input, regexmsg positive validation does not pass the prompt
Window.shprompt = function (message, callback, regex, regexmsg) {
$ ("#dialogprompt. Msgcontent"). HTML (message);
$ ("#dialogprompt"). Dialog ("Open");
_shprompt.shpromptobj = {
Callback:callback,
Regex:regex,
Regexmsg:regexmsg
};
}
})();

The following is the calling code

Confirm//More than a pity is that JS can not simulate the JS script paused so you only have to continue the next step in the form of a callback function.

Copy Code code as follows:

function Shconfirm () {
Shconfirm ("Sure you want to do this!") ", function (Result) {
if (result) {
Alert ("clicked OK");
} else {
Alert ("click Cancel");
}
});
}

function Shprompt () {
Shprompt ("Excuse me 1+1 equals a few!") ", function (text) {
Alert ("User entered:" + text);
},/^\d{1,}$/, "Please enter a number!" ");
}

Shalert just use it directly. And JS alert effect is the same.

Copy Code code as follows:

<input type= "button" name= "Name value=" Shalert "onclick=" Shalert (' Save success! '); "/>
<input type= "button" name= "name" value= "shconfirm" onclick= "shconfirm ()"/>
<input type= "button" name= "name" value= "Shprompt" onclick= "shprompt ()"/>

Source I have placed in the Baidu network, welcome you to learn to exchange.

SOURCE Download Address

Http://pan.baidu.com/s/1c00Cl36

The control actually has a reconfigurable part, such as initialization methods and so on, which are not extracted because the task is so tight that it is used first.

These issues are addressed during the next optimization.

The original style is like this, you can modify the referenced CSS to implement the demo on the detailed description.

The above is the entire content of this article, how, benefit from it.