自己使用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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
js+css在交互上的应用
Jul 18 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
如何提高python 中for循环的效率
2020/04/15 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
《在家里》教后反思
2014/03/01 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2014年科技工作总结
2014/11/26 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python