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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
全面理解闭包机制
2016/07/11 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python接口测试get请求过程详解
2020/02/28 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
学校教研活动总结
2014/07/02 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书