提示信息窗口的JS实现(附源码)_AX
这个功能比较好,用处也比较多,就有了这篇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()">
少帮主的斧头好久不饮血了!
