jquery ui bootstrap implements custom style_jquery

First take a look at the rendering of the custom prompt box

Alert ordinary prompts can of course be customized in style

confrim confirmation box supports callback

Copy code The code is as follows:

//Message prompt information, callback(true/false) callback function
window.shconfirm = function (message, callback)
The callback function parameters are true/false

prompt invitation user input box

Copy code The code is as follows:

//message prompt information, callback(msg) callback function (message input by the user), param: regex input regular verification, regexmsg regular verification failed prompt
window.shprompt = function (message, callback, regex, regexmsg)
Here message is the prompt message *
Callback is the callback function * The return parameter is the value entered by the user (userinputmsg)
The two parameters regex and regexmsg are optional and are used to verify user input. Both parameters need to appear at the same time. Cannot be used alone.

The following is the implementation of js,

Currently this is an alert prompt that integrates jquery ui and bootstrap's own encapsulation.

Copy code The code is as follows:

(function () {
    var _shconfirm = {};
    var _shprompt = {};
    //闭包初始化；
    $(function () {
        $("#dialogalert").dialog({
            modal: true,
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 500
            },
            hide: {
                effect: "explode",
                duration: 500
            },
            buttons: {
                确定: function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogconfirm").dialog({
            modal: true,
            autoOpen: false,
            show: {
                effect: "slide",
                duration: 500
            },
            hide: {
                effect: "drop",
                duration: 500
            },
            buttons: {
                确定: function () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("close");
                },
                取消: function () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogprompt").dialog({
            modal: true,
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 500
            },
            hide: {
                effect: "puff",
                duration: 500
            },
            buttons: {
                确定: 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");
                },
                取消: function () {
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("close");
                }
            }
        });
    });
    window.shalert = function (message) {
        $("#dialogalert .msgcontent").html(message);
        $("#dialogalert").dialog("open");
    };
    //message 提示的信息 ,callback(true/false)回调函数
    window.shconfirm = function (message, callback) {
        $("#dialogconfirm .msgcontent").html(message);
        $("#dialogconfirm").dialog("open");
        _shconfirm.shconfirmCallBack = callback;
    };
    //message 提示的信息 ,callback(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 正则验证不通过的提示
    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 //Unfortunately, js cannot simulate js script pause, so we can only use the callback function to continue the next step.

Copy code The code is as follows:

function ShConfirm() {
               shconfirm("Are you sure you want to do this!", function (result) {
                     if (result) {
alert("Clicked OK");
                     } else {
alert("Clicked Cancel");
                }
            });
}

function ShPrompt() {
                 shprompt("What is 1 1 equal to?", function (text) {
alert("The user entered: " text);
                }, /^d{1,}$/, "Please enter a number!");
}

Just use shalert directly. It has the same effect as js alert.

Copy code The code is as follows:

I have put the source code on Baidu Netdisk. Everyone is welcome to learn and exchange.

Source code download address

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

This control actually has reconfigurable parts, such as initialization methods, etc. These have not been extracted. Because the task is tight, I will use it like this first.

These issues will be addressed in the next optimization.

The original style is like this, which can be achieved by modifying the referenced css. There are detailed instructions in the demo.

The above is the entire content of this article. How about it, you will benefit a lot.