jQuery)扩展jQuery系列之一 模拟alert,confirm(一)


Posted in Javascript onDecember 04, 2010

效果图

jQuery)扩展jQuery系列之一 模拟alert,confirm(一)

全部代码
/** 
* @author xing 
*/ 
(function($){ 
$.extend({ 
alert:function(html,callback){ 
var dialog=new Dialog(); 
dialog.build('alert',callback,html); 
}, 
confirm:function(html,callback){ 
var dialog=new Dialog(); 
dialog.build('confirm',callback,html); 
} 
}); 
var Dialog=function(){ 
var render={ 
template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现错误!</div><div class="btnBar"><input type="button" value="确定" id="sure"/></div></div></div>', 
templateConfirm:' <div class="alertParent" id="confirmPanel"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现错误!</div><div class="btnBar"><input type="button" value="取消" id="cancel"/><input type="button" value="确定" id="sure"/></div></div></div>', 
/** 
* 根据需要生成对话框 
* @param {Object} type 
* @param {Object} callback 
* @param {Object} html 
*/ 
renderDialog:function(type,callback,html){ 
if(type=='alert'){ 
this.renderAlert(callback,html); 
}else{ 
this.renderConfirm(callback,html); 
} 
}, 
/** 
* 生成alert 
* @param {Object} callback 
* @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} callback 
* @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} type 
* @param {Object} el 
* @param {Object} callback 
*/ 
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:function(html,callback){ 
} 
});

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

接下来我们分别声明组件的HTML字符串
var render={<BR> template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现错误! 
</div><div class="btnBar"><input type="button" value="确定" id="sure"/></div></div></div>',<BR> templateConfirm:' <div class="alertParent" 
id="confirmPanel"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现错误!</div><div class="btnBar"><input type="button" value="取消" 
id="cancel"/><input type="button" value="确定" id="sure"/></div></div></div>'}<BR>

向里面填充方法
/** 
* 根据需要生成对话框 
* @param {Object} type 
* @param {Object} callback 
* @param {Object} html 
*/ 
renderDialog:function(type,callback,html){ 
if(type=='alert'){ 
this.renderAlert(callback,html); 
}else{ 
this.renderConfirm(callback,html); 
} 
}, 
/** 
* 生成alert 
* @param {Object} callback 
* @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} callback 
* @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} type 
* @param {Object} el 
* @param {Object} callback 
*/ 
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:function(html,callback){ 
var dialog=new Dialog(); 
dialog.build('confirm',callback,html); 
} 
});

调用方法:
$.confirm('确定删除?',function(){ 
alert('cccc'); 
});

jQuery)扩展jQuery系列之一 模拟alert,confirm(一)

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

jQuery)扩展jQuery系列之一 模拟alert,confirm(一)

最后就是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
<div class="alertParent"><BR><div class="alertContent"><BR><h2 class="title">系统提示</h2><BR><div class="alertHtml"><BR>你的操作出现错误!<BR></div><BR> <div class="btnBar"><BR> <input 
type="button" value="确定"/><BR></div><BR></div><BR> </div><BR>

高手勿笑,为了说明实现的方式,我并没有仔细的去完善这段代码,仅仅是在写作的半小时内写出的,所以有很多地方没有去思考,有很多的纰漏,并且以一个比较笨的方式实现了这个模拟的alert,不过下次我们将通过构建Button的方式实现一个组件,会加入遮罩,ajax调用,iframe宽度高度自适应等更强大的功能。
Javascript 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 #Javascript
javascript innerHTML使用分析
Dec 03 #Javascript
统计出现最多的字符次数的js代码
Dec 03 #Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 #Javascript
基于jQuery的左右滚动实现代码
Dec 03 #Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 #Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 #Javascript
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP使用数组实现队列
2012/02/05 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
JS实现随机点名器
2020/04/12 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
小结Python的反射机制
2020/09/28 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
社区娱乐活动方案
2014/08/21 职场文书
感恩节寄语2015
2015/03/24 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
庆元旦主持词
2015/07/06 职场文书
2015暑假假期总结
2015/07/13 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL