自己使用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!");

});

效果图如下:

时间: 2014-04-29

jquery 可拖拽的窗体控件实现代码

所以要引入JQUERY框架. 把我的这个控件代码放到一个js文件里面直接引入就可以了 控件代码 复制代码 代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event

JS模拟并美化的表单控件完整实例

本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

基于 jQuery 实现键盘事件监听控件

最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回.重做.移动.缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点. 1. 自动获取焦点 似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听,而通常需要监听事件的 <DIV>.<CANVAS> 元素都不能获得焦点,因此需要修改目标元素的某些属性使其可以获得焦点,另外一种可行的方法是将事件委托给诸如 <INPUT> 标签.这里采用的是第一类方法

关于Kotlin写界面时诸多控件的点击事件

界面中控件较多的话,每个控件都设置setOnClickListener(this)是很麻烦的,为此抽出了一个Context的扩展类: fun Context.setViewClick(listener: View.OnClickListener, vararg views: View) { for (it in views) { it.setOnClickListener(listener) } } 即只需要将Activity或Fragment实现View.OnClickListener接口,然

Javascript jquery css 写的简单进度条控件

通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

自己动手写的javascript前端等待控件

等待控件在网上搜有好多种,但是都很复杂,不一定用的顺手,再说我的项目是bootstrap的原因,又不敢轻易使用第三方控件,怕不兼容,于是自己动手写了个等待控件,其技术点包括动态加载CSS,javascript的命名空间,所以记录一下. 这个等待控件主要是:进行某个操作前,显示一个信息提示:"数据加载中,请稍候...",操作成功后,在回调函数中将提示消失,原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定. 那么这个CSS怎么动态加载呢?等待控件中,样式使用了clas

从外部的js文件中获取ASPX页面的控件ClientID

前言 当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成). 例如:ContentPlaceHolder1中的Button1默认情况下会生成"ctl00_ContentPlaceHolder1_Button1"的ClientID. 我们在Render出来的mark up中看到的也是这些ClientID.所以,当我们使用JavaScript对控件元

基于jQuery的实现简单的分页控件

1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo