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:'

시스템 프롬프트

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

',
templateConfirm :'

시스템 프롬프트

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

',
/**
* 필요에 따라 대화 상자 생성
* @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를 사용하여 다음과 같이 선언합니다.



코드 복사

코드는 다음과 같습니다. $.extend({ alert :function( html,callback){ },

confirm:function(html,callback){

}
})


두 번째로 싱글톤을 선언합니다. 이 구성 요소를 페이지에 생성하면 이 싱글톤은 이 구성 요소를 생성하기 위한 공용 메서드 빌드를 반환합니다.

코드 복사

코드는 다음과 같습니다. : var Dialog=function(){ return { build:function(type,callback,html){

render.renderDialog(type,callback,html);

}
}
}


다음으로 구성 요소의 HTML 문자열을 별도로 선언합니다.

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

var render={
템플릿:'

시스템 프롬프트 h2>< ;div class="alertHtml">작업 중 오류가 발생했습니다!

< ;/div>',
templateConfirm:'

id="confirmPanel">

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

id="cancel"/>

'}

내부 채우기 방법

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

/**
* 필요에 따라 대화 상자 생성
* @param {Object} 유형
* @param {Object} 콜백
* @param {Object} html
*/
renderDialog:function(type ,callback ,html){
if(type=='alert'){
this.renderAlert(callback,html)
}else{
this.renderConfirm(callback,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); .fadeIn ();
this.bindEvents('alert',temp,callback);
},
/**
* 生成confirm
* @param {Object} 콜백
* @param {Object} html
*/
renderConfirm:function(callback,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();
});
$('#sure').click(function(){
$('div.alertParent').remove();
})
}
}else{
if($.isFunction(callback)){
$('#sure').click(function(){
callback();
$('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
}
}


다음 단계는 대화 상자를 구현하는 것입니다

코드 복사

코드는 다음과 같습니다: $.extend({ alert:function(html,callback){ varDialog=newDialog(); dialog.build ('alert', callback,html);

},

confirm:function(html,callback){
varDialog=newDialog()
dialog.build('confirm',callback) ,html);
}
});


호출 방법:

코드 복사

코드는 다음과 같습니다. $.confirm('삭제하시겠습니까? ',function(){ alert('cccc') })

$.alert('내 컴퓨터');

드디어 CSS와 HTML입니다

코드를 복사하세요

코드는 다음과 같습니다

div.alertParent{
padding:6px;
배경:#ccc;
배경:rgba(201,201,201,0.8);
너비:자동;
위치:절대;
-moz-border-radius:3px;
글꼴 크기:12px;
상단:50px;
왼쪽:50px;
}
div.alertContent{
배경:#fff;
폭:350px;
높이:자동;
테두리:1px 솔리드 #999;
}
h2.title{
너비:100%;
높이:28px;
배경:#0698E9;
텍스트 들여쓰기:10px;
글꼴 크기:12px;
색상:#fff;
줄 높이:28px;
여백:0;
}
div.alertHtml{
background:url(dtips.gif) 0 0 반복 없음;
높이:50px;
여백:10px;
왼쪽 여백:30px;
텍스트 들여쓰기:50px;
줄 높이:50px;
글꼴 크기:14px;
}
div.btnBar{
border-top:1px solid #c6c6c6;
배경:#f8f8f8;
높이:30px;
}
div.btnBar 입력{
background:url(sure.png) no-repeat;
테두리:0;
너비:63px;
높이:28px;
플로트:오른쪽;
여백-오른쪽:5px;
}

html

复主代码 代码如下:

系统提示

你的操작품출현错误!

type="button" value="确결정"/>

高手勿笑，为了说明实现的方式，我并没有仔细的去完善这段代码，仅仅是在写是的半小时写写写式，所以有很多地方没有去思考， 더 많은 종류의 경고가 있습니다. 并且以一个比较笨的方式实现了这个模拟적 알림이 표시되지 않으며, 아래에 있는 버튼을 누르지 마십시오.入遮罩,ajax调사용,iframe宽titude高titude自适应等更强大的功能.