这个功能比较好,用处也比较多,就有了这篇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 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);
}
}
【使用】
直接为控件添加两个触发事件就OK了.如下:
<span onmousemove="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout="OnMouseOutValidCharactersMoreInformation()">
【效果】
博客园→斧头帮少帮主
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架