js/jquery_javascript スキルを使用して自分で作成したカスタム ダイアログ ボックス コントロール

最近、ゲーム プロジェクトに取り組んでいたのですが、そのプロジェクトで多くのダイアログ ボックスが必要になり、アーティストが作成した画像が必要になったので、既製のダイアログ コントロールを見つけるのが難しかったため、汎用的なダイアログ コントロールを作成することを考えました。このコントロールは完全に普遍的なものではありませんが、私のプロジェクトでは自由に使用でき、そのアイデアは他のプロジェクトでも使用できます。

最初にメイン コードを投稿します:

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

//ダイアログ ボックスの基本的な HTML コンテンツ、絶対位置、高さと幅の設定、背景画像、タイトル、2 つのボタン画像
var tdlz_dialog_content = "

• "
  "
• ;img id=' tdlz_dialog_ok' src='assets/images/queren.png'>

";
//text: タイトル、type: ダイアログ ボックスの種類、funcOK: 決定された実行関数、time: カウントダウンまたはアラート表示時間
関数showTdDialog(text , type, funcOK, time) {
var Dialogid = "#tdlz_dialog";
$(dialogid).show(500);
$("#dialog_lb_text"); ;
switch (type) {
case "show"://OK ボタンが付いた情報を表示するダイアログ ボックス。
$("#tdlz_dialog_cancel") をクリックすると非表示になります。
$( "#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$( "#tdlz_dialog_ok") .css("マージン右", "0");
$("#tdlz_dialog_cancel").css("マージン左", "0">}); 🎜>break;
case "alert"://warning ダイアログ ボックス、時間が経つと消えます
$("#tdlz_dialog_ok").unbind() ;
setTimeout(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left", "0");
$("#tdlz_dialog_ok").click(function () {
$ (dialogid). Hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left") ", "0" ");
});
break;
case "confirm"://confirm ダイアログ ボックス。確認された場合は、関数が実行されます。実行されずに消えます
$("#tdlz_dialog_cancel").show();
$("#tdlz_dialog_ok").css("margin-right", "5%"); ("#tdlz_dialog_cancel").css("margin-left ", "5%");
$("#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function) () {
funcOK();
setTimeout(function () {
$(dialogid).hide(500)
}, 1000); >$("#tdlz_dialog_cancel").click(function ( ) {
$(dialogid).hide(500);
});
break
case "time"://countdownダイアログ ボックスに時間のカウントダウンが表示され、終了すると表示されなくなります
$("#tdlz_dialog_cancel").hide();
$("#dialog_lb_text").html(text "" time); a = setInterval(function () {
time = parseInt (time) - 1;
if (time clearInterval(a);
$(dialogid).hide(500 );
}
$("#dialog_lb_text ").html(テキスト "" 時間)
$("#tdlz_dialog_ok").unbind(); >$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0" );
$("#tdlz_dialog_cancel").css ("margin-left", "0")
}
}


上記の関数の使用に加えて、次のことも行う必要があります。 ボックスはドキュメントに挿入され、中央に表示されるように初期化されます




コードをコピーします


コードは次のとおりです。


function initDialog() {

$("body").before(tdlz_dialog_content); // を計算します。適切な中間位置
var top_percent = (window.innerHeight / 4) / window.innerHeight
var left_percent = (window.innerWidth / 2 - $("#tdlz_dialog").width() / 2) / window。 innerWidth;

$("#tdlz_dialog").css("top", top_percent * 100 "% "); $("#tdlz_dialog").css("left", left_percent * 100 "%" ); $("#tdlz_dialog").css("z-index", "100" ); $("#tdlz_dialog").hide(); > は次のように使用されます (確認ダイアログボックスを例にします):

コードをコピー


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


initDialog();
showTdDialog("私はダイアログです","confirm ",function(){

console.log("ボタンがクリックされました! ");

});


レンダリングは次のとおりです: