jQuery)扩展jQuery系列之一 模拟alert，confirm（一）

效果图

全部代码
复制代码 代码如下:

(function($){
$.extend({
alert:function(html,callback){
var dialog=new Dialog();
dialog.build('alert',callback,html);
},
/confirm/i:function(html,callback){
var dialog=new Dialog();
dialog.build('/confirm/i',callback,html);
}
});
var Dialog=function(){
var render={
template:'

系统提示你的操作出现错误！',
template/confirm/i:'

系统提示你的操作出现错误！',

renderDialog:function(type,callback,html){
if(type=='alert'){
this.renderalert(callback,html);
}else{
this.renderConfirm(callback,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);
},

render/confirm/i:function(callback,html){
var temp=$(this.template/confirm/i).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('/confirm/i',temp,callback);
},

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
});
},

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(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
}
}
}
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}
})(jQuery);

因为我们的alert,并不需要选择器的支持，所以我们采用$.extend这样声明
复制代码 代码如下:
$.extend({
alert:function(html,callback){
},
/confirm/i:function(html,callback){
}
});

其次我们声明一个单体来生成这个组件到页面，这个单体返回一个公共的方法build来创建这个组件
复制代码 代码如下:
var Dialog=function(){
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}

接下来我们分别声明组件的HTML字符串
复制代码 代码如下:
var render={
template:'

系统提示你的操作出现错误！
',
template/confirm/i:' id="/confirm/iPanel">

系统提示你的操作出现错误！id="cancel"/>'}


向里面填充方法
复制代码 代码如下:

renderDialog:function(type,callback,html){
if(type=='alert'){
this.renderalert(callback,html);
}else{
this.renderConfirm(callback,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);
},

render/confirm/i:function(callback,html){
var temp=$(this.template/confirm/i).clone().hide();
temp.find('div.alertHtml').html(html);
$(document.body).append(temp);
this.setPosition(temp);
temp.fadeIn();
this.bindEvents('/confirm/i',temp,callback);
},

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
});
},

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(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){
var dialog=new Dialog();
dialog.build('alert',callback,html);
},
/confirm/i:function(html,callback){
var dialog=new Dialog();
dialog.build('/confirm/i',callback,html);
}
});

调用方法：
复制代码 代码如下:
$.confirm('确定删除？',function(){
alert('cccc');
});

$.alert('我的电脑');

最后就是CSS与HTML 了
复制代码 代码如下:
div.alertParent{
padding:6px;
background:#ccc;
background:rgba(201,201,201,0.8);
width:auto;
position:absolute;
-moz-border-radius:3px;
font-size:12px;
top:50px;
left:50px;
}
div.alertContent{
background:#fff;
width:350px;
height:auto;
border:1px solid #999;
}
h2.title{
width:100%;
height:28px;
background:#0698E9;
text-indent:10px;
font-size:12px;
color:#fff;
line-height:28px;
margin:0;
}
div.alertHtml{
background:url(dtips.gif) 0 0 no-repeat;
height:50px;
margin:10px;
margin-left:30px;
text-indent:50px;
line-height:50px;
font-size:14px;
}
div.btnBar{
border-top:1px solid #c6c6c6;
background:#f8f8f8;
height:30px;
}
div.btnBar input{
background:url(sure.png) no-repeat;
border:0;
width:63px;
height:28px;
float:right;
margin-right:5px;
}


html
复制代码 代码如下:

系统提示

你的操作出现错误！


type="button" value="确定"/>





高手勿笑，为了说明实现的方式，我并没有仔细的去完善这段代码，仅仅是在写作的半小时内写出的，所以有很多地方没有去思考，有很多的纰漏，并且以一个比较笨的方式实现了这个模拟的alert，不过下次我们将通过构建Button的方式实现一个组件，会加入遮罩，ajax调用，iframe宽度高度自适应等更强大的功能。