提示信息窗口的JS实现(附源码)_AX
转自 http://www.cnblogs.com/AXzhz/archive/2007/04/25/727354.html
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<%--引用外部文件的格式--%>
<%--<link href="../MessageBox.css" rel="stylesheet" type="text/css" />--%>
<%--<script language="javascript" src="../Owner.js" type="text/jscript"></script>--%>
<%--实现Popup功能--%>
<script language="javascript" type="text/javascript">
//Create a popup window
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = '<DIV id="divValidCharMoreInfo"><DIV ID="divValidCharMessage">AX made:</DIV><DIV ID="divValidCharSet"></DIV></DIV>';
oPopupBody.style.backgroundColor = "lightyellow";
oPopupBody.style.border = "solid black 1px";
oPopupBody.style.padding = "3px";
oPopup.document.all("divValidCharMessage").style.color = "green";
oPopup.document.all("divValidCharMessage").style.fontFamily = "arial";
oPopup.document.all("divValidCharSet").style.fontFamily = "arial";
oPopup.document.all("divValidCharMessage").style.fontSize = "9px";
oPopup.document.all("divValidCharSet").style.fontSize = "9px";
oPopup.hide();
//hide the pop-up window
function OnMouseOutValidCharactersMoreInformation()
{
oPopup.hide();
}
//show the pop-up window
function OnMouseMoveValidCharactersMoreInformation(charSet, height, width)
{
if (!oPopup.isOpen)
{
var obj = event.srcElement;
// alert(event.srcElement.innerHTML);
// alert(charSet);
oPopup.document.all("divValidCharSet").innerHTML = "Input the detail info in herre.<br />"+charSet;
// oPopup.document.all("divValidCharMessage").innerText = "";
// alert(obj.parent);
// var x = OffsetLeft(obj.parent) + event.clientX;
// var y = OffsetTop(obj.parent) + event.clientY + 5;
var x = event.clientX;
var y = event.clientY + 5;
// var width = oPopup.document.all("divValidCharMoreInfo").offsetWidth;
// var height = oPopup.document.all("divValidCharMoreInfo").offsetHeight;
oPopup.show(x, y, height, width, document.body);
}
event.cancelBubble = true;
}
</script>
<%--Popup功能高级应用JS--%>
<script language="javascript" type="text/javascript">
function clientValidator_AX(AX,zhz)
{
if(document.getElementById("TextBox1").value=="AX")
{
zhz.IsValid=true;
}
else
{
zhz.IsValid=false;
}
}
</script>
<%--Popup功能高级应用CSS--%>
<style type="text/css">
.moreInformationValidCharSet
{}{
cursor:hand;
color:blue;
font-family:arial;
font-size:10px;
text-decoration:underline
}
</style>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<span onmousemove="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout="OnMouseOutValidCharactersMoreInformation()">
<font color="olive">基本功能演示:鼠标放我上面!</font>
</span>
<br />
<div>
只有文本框输入的内容为【AX】时,页面才进行PostBack动作!
</div>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="点我" /><br />
<asp:CustomValidator ID="CustomValidator_AX" runat="server" ErrorMessage="" ClientValidationFunction="clientValidator_AX" ControlToValidate="TextBox1" Display="Dynamic" ValidateEmptyText="True"></asp:CustomValidator>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string errorMessage = "Invalid characters or format have been entered." +
" <span onmouseout='javascript:OnMouseOutValidCharactersMoreInformation()' " +
"onmousemove='javascript:OnMouseMoveValidCharactersMoreInformation({0}, {1}, {2})' class='moreInformationValidCharSet' >" +
"More Information." + "</span>";
//这句话会报错,我研究了2个小时才找出来的.Why?自己想下就知道了,明摆着呢!
//this.CustomValidator_AX.ErrorMessage = string.Format(errorMessage, "这里输入详细错误!", 320, 70);
this.CustomValidator_AX.ErrorMessage = String.Format(errorMessage, "\"这里输入详细错误\"", 320, 70);
}
}
<span onmousemove="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout="OnMouseOutValidCharactersMoreInformation()">
这个功能比较好,用处也比较多,就有了这篇blog,其中,调试用了2个小时,发现使用javascript就是浪费时间!太TMD的难调试了!
为了方便大家Copy代码,我就没有把JS文件和CSS文件写在单独的file里!
【前台】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><%--引用外部文件的格式--%><%--<link href="../MessageBox.css" rel="stylesheet" type="text/css" />--%><%--<script language="javascript" src="../Owner.js" type="text/jscript"></script>--%><%--实现Popup功能--%><script language="javascript" type="text/javascript">//Create a popup windowvar oPopup = window.createPopup();var oPopupBody = oPopup.document.body;oPopupBody.innerHTML = '<DIV id="divValidCharMoreInfo"><DIV ID="divValidCharMessage">AX made:</DIV><DIV ID="divValidCharSet"></DIV></DIV>';oPopupBody.style.backgroundColor = "lightyellow";oPopupBody.style.border = "solid black 1px";oPopupBody.style.padding = "3px";oPopup.document.all("divValidCharMessage").style.color = "green";oPopup.document.all("divValidCharMessage").style.fontFamily = "arial";oPopup.document.all("divValidCharSet").style.fontFamily = "arial";oPopup.document.all("divValidCharMessage").style.fontSize = "9px";oPopup.document.all("divValidCharSet").style.fontSize = "9px";oPopup.hide();//hide the pop-up windowfunction OnMouseOutValidCharactersMoreInformation(){ oPopup.hide();}//show the pop-up windowfunction OnMouseMoveValidCharactersMoreInformation(charSet, height, width){ if (!oPopup.isOpen) { var obj = event.srcElement;// alert(event.srcElement.innerHTML);// alert(charSet); oPopup.document.all("divValidCharSet").innerHTML = "Input the detail info in herre.<br />"+charSet;// oPopup.document.all("divValidCharMessage").innerText = "";// alert(obj.parent);// var x = OffsetLeft(obj.parent) + event.clientX;// var y = OffsetTop(obj.parent) + event.clientY + 5; var x = event.clientX; var y = event.clientY + 5; // var width = oPopup.document.all("divValidCharMoreInfo").offsetWidth; // var height = oPopup.document.all("divValidCharMoreInfo").offsetHeight; oPopup.show(x, y, height, width, document.body); } event.cancelBubble = true;}</script><%--Popup功能高级应用JS--%><script language="javascript" type="text/javascript">function clientValidator_AX(AX,zhz){ if(document.getElementById("TextBox1").value=="AX") { zhz.IsValid=true; } else { zhz.IsValid=false; }}</script><%--Popup功能高级应用CSS--%><style type="text/css">.moreInformationValidCharSet{}{ cursor:hand; color:blue; font-family:arial; font-size:10px; text-decoration:underline}</style> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <span onmousemove="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout="OnMouseOutValidCharactersMoreInformation()"> <font color="olive">基本功能演示:鼠标放我上面!</font> </span> <br /> <div> 只有文本框输入的内容为【AX】时,页面才进行PostBack动作! </div> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="点我" /><br /> <asp:CustomValidator ID="CustomValidator_AX" runat="server" ErrorMessage="" ClientValidationFunction="clientValidator_AX" ControlToValidate="TextBox1" Display="Dynamic" ValidateEmptyText="True"></asp:CustomValidator> </div> </form> </body></html>【后台】
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string errorMessage = "Invalid characters or format have been entered." + " <span onmouseout='javascript:OnMouseOutValidCharactersMoreInformation()' " + "onmousemove='javascript:OnMouseMoveValidCharactersMoreInformation({0}, {1}, {2})' class='moreInformationValidCharSet' >" + "More Information." + "</span>"; //这句话会报错,我研究了2个小时才找出来的.Why?自己想下就知道了,明摆着呢! //this.CustomValidator_AX.ErrorMessage = string.Format(errorMessage, "这里输入详细错误!", 320, 70); this.CustomValidator_AX.ErrorMessage = String.Format(errorMessage, "\"这里输入详细错误\"", 320, 70); }}【使用】
直接为控件添加两个触发事件就OK了.如下:
<span onmousemove="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout="OnMouseOutValidCharactersMoreInformation()">
【效果】
浙公网安备 33010602011771号