自己使用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操纵dom生成下拉列表框的方法
Feb 24 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jquery处理json对象
Nov 03 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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代码
2012/07/17 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python学生管理系统代码实现
2020/04/05 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python实现简单成绩录入系统
2019/09/19 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
教育技术职业规划范文
2014/03/04 职场文书
安全例会汇报材料
2014/08/23 职场文书
课外访万家心得体会
2014/09/03 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
检讨书格式范文
2015/05/07 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server