当进程在服务端继续运行的前谁没有使用过window.confirm思路方法显示个确认对话框给用户呢？而我在初次使用它时候就确信我爱上了它可是有两件另人讨厌事促使我来创建自己定制对话框:
1.按纽焦点问题 confirm思路方法选择默认按纽是“OK”假设你有个gridControl控件和分布在Control控件中每行按纽当用户点击此按纽激发删除行事件时你喜欢显示个确认对话框在进行那样操作中显示对话框是个很好习惯然而如果用户由于失误敲了回车键那么“OK”按纽单击事件就被执行了
2.默认“OK”和“Cancel”两个按纽不能修改(样式、文件修改的类)
下面说下使用自定制对话框几点好处:
1.需要将默认项设置给“OK”按纽的外按纽
2.需要改变默认按纽文本(如我喜欢用\"Yes\"和\"No\")、修改按纽样式
我应该提醒最后件事就是旦窗口大小改变对话框要具有重置自己位置能力这样话将始终会显示在窗口中央
=Title>步骤
[ 返回页首 ] 让我们来检验下这个创建自定制对话框 HTML代码 这个对话框由以下几个Control控件组成
1. 3个div层
2.两个Web服务器Control控件(按纽)
代码清单1
=Code> <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属性个值(比页面中其它Control控件Z-INDEX属性更高)使得这个对话框所有层在页面中都居于其它Control控件的上
JavaScript 代码
在这部分我们将创建个包含4个全局变量和5个JavaScript文件
1.全局变量(4个)
a-var divWidth=\'\';这个变量用来设置对话框宽度
b-var divHeight=\'\';这个变量用来设置对话框高度
c-var txtFirstButton=OK;这个变量用来设置第个按纽文本值
d-var txtSecondButton=Cancel;这个变量用来设置第 2个按纽文本值[Page]
2.(5个)
a-DisplayConfirmMessage(msg,width,height)
b-SetTopLeft(divLayer)
c-SetText(txtButton1,txtButton2)
d-SetHeightWidth(divLayer)
f-SetDefaultButton(defaultButton)
代码清单2
=Code> 以上带3个参数.第个是你要显示给用户信息第 2个用来指定对话框宽度最后个用来指定对话框高度如果最后两个参数没有提供值那么中将设置其默认值
对层设置完高度、宽度、居上和居右属性后我们将通过设置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.offHeight) / 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.offWidth) / 2) - (parseInt(divWidthPix)
/ 2);
// 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
(txtButton1 null)
document.getElementById(\'btnConfOK\').innerText = txtFirstButton;

document.getElementById(\'btnConfOK\').innerText = txtButton1;[Page]

// Set display text for the two buttons
(txtButton2 null)
document.getElementById(\'btnConfCancel\').innerText = txtSecondButton;

document.getElementById(\'btnConfCancel\').innerText = txtButton2;
}
以上清单用来显示两个按纽文本这将提供给你改变和自定制按纽文本(根据你实际需要)能力此有两个串参数
代码清单6
function SetDefaultButton(defaultButton)
{
// Set the focus _disibledevent=>执行步骤
[ 返回页首 ]

function DisplayConfirmMessage(msg, width, height)
{
// Set default dialogbox width null
(width null)
divWidth = 180

divWidth = width;

// Set default dialogBox height null
(height null)
divHeight = 90

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 re the width and height window is resized
window.onresize = function
{
(divLayer.style.display \'block\')
{
SetTopLeft(divLayer);
SetHeightWidth(divLayer)
}
}
// Set the dialogbox display message
document.getElementById

(\'confirmText\').innerText = msg;
}



在这部分中你将学到如何将这个对话框添加到你项目中运行打开个webform转到设计模式把HTML代码粘贴在<form>标签的间.
在根文件夹下创建个名为CustomDialog.jsjavascript文件粘贴以上所有然后将以下代码加至<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)[Page]

SetDefaultButton(\'btnConfOK\');
false;
}
</script>
首先要做是设置按纽文本(我已经设置为yes和no),其次是设置确认信息(如我写是are you sure),最后就是设置焦点按纽(我选是yes),点击后返回false.
代码清单9
Button1.Attributes.Add(\"onclick\",\" ShowMessage\");

图形1

\">
以上图片显示当用户点击按纽时跳出确认对话框此情况是在窗口最大化时
图形2

\">
以上图片显示当窗口大小改变时对话框重置其位置

[ 返回页首 ]


[源码下载]