Un contrôle de boîte de dialogue personnalisé écrit par moi-même en utilisant les compétences js/jquery_javascript

Récemment, je travaillais sur un projet de jeu. De nombreuses boîtes de dialogue étaient nécessaires dans le projet, et des images réalisées par des artistes étaient nécessaires. Dans ce cas, il semblait difficile de trouver des commandes de dialogue toutes faites, j'ai donc pensé à en créer une universelle. moi-même. Bien que le contrôle ne soit pas absolument universel, il peut toujours être utilisé à volonté dans mon projet, et les idées peuvent également être utilisées dans d'autres projets.

Publiez d'abord le code principal :

Copiez le code Le code est le suivant :

//Contenu HTML de base de la boîte de dialogue, positionnement absolu, paramètres de hauteur et de largeur, image d'arrière-plan, titre, deux images de boutons
var tdlz_dialog_content = "

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

";
//text : titre, type : type de boîte de dialogue, funcOK : fonction d'exécution déterminée, heure : compte à rebours ou durée d'affichage de l'alerte
fonction showTdDialog(text , type, funcOK, time) {
var dialogid = "#tdlz_dialog"
$(dialogid).show(500>$("#dialog_lb_text").html(text) ;
switch (type) {
case "show"://Une boîte de dialogue qui affiche des informations, avec un bouton OK, et disparaît après avoir cliqué sur
$("#tdlz_dialog_cancel").hide();
$( "#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$( "#tdlz_dialog_ok") .css("marge-droite", "0");
$("#tdlz_dialog_cancel").css("marge-gauche", "0"); 🎜>break;
case "alert"://boîte de dialogue d'avertissement, disparaît après un certain temps
$("#tdlz_dialog_cancel").hide();
$("#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("marge-droite", "0");
$("#tdlz_dialog_cancel").css("marge-gauche). ", "0" ");
});
break;
case "confirm"://boîte de dialogue de confirmation avec un bouton de confirmation et d'annulation, la fonction sera exécutée, sinon elle sera exécutée. ne sera pas exécuté et disparaîtra
$("# 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)
},

}); >$("#tdlz_dialog_cancel").click(function ( ) {
$(dialogid).hide(500);
});
break; boîte de dialogue, affiche le compte à rebours et disparaît une fois terminé
$("#tdlz_dialog_cancel").hide();
$("#dialog_lb_text").html(text "" time); a = setInterval(function () {
time = parseInt (time) - 1;
if (time < 0) {
clearInterval(a);
$(dialogid).hide(500 );
}
$("#dialog_lb_text ").html(text "" time);
$("#tdlz_dialog_ok").unbind(); >$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0" );
$("#tdlz_dialog_cancel").css ("marge-gauche", "0");
break
}
}

En plus d'utiliser les fonctions ci-dessus, vous devez également La case est initialisée pour être insérée dans le document et affichée au centre




Copier le code


Le code est le suivant :

function initDialog() {
$("body").before(tdlz_dialog_content);

//Calculer le position médiane appropriéevar 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(); >

s'utilise comme suit (en prenant comme exemple la boîte de dialogue de confirmation) :

Copier le code


Le code est le suivant :


initDialog();
showTdDialog("Je suis un dialogue",confirm ",function(){

console.log("Bouton OK cliqué ! ");

});
Le rendu est le suivant :