Ein benutzerdefiniertes Dialogfeld-Steuerelement, das ich mit js/jquery_javascript-Kenntnissen geschrieben habe

Kürzlich habe ich an einem Spielprojekt gearbeitet und Bilder von Künstlern benötigt. In diesem Fall schien es schwierig zu sein, einige vorgefertigte Dialogsteuerelemente zu finden, also dachte ich darüber nach, ein universelles zu erstellen Obwohl die Steuerung nicht absolut universell ist, kann sie in meinem Projekt dennoch beliebig verwendet werden, und die Ideen können auch in anderen Projekten verwendet werden.

Veröffentlichen Sie zuerst den Hauptcode:

Kopieren Sie den Code Der Code lautet wie folgt:

//Grundlegender HTML-Inhalt des Dialogfelds, absolute Positionierung, Höhen- und Breiteneinstellungen, Hintergrundbild, Titel, zwei Schaltflächenbilder
var tdlz_dialog_content = "

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

";
//text: Titel, Typ: Dialogboxtyp, funcOK: bestimmte Ausführungsfunktion, Zeit: Countdown- oder Alarmanzeigezeit
Funktion showTdDialog(text , type, funcOK, time) {
var dialogid = "#tdlz_dialog";
$(dialogid).show(500);
$("#dialog_lb_text").html(text) ;
switch (type) {
case "show"://Ein Dialogfeld, das Informationen mit einer Schaltfläche „OK“ anzeigt und nach dem Klicken auf
$("#tdlz_dialog_cancel").hide() verschwindet.
$( "#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",
}); 🎜>break;
case „alert“://warning dialog box, verschwindet nach einiger Zeit
$("#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("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left ", "0" ");
}); wird nicht ausgeführt und verschwindet
$("# 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);
});
case "time"://Countdown Dialogfeld, zeigt den Zeit-Countdown an und verschwindet nach dessen Ende
$("#tdlz_dialog_cancel").hide();
$("#dialog_lb_text").html(text "" time);
var a = setInterval(function () {
time = parseInt (time) - 1;
if (time < 0) {
clearInterval(a);
$(dialogid).hide(500 );
}
$("#dialog_lb_text ").html(text "" time); >$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0" );
$("#tdlz_dialog_cancel").css ("margin-left", "0");
break;
}


Zusätzlich zur Verwendung der oben genannten Funktionen müssen Sie auch Folgendes tun: Das Feld wird initialisiert, um in das Dokument eingefügt und in der Mitte angezeigt zu werden




Kopieren Sie den Code


Der Code lautet wie folgt:


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

//Berechnen Sie die geeignete mittlere Position
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(); > wird wie folgt verwendet (am Beispiel des Bestätigungsdialogfelds):

Code kopieren


Der Code lautet wie folgt :


initDialog();
showTdDialog("I'm a Dialog","confirm ",function(){

console.log("Button OK Clicked! ");

});


Die Darstellung ist wie folgt: