jQuery)는 jQuery 시리즈 중 하나를 확장하여 경고를 시뮬레이션합니다. (1)_jquery

렌더링

모든 코드

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

/ **
* @author xing
*/
(function($){
$.extend({
alert:function(html,callback){
varDialog=newDialog();
dialog.build('alert',callback,html);
},
confirm:function(html,callback){
varDialog=newDialog()
dialog.build ('확인',콜백,html);
}
})
var Dialog=function(){
var render={
template:'

시스템 프롬프트

작업 중 오류가 발생했습니다

< div class="btnBar">

',
templateConfirm :'

시스템 프롬프트

작업 중 오류가 발생했습니다!

< 입력 유형 ="button" value="OK" id="sure"/>

',
/**
* 필요에 따라 대화 상자 생성
* @param {Object} 유형
* @param {Object} 콜백
* @param {Object} html
*/
renderDialog: function(type,callback,html){
if(type=='alert'){
this.renderAlert(callback,html)
}else{
this.renderConfirm(콜백 ,html );
}
},
/**
* 生成alert
* @param {Object} 콜백
* @param {Object} html
*/
renderAlert:function(callback,html){
var temp=$(this.template).clone () .hide();
temp.find('div.alertHtml').html(html)
$(document.body).append(temp)
this.setPosition(temp) ;
temp.fadeIn();
this.bindEvents('alert',temp,callback)
},
/**
* 生成confirm
* @param {Object} 콜백
* @param {Object} html
*/
renderConfirm:function(콜백 ,html ){
var temp=$(this.templateConfirm).clone().hide()
temp.find('div.alertHtml').html(html)
$(document .body ).append(temp);
this.setPosition(temp);
temp.fadeIn()
this.bindEvents('confirm',temp,callback),
/**
* 대화 상자의 위치 설정
* @param {Object} el
*/
setPosition:function(el){
var width=el.width(),
height=el.height(),
pageSize=this. getPageSize( );
el.css({
top:(pageSize.h-height)/2,
left:(pageSize.w-width)/2
}); },
/**
* 바인딩 이벤트
* @param {Object} 유형
* @param {Object} el
* @param {Object} 콜백
*/
bindEvents:function(type,el,callback){
if(type=="alert"){
if($.isFunction(callback) )) {
$('#sure').click(function(){
callback();
$('div.alertParent').remove();
}); 🎜> }else{
$('#sure').click(function(){
$('div.alertParent').remove();
}); >} else{
if($.isFunction(콜백)){
$('#sure').click(function(){
콜백();
$('div.alertParent ') .remove();
});
}else{
$('#sure').click(function(){
$('div.alertParent').remove( );
});
}
$('#cancel').click(function(){
$('div.alertParent').remove();
}) ;
}
},
/**
* 페이지 크기 가져오기
*/
getPageSize:function(){
return {
w:document.documentElement.clientWidth,
h :document .documentElement.clientHeight
}
}
}
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html) ;
}
}
}
})(jQuery)


경고에는 선택기 지원이 필요하지 않으므로 $.extend를 사용하여 다음과 같이 선언합니다.