js/jquery_javascript 기술을 사용하여 직접 작성한 사용자 정의 대화 상자 컨트롤

최근에 게임 프로젝트를 진행하고 있었는데 프로젝트에 대화 상자가 많이 필요했고, 아티스트가 만든 그림이 필요한 경우 기성 대화 상자 컨트롤을 찾기가 어려워서 보편적인 컨트롤을 만들까 생각했습니다. 컨트롤이 완전히 보편적이지는 않지만 내 프로젝트에서는 마음대로 사용할 수 있으며 아이디어는 다른 프로젝트에서도 사용할 수 있습니다.

메인 코드 먼저 게시:

코드 복사 코드는 다음과 같습니다.

//대화상자의 기본 html 콘텐츠, 절대 위치, 높이 및 너비 설정, 배경 이미지, 제목, 두 개의 버튼 이미지
var tdlz_dialog_content = "

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

";
//text: 제목, 유형: 대화 상자 유형, funcOK: 결정된 실행 기능, 시간: 카운트다운 또는 경고 표시 시간
기능 showTdDialog(text , type, funcOK, time) {
varDialogid = "#tdlz_dialog"
$(dialogid).show(500)
$("#dialog_lb_text").html(text) ;
switch (type) {
case "show"://확인 버튼과 함께 정보를 표시하고
$("#tdlz_dialog_cancel").hide();를 클릭하면 사라지는 대화 상자입니다.
$( "#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")
}); 🎜>break;
case "alert"://경고 대화 상자, 시간이 지나면 사라짐
$("#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 () {
$ (대화상자).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(text "" 시간)
}, 1000)
$("#tdlz_dialog_ok")
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0" );
$("#tdlz_dialog_cancel").css ("margin-left", "0")
break; >
위 기능을 사용하는 것 외에도 상자가 문서에 삽입되어 중앙에 표시되도록 초기화해야 합니다.




코드 복사

코드는 다음과 같습니다.

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("확인 버튼을 클릭했습니다! "); });
렌더링은 다음과 같습니다.