Jquery ui bootstrap implements custom styles and jquerybootstrap

Jquery ui bootstrap implements custom styles and jquerybootstrap

First, let's take a look at

Of course, you can customize the style as prompted by alert.

The confrim confirmation box supports callback.

Copy codeThe Code is as follows:
// Message, callback (true/false) callback function
Window. shconfirm = function (message, callback)
The callback function parameter is true/false.

Prompt invite user input box

Copy codeThe Code is as follows:
// Message prompt information, callback (msg) callback function (user input message), param: regex input Regular Expression verification, regexmsg Regular Expression Verification Failed prompt
Window. shprompt = function (message, callback, regex, regexmsg)
Here message is the prompt message *
Callback is the callback function * The callback parameter is the user-input value (userinputmsg)
The regex and regexmsg parameters are optional for user input verification. The two parameters must appear at the same time. It cannot be used separately.

Below is the implementation of js,

Currently, this is an alert prompt encapsulated by jquery ui and bootstrap.

Copy codeThe Code is as follows:
(Function (){
Var _ shconfirm = {};
Var _ shprompt = {};
// Closure 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" pai.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" pai.html (message );
$ ("# Dialogalert"). dialog ("open ");
};
// Message, callback (true/false) callback function
Window. shconfirm = function (message, callback ){
$ ("# Dialogconfirm. msgcontent" response .html (message );
$ ("# Dialogconfirm"). dialog ("open ");
_ Shconfirm. shconfirmCallBack = callback;
};
// Message prompt information, callback (msg) callback function (user input message), param: regex input Regular Expression verification, regexmsg Regular Expression Verification Failed prompt
Window. shprompt = function (message, callback, regex, regexmsg ){
$ ("# Dialogprompt. msgcontent" pai.html (message );
$ ("# Dialogprompt"). dialog ("open ");
_ Shprompt. shpromptObj = {
Callback: callback,
Regex: regex,
Regexmsg: regexmsg
};
}
})();

The following is the call code

Confirm // It is a pity that js cannot simulate the suspension of js scripts. Therefore, you can only continue the next operation using the callback function.

Copy codeThe Code is as follows:
Function ShConfirm (){
Shconfirm ("are you sure you want to do this! ", Function (result ){
If (result ){
Alert ("Click OK ");
} Else {
Alert ("click to cancel ");
}
});
}

Function ShPrompt (){
Shprompt ("1 + 1 equals a few! ", Function (text ){
Alert ("user input:" + text );
},/^ \ D {1, }$/, "enter a number! ");
}

Shalert can be used directly. It works the same as alert in js.

Copy codeThe Code is as follows:
<Input type = "button" name = "name" value = "ShAlert" onclick = "shalert ('saved successfully! '); "/>
<Input type = "button" name = "name" value = "ShConfirm" onclick = "ShConfirm ()"/>
<Input type = "button" name = "name" value = "ShPrompt" onclick = "ShPrompt ()"/>

I have already deployed the source code on Baidu online storage. You are welcome to learn and exchange the source code.

Source code

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

In fact, this control still has a reconfigurable part, such as the initialization method, which is not extracted because the task is tight, so it is used first.

These problems will be addressed during the next optimization.

The original style is like this. You can modify the referenced css to implement detailed descriptions on the demo.

The above is all the content in this article. How can this problem be solved.