自己使用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 nodeType 属性全面解析
Nov 14 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
原生JS实现层叠轮播图
May 17 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue.js封装switch开关组件的操作
Oct 26 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
消防安全检查制度
2014/02/04 职场文书
高级工程师英文求职信
2014/03/19 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
雾霾停课通知
2015/04/24 职场文书
四则混合运算教学反思
2016/02/23 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL