まず、カスタム プロンプト ボックスのレンダリングを見てみましょう
アラートの通常のプロンプトは、もちろんスタイルでカスタマイズできます
確認ボックスがコールバックをサポートしていることを確認
//メッセージプロンプト情報、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
このコントロールには、実際には初期化メソッドなどの再構成可能な部分があります。タスクがタイトなので、最初はこのように使用します。
これらの問題は、次の最適化で解決される予定です。
元のスタイルは次のようになります。これは、デモに詳細な手順が記載されています。
以上がこの記事の全内容です。どうですか、とてもためになります。