自己使用js/jquery写的一个定制对话框控件


Posted in Javascript onMay 02, 2014

最近在做一个游戏项目,项目里面很多需要用到对话框,而且得用上美工做的图片,这样的话好像就不好去找一些现成的对话框控件了,于是便琢磨着自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中。

先贴出主要代码:

//对话框的基本html内容,绝对定位,高宽设置,背景图片,标题,两个按钮图 
var tdlz_dialog_content = "<div id='tdlz_dialog" 
+ "' style='position:absolute;text-align:center;width:540px;height:331px;background:url(assets/images/add_fbc.png);'><ul><li id='dialog_lb_text' style='margin-top:100px;color:#fff;font-size:25px'>" 
+ "</li><li style='margin-top:100px;cursor:pointer'><img id='tdlz_dialog_ok' src='assets/images/queren.png'></img><img id='tdlz_dialog_cancel' src='assets/images/quxiao.png'></img></li></ul></div>"; 
//text:标题,type:对话框类型,funcOK:确定的执行函数,time:倒计时或alert显示的时间 
function showTdDialog(text, type, funcOK, time) { 
var dialogid = "#tdlz_dialog"; 
$(dialogid).show(500); 
$("#dialog_lb_text").html(text); 
switch (type) { 
case "show"://展示信息的对话框,带一个确定键,点击后消失 
$("#tdlz_dialog_cancel").hide(); 
$("#tdlz_dialog_ok").unbind(); 
$("#tdlz_dialog_ok").click(function () { 
$(dialogid).hide(500); 
$("#tdlz_dialog_ok").css("margin-right", "0"); 
$("#tdlz_dialog_cancel").css("margin-left", "0"); 
}); 
break; 
case "alert"://警告对话框,time时间后消失 
$("#tdlz_dialog_cancel").hide(); 
$("#tdlz_dialog_ok").unbind(); 
setTimeout(function () { 
$(dialogid).hide(500); 
$("#tdlz_dialog_ok").css("margin-right", "0"); 
$("#tdlz_dialog_cancel").css("margin-left", "0"); 
}, time); 
$("#tdlz_dialog_ok").click(function () { 
$(dialogid).hide(500); 
$("#tdlz_dialog_ok").css("margin-right", "0"); 
$("#tdlz_dialog_cancel").css("margin-left", "0"); 
}); 
break; 
case "confirm"://确认对话框,带确认取消键,确认则执行函数,否则不执行并消失 
$("#tdlz_dialog_cancel").show(); 
$("#tdlz_dialog_ok").css("margin-right", "5%"); 
$("#tdlz_dialog_cancel").css("margin-left", "5%"); 
$("#tdlz_dialog_ok").unbind(); 
$("#tdlz_dialog_ok").click(function () { 
funcOK(); 
setTimeout(function () { 
$(dialogid).hide(500) 
}, 1000); }); 
$("#tdlz_dialog_cancel").click(function () { 
$(dialogid).hide(500); 
}); 
break; 
case "time"://倒计时对话框,显示time时间倒计时,结束后消失 
$("#tdlz_dialog_cancel").hide(); 
$("#dialog_lb_text").html(text + "" + time); 
var a = setInterval(function () { 
time = parseInt(time) - 1; 
if (time < 0) { 
clearInterval(a); 
$(dialogid).hide(500); 
} 
$("#dialog_lb_text").html(text + "" + time); 
}, 1000); 
$("#tdlz_dialog_ok").unbind(); 
$("#tdlz_dialog_ok").click(function () { 
$(dialogid).hide(500); 
$("#tdlz_dialog_ok").css("margin-right", "0"); 
$("#tdlz_dialog_cancel").css("margin-left", "0"); 
}); 
break; 
} 
}

除了上面的使用函数,还需要对对话框进行初始化,为了插入文档中并且居中显示
function initDialog() { 
$("body").before(tdlz_dialog_content); 
//计算恰当的中间位置 
var top_percent = (window.innerHeight / 4) / window.innerHeight 
var left_percent = (window.innerWidth / 2 - $("#tdlz_dialog").width() / 2) / window.innerWidth; 
$("#tdlz_dialog").css("top", top_percent * 100 + "%"); 
$("#tdlz_dialog").css("left", left_percent * 100 + "%"); 
$("#tdlz_dialog").css("z-index", "100"); 
$("#tdlz_dialog").hide(); 
}

使用的时候如下(以confirm对话框为例):
initDialog(); 
showTdDialog("I'm a Dialog","confirm",function(){ console.log("Button OK Clicked!"); 
});

效果图如下:
自己使用js/jquery写的一个定制对话框控件
Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
关于this和self的使用说明
Aug 01 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 #Javascript
jQuery简单图表peity.js使用示例
May 02 #Javascript
jsPDF导出pdf示例
May 02 #Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 #Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 #Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 #Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 #Javascript
You might like
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
学习ExtJS form布局
2009/10/08 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python模拟登录12306的方法
2014/12/30 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
微笑服务演讲稿
2014/05/13 职场文书
应届生自荐书
2014/06/23 职场文书
安全目标管理责任书
2014/07/25 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
解析MySQL binlog
2021/06/11 MySQL