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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
canvas实现图像截取功能
Feb 06 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
layui radio性别单选框赋值方法
Aug 15 Javascript
Vue CL3 配置路径别名详解
May 30 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取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python实现tail -f 功能
2020/01/17 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
采购主管的岗位职责
2013/12/17 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
个人党性锻炼总结
2015/03/05 职场文书
工作态度怎么写
2015/06/25 职场文书
护理工作心得体会
2016/01/22 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
浅谈golang 中time.After释放的问题
2021/05/05 Golang
一篇文章弄懂Python中的内建函数
2021/08/07 Python