自己使用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在光标位置插入内容的实现代码
Jun 18 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue中nextTick用法实例
Sep 11 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP下常用正则表达式整理
2010/10/26 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript数组详解
2014/10/22 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python实现Const详解
2015/01/27 Python
Python 的 Socket 编程
2015/03/24 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python 变量初始化空列表的例子
2019/11/28 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
人力资源主管职责范本
2014/03/05 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年公务员工作总结
2014/11/18 职场文书
邀请函格式范文
2015/02/02 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis