自己使用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 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 程序员的调试技术小结
2009/11/15 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python实现清屏的方法
2015/04/30 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
安全协议书
2014/04/23 职场文书
班级课外活动总结
2014/07/09 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
销售人员管理制度
2015/08/06 职场文书
Redis如何一键部署脚本
2021/04/12 Redis