自己使用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 this关键字的问题
Jan 09 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
UI Events 用户界面事件
Jun 27 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
详细分析React 表单与事件
Jul 08 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/10/29 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
使用angular写一个hello world
2015/01/23 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
对于Python中RawString的理解介绍
2016/07/07 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
深圳茁壮笔试题
2015/05/28 面试题
个人简历自我评价范文
2014/02/04 职场文书
软件项目实施计划书
2014/05/02 职场文书
锦旗标语大全
2014/06/23 职场文书
感恩教育观后感
2015/06/17 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书