js/jquery写的一个定制对话框控件
来源:互联网 发布:天尚网络机顶盒价格 编辑:程序博客网 时间:2024/06/06 18:09
最近在做一个游戏项目,项目里面很多需要用到对话框,而且得用上美工做的图片,这样的话好像就不好去找一些现成的对话框控件了,于是便琢磨着自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中。
先贴出主要代码:
//对话框的基本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!");});
0 0
- js/jquery写的一个定制对话框控件
- 一个定制CFileDialog对话框的实例
- 一个定制CFileDialog对话框的实例
- 一个定制CFileDialog对话框的实例
- 一个定制CFileDialog对话框的实例
- JS写的一个功能齐备的树控件treeview
- 对话框和控件的背景和颜色定制
- 在基于对话框的程序中高级定制Web控件
- JS写的日历控件
- JS写的Tab控件
- 在jsp中js jquery点击按钮出现一个对话框的实现
- 一个 JS 写的 Table 自增/减行例子,和一个模态对话框传值例子的源代码
- 一个对话框调用另一个对话框的控件值
- 让自己写的子窗口可以被父对话框的TAB键切换,像一个控件一样
- 一个jQuery的小控件
- js+Css实现的一个简单对话框
- 写一个js编写的文件上传控件。(原创的)
- JQuery 写的年-月-日控件。
- 关于"wincup.exe"与"aukld.exe"的分析
- vs2013无法创建c++工程之解决方法
- C++->network设计
- Ubuntu 默认启动到命令行 12.04
- 人生如棋
- js/jquery写的一个定制对话框控件
- 解决在DHCP环境下私自指定ip和私自搭建dhcp服务器的方法
- 无法打开包含文件:“fstream.h”
- ASP函数_转换格林威治时间函数
- lucene给文本索引和搜索功能的应用
- 程序员的性格
- 博客教程:建站思路与上线
- 【LeetCode】- Length of Last Word(最后一个单词的长度)
- PHP设计模式之:单例模式