自定制网页对话框
发布时间:
2007.08.27
摘要:
在这篇文章中Haissam Abdul Malak将展示给你如何创建自已定制的确认信息对话框,代替浏览器自带的对话框,满足实际需要。
作者:
Haissam Abdul Malak
文章内容:
简单介绍
程序步骤
执行步骤
源码下载
当程序进程在服务端继续运行之前,谁没有使用过window.confirm()方法显示一个确认对话框给用户呢?而我在初次使用它的时候就确信我爱上了它。可是,有两件另人讨厌的事促使我来创建自己定制的对话框:
1.按纽的焦点问题
confirm()方法选择默认的按纽是“OK”。假设你有一个grid控件和分布在控件中每行的按纽。当用户点击此按纽激发删除行事件时,你喜欢显示一
个确认对话框。在进行那样的操作中显示对话框是一个很好的习惯。然而,如果用户由于失误敲了回车键,那么“OK”按纽单击事件就被执行了。
2.默认的“OK”和“Cancel”两个按纽不能修改(样式、文件的修改之类的)。
下面说一下使用自定制对话框的几点好处:
1.需要将默认项设置给“OK”按纽之外的按纽。
2.需要改变默认按纽的文本(如我喜欢用"Yes"和"No")、修改按纽的样式。
我应该提醒的最后一件事就是一旦窗口大小改变,对话框要具有重置自己位置的能力。这样的话将始终会显示在窗口中央。
程序步骤
[ 返回页首 ]
让我们来检验一下这个创建自定制对话框的程序。 HTML代码 这个对话框由以下几个控件组成。
1.三个div层
2.两个Web服务器控件(按纽)
代码清单1
<div id="divConfMessage" runat="server" style="BORDER-RIGHT:black
thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200;
BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
<div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
</div>
<div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
</div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
<asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>
</div>
</div>
以上清单将创建一个为我们的对话框服务的层。这个层默认隐藏,主要包含两个层:一个用来显示提示信息给用户,另一个包括两个按纽。
需要注意的事,在每个层的样式属性中,我们要设置给Z-INDEX属性一个值(比页面中其它控件的Z-INDEX属性更高),使得这个对话框的所有层在页面中都居于其它控件之上。
JavaScript 代码
在这部分我们将创建一个包含4个全局变量和5个函数的JavaScript文件。
1.全局变量(4个)
a-var divWidth='';这个变量用来设置对话框的宽度。
b-var divHeight='';这个变量用来设置对话框的高度。
c-var txtFirstButton=OK;这个变量用来设置第一个按纽的文本值。
d-var txtSecondButton=Cancel;这个变量用来设置第二个按纽的文本值。
2.函数(5个)
a-DisplayConfirmMessage(msg,width,height)
b-SetTopLeft(divLayer)
c-SetText(txtButton1,txtButton2)
d-SetHeightWidth(divLayer)
f-SetDefaultButton(defaultButton)
代码清单2
以上函数带3个参数.第一个是你要显示给用户的信息,第二个用来指定对话框的宽度,最后一个用来指定对话框的高度。如果最后两个参数没有提供值,那么函数中将设置其默认值。
对层设置完高度、宽度、居上和居右属性后,我们将通过设置display为'block',使它显示出来。
注意window.onresize的使用,它将调用 SetTopLeft和SetHeightWidth函数来控制可见层重置其位置。
代码最后一行常用来设置开发者发送给用户的信息。
代码清单3
function SetTopLeft(divLayer)
{
// Get the dialogbox height
var divHeightPer = divLayer.style.height.split('px')[0];
// Set the top variable
var top = (parseInt(document.body.offsetHeight) / 2) - (divHeightPer / 2)
// Get the dialog box width
var divWidthPix = divLayer.style.width.split('px')[0];
// Get the left variable
var left = (parseInt(document.body.offsetWidth) / 2) - (parseInt(divWidthPix)
/ 2);
// set the dialogbox position to abosulute
divLayer.style.position = 'absolute';
// Set the div top to the height
divLayer.style.top = top
// Set the div Left to the height
divLayer.style.left = left;
}
以上函数作用是设置对话框的位置。经过计算后,我们获得div层应该显示的居上和居左的位置,并设置对话框的相应属性。首先,我们获得层的高度(只是数值,不包括px),然后我们用2除以窗口的高度和宽度为了使对话框居中,最后设置层的绝对位置。
代码清单4
function SetHeightWidth(divLayer)
{
// Set the dialogbox width
divLayer.style.width = divWidth + 'px';
// Set the dialogbox Height
divLayer.style.height = divHeight + 'px'
}
以上清单是设置对话框的宽度和高度。无论窗口大小改变,还是使用DisplayconfirmMessage方法时将被调用。注意此函数带的参数是一个层对象。
代码清单5
function SetText(txtButton1, txtButton2)
{
// Set display text for the two buttons
if (txtButton1 == null)
document.getElementById('btnConfOK').innerText = txtFirstButton;
else
document.getElementById('btnConfOK').innerText = txtButton1;
// Set display text for the two buttons
if (txtButton2 == null)
document.getElementById('btnConfCancel').innerText = txtSecondButton;
else
document.getElementById('btnConfCancel').innerText = txtButton2;
}
以上清单用来显示两个按纽的文本。这将提供给你改变和自定制按纽文本(根据你的实际需要)的能力,此函数有两个字符串参数。
代码清单6
function SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
以上函数设置对话框的默认焦点。用这个函数可随心所欲定制对话框。
执行步骤
[ 返回页首 ]
function DisplayConfirmMessage(msg, width, height)
{
// Set default dialogbox width if null
if (width == null)
divWidth = 180
else
divWidth = width;
// Set default dialogBox height if null
if (height == null)
divHeight = 90
else
divHeight = height;
// Ge the dialogbox object
var divLayer = document.getElementById('divConfMessage');
// Set dialogbox height and width
SetHeightWidth(divLayer)
// Set dialogbox top and left
SetTopLeft(divLayer);
// Show the div layer
divLayer.style.display = 'block';
// Change the location and reset the width and height if window is resized
window.onresize = function()
{
if (divLayer.style.display == 'block')
{
SetTopLeft(divLayer);
SetHeightWidth(divLayer)
}
}
// Set the dialogbox display message
document.getElementById
('confirmText').innerText = msg;
}
在这部分中你将学到如何将这个对话框添加到你的项目中运行。打开一个webform,转到设计模式,把HTML代码粘贴在<form>标签之间.
在根文件夹下创建一个名为CustomDialog.js的javascript文件,粘贴以上所有函数,然后将以下代码加至<head>之间。
代码清单7
<script language="javascript" src="CustomDialog.js"></script>
以上代码将链接到你已经创建到webform项目中的js文件,下一步即添加javascript代码给一个按纽的单击事件,例如:
代码清单8
<script language = JavaScript>
function ShowMessage()
{
SetText('Yes', 'No');
DisplayConfirmMessage('are you sure', 180, 90)
SetDefaultButton('btnConfOK');
return false;
}
</script>
首先要做的是设置按纽的文本(我已经设置为yes和no),其次是设置确认信息(如我写的是are you sure),最后就是设置焦点按纽(我选的是yes),点击后返回false.
代码清单9
Button1.Attributes.Add("onclick","return ShowMessage()");
图形1
以上图片显示当用户点击按纽时,跳出确认对话框,此情况是在窗口最大化时。
图形2
以上图片显示当窗口大小改变时,对话框重置其位置。