| 标题 | 自己使用js/jquery写的一个定制对话框控件 |
| 内容 | 最近在做一个游戏项目，项目里面很多需要用到对话框，而且的用上美工做地图片，这样地话好像就不好去找一些现成地对话框控件了，于是便琢磨着自己做一个通用地控件，虽然不是绝对通用啦，但在我这个项目里还是可以随意调用地，思想地话也可以借鉴到别地项目中. 先贴出主要代码： 代码如下: //对话框地基本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!); }); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。