jquery uiブートストラップはカスタムstyle_jqueryを実装します

まず、カスタム プロンプト ボックスのレンダリングを見てみましょう

アラートの通常のプロンプトは、もちろんスタイルでカスタマイズできます

確認ボックスがコールバックをサポートしていることを確認

コードをコピーします コードは次のとおりです:

//メッセージプロンプト情報、callback(true/false)コールバック関数
window.shconfirm = 関数 (メッセージ、コールバック)
コールバック関数のパラメータは true/false

プロンプト招待ユーザー入力ボックス

コードをコピーします コードは次のとおりです:

//メッセージ プロンプト情報、callback(msg) コールバック関数 (ユーザーが入力したメッセージ)、param: 正規表現入力の通常の検証、regexmsg の通常の検証に失敗したプロンプト
window.shprompt = 関数 (メッセージ、コールバック、正規表現、正規表現)
ここのメッセージはプロンプトメッセージです *
Callback はコールバック関数です ※戻りパラメータはユーザーが入力した値(userinputmsg)
2 つのパラメータ regex と regexmsg はオプションであり、両方のパラメータを同時に指定する必要があります。単独では使用できません。

以下は js の実装です。

現在、これは jquery ui とブートストラップ独自のカプセル化を統合したアラート プロンプトです。

コードをコピー コードは次のとおりです:

(関数() {
    var _shconfirm = {};
    var _shprompt = {};
    //闭包初化；
    $(関数() {
        $("#dialogalert").dialog({
            モーダル: true、
            autoOpen: false、
            表示: {
                効果: "ブラインド"、
                持続時間: 500
            }、
            非表示: {
                効果: "爆発"、
                持続時間: 500
            }、
            ボタン: {
                确定: function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogconfirm").dialog({
            モーダル: true、
            autoOpen: false、
            表示: {
                効果: 「スライド」、
                持続時間: 500
            }、
            非表示: {
                効果: "ドロップ"、
                持続時間: 500
            }、
            ボタン: {
                确定: function () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("close");
                }、
                取消: function () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("close");
                }
            }
        });
        $("#dialogprompt").dialog({
            モーダル: true、
            autoOpen: false、
            表示: {
                効果: "ブラインド"、
                持続時間: 500
            }、
            非表示: {
                効果: 「パフ」、
                持続時間: 500
            }、
            ボタン: {
                确定: function () {
                    if (_shprompt.shpromptObj.regex) {
                        if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
                            $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
                            $("#dialogprompt .alert").slideDown();
                            戻る;
                        } 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 = 関数 (メッセージ) {
        $("#dialogalert .msgcontent").html(メッセージ);
        $("#dialogalert").dialog("open");
    };
    //メッセージ 提案的情報 ,callback(true/false)回调関数
    window.shconfirm = 関数 (メッセージ、コールバック) {
        $("#dialogconfirm .msgcontent").html(メッセージ);
        $("#dialogconfirm").dialog("open");
        _shconfirm.shconfirmCallBack = コールバック;
    };
    //message 提案的情報 ,callback(msg)回调関数（用户入力的メッセージ）, param：regex 入力的正则验证，regexmsg 正则验证不通的提案
    window.shprompt = 関数 (メッセージ、コールバック、正規表現、正規表現) {
        $("#dialogprompt .msgcontent").html(メッセージ);
        $("#dialogprompt").dialog("open");
        _shprompt.shpromptObj = {
            コールバック: コールバック、
            正規表現: 正規表現、
            正規表現メッセージ: 正規表現メッセージ
        };
    }
})();

以下は呼び出しコードです

confirm //残念ながら、js は js スクリプトの一時停止をシミュレートできないため、コールバック関数を使用して次のステップに進むことしかできません。

コードをコピーします コードは次のとおりです:

関数 Shconfirm() {
shconfirm("本当にこれを実行してもよろしいですか!", function (result) {
if (結果) {
alert("OKをクリックしました");
} else {
alert("キャンセルをクリックしました");
}
});
}

関数 ShPrompt() {
shprompt("1 1 は何に等しいですか?", function (text) {
alert("ユーザーが入力した内容: " text);
}, /^d{1,}$/, "数字を入力してください!");
}

shalert を直接使用してください。 jsアラートと同じ効果があります。

コードをコピーします コードは次のとおりです:

ソース コードを Baidu Netdisk に置きましたので、どなたでも学習して交換していただけます。

ソースコードのダウンロードアドレス

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

このコントロールには、実際には初期化メソッドなどの再構成可能な部分があります。タスクがタイトなので、最初はこのように使用します。

これらの問題は、次の最適化で解決される予定です。

元のスタイルは次のようになります。これは、デモに詳細な手順が記載されています。

以上がこの記事の全内容です。どうですか、とてもためになります。