jQuery)擴(kuò)展jQuery系列之一 模擬alert，confirm（一）
更新時(shí)間：2010年12月04日 22:12:09 作者：
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi)，都選擇了去封裝一個(gè)屬于自己的alert組件，現(xiàn)在我們就動(dòng)手實(shí)現(xiàn)一個(gè)這樣的小部件。
效果圖
/**
* @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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</div><div class="btnBar"><input type="button" value="取消" id="cancel"/><input type="button" value="確定" id="sure"/></div></div></div>',
/**
* 根據(jù)需要生成對話框
* @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);
},
/**
* 設(shè)定對話框的位置
* @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);
因?yàn)槲覀兊腶lert,并不需要選擇器的支持，所以我們采用$.extend這樣聲明
$.extend({
alert:function(html,callback){
},
confirm:function(html,callback){
}
});
其次我們聲明一個(gè)單體來生成這個(gè)組件到頁面，這個(gè)單體返回一個(gè)公共的方法build來創(chuàng)建這個(gè)組件
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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！
</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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</div><div class="btnBar"><input type="button" value="取消"
id="cancel"/><input type="button" value="確定" id="sure"/></div></div></div>'}<BR>
向里面填充方法
/**
* 根據(jù)需要生成對話框
* @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);
},
/**
* 設(shè)定對話框的位置
* @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
}
}
接下來就是對話框的實(shí)現(xiàn)
$.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);
}
});
調(diào)用方法：
$.confirm('確定刪除？',function(){
alert('cccc');
});
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">系統(tǒng)提示</h2><BR><div class="alertHtml"><BR>你的操作出現(xiàn)錯(cuò)誤！<BR></div><BR> <div class="btnBar"><BR> <input
type="button" value="確定"/><BR></div><BR></div><BR> </div><BR>
高手勿笑，為了說明實(shí)現(xiàn)的方式，我并沒有仔細(xì)的去完善這段代碼，僅僅是在寫作的半小時(shí)內(nèi)寫出的，所以有很多地方?jīng)]有去思考，有很多的紕漏，并且以一個(gè)比較笨的方式實(shí)現(xiàn)了這個(gè)模擬的alert，不過下次我們將通過構(gòu)建Button的方式實(shí)現(xiàn)一個(gè)組件，會(huì)加入遮罩，ajax調(diào)用，iframe寬度高度自適應(yīng)等更強(qiáng)大的功能。
復(fù)制代碼 代碼如下:
/**
* @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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</div><div class="btnBar"><input type="button" value="取消" id="cancel"/><input type="button" value="確定" id="sure"/></div></div></div>',
/**
* 根據(jù)需要生成對話框
* @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);
},
/**
* 設(shè)定對話框的位置
* @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);
因?yàn)槲覀兊腶lert,并不需要選擇器的支持，所以我們采用$.extend這樣聲明
復(fù)制代碼 代碼如下:
$.extend({
alert:function(html,callback){
},
confirm:function(html,callback){
}
});
其次我們聲明一個(gè)單體來生成這個(gè)組件到頁面，這個(gè)單體返回一個(gè)公共的方法build來創(chuàng)建這個(gè)組件
復(fù)制代碼 代碼如下:
var Dialog=function(){
return {
build:function(type,callback,html){
render.renderDialog(type,callback,html);
}
}
}
接下來我們分別聲明組件的HTML字符串
復(fù)制代碼 代碼如下:
var render={<BR> template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！
</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">系統(tǒng)提示</h2><div class="alertHtml">你的操作出現(xiàn)錯(cuò)誤！</div><div class="btnBar"><input type="button" value="取消"
id="cancel"/><input type="button" value="確定" id="sure"/></div></div></div>'}<BR>
向里面填充方法
復(fù)制代碼 代碼如下:
/**
* 根據(jù)需要生成對話框
* @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);
},
/**
* 設(shè)定對話框的位置
* @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
}
}
接下來就是對話框的實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
$.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);
}
});
調(diào)用方法：
復(fù)制代碼 代碼如下:
$.confirm('確定刪除？',function(){
alert('cccc');
});
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
<div class="alertParent"><BR><div class="alertContent"><BR><h2 class="title">系統(tǒng)提示</h2><BR><div class="alertHtml"><BR>你的操作出現(xiàn)錯(cuò)誤！<BR></div><BR> <div class="btnBar"><BR> <input
type="button" value="確定"/><BR></div><BR></div><BR> </div><BR>
高手勿笑，為了說明實(shí)現(xiàn)的方式，我并沒有仔細(xì)的去完善這段代碼，僅僅是在寫作的半小時(shí)內(nèi)寫出的，所以有很多地方?jīng)]有去思考，有很多的紕漏，并且以一個(gè)比較笨的方式實(shí)現(xiàn)了這個(gè)模擬的alert，不過下次我們將通過構(gòu)建Button的方式實(shí)現(xiàn)一個(gè)組件，會(huì)加入遮罩，ajax調(diào)用，iframe寬度高度自適應(yīng)等更強(qiáng)大的功能。
您可能感興趣的文章:
- jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
- 基于jQuery的彈出消息插件 DivAlert之旅（一）
- 基于jQuery的消息提示插件 DivAlert之旅（二）
- JQuery的Alert消息框插件使用介紹
- 基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）
- 用Jquery重寫windows.alert方法實(shí)現(xiàn)思路
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- 自編jQuery插件實(shí)現(xiàn)模擬alert和confirm
- jQuery提示插件alertify使用指南
- jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
- jQuery實(shí)現(xiàn)摸擬alert提示框
相關(guān)文章
jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
這篇文章主要介紹了jQuery常用樣式操作,結(jié)合實(shí)例形式分析了jQuery針對頁面元素樣式的獲取、設(shè)置、追加、刪除、判斷等操作方法,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果,通過簡單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了JQuery ztree帶篩選、異步加載實(shí)例，zTree支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)，并支持極其靈活的checkbox或radio選擇功能，本文為大家進(jìn)行具體介紹2016-02-02
JavaScript自動(dòng)生成 年月范圍 選擇功能完整示例【基于jQuery插件】
這篇文章主要介紹了JavaScript自動(dòng)生成 年月范圍 選擇功能,結(jié)合完整實(shí)例形式分析了基于jQuery插件的日期年月范圍自動(dòng)生成與選擇功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09
jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法,涉及jQuery針對鼠標(biāo)事件的響應(yīng)與頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
jQuery 操作option的實(shí)現(xiàn)代碼
js清空option之前清空option ，我的做法是遍歷現(xiàn)有option，將其每個(gè)子元素都置空即可。2011-03-03
jQuery插件開發(fā)的五種形態(tài)小結(jié)
這篇文章主要介紹了jQuery插件開發(fā)的五種形態(tài)小結(jié)，具體的內(nèi)容就是解決javascript插件的8種特征，非常的詳細(xì)，這里推薦給小伙伴們。2015-03-03
iframe中使用jquery進(jìn)行查找的方法【案例分析】
這篇文章主要介紹了iframe中使用jquery進(jìn)行查找的方法,結(jié)合實(shí)際案例形式較為詳細(xì)的分析了jQuery結(jié)合iframe查找的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時(shí)間沒用，有些生疏了，于是就做幾個(gè)小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來2012-09-09
無論是window.setTimeout還是window.setInterval，在使用函數(shù)名作為調(diào)用句柄時(shí)都不能帶參數(shù)，解決辦法是在此函數(shù)的基礎(chǔ)上在做一層封裝2013-05-05