使用Ajax自定义工具提示

HTML中的title属性就实现了工具提示功能。然而,它却有三个限制:提示文本分行时不能跨浏览器、第一次获取页面时要纳入大量可能永远也不会用到的信息;不能自定义提示文本样式。而通过使用Ajax,可以突破这些限制,更好地控制提示文本。

工具提示实现了不用刷新页面就能显示更多的信息的功能,比如就地显示另一种语言,比如说就地显示列表详细信息。

大家都知道,HTML中的title属性就实现了这个功能。然而,它却有三个限制:

  • 提示文本分行时不能跨浏览器:在IE中可以使用
,
,vbcrlf,\r
    ,\r等特殊字符来实现,不过它们这些字符在其它浏览器中往往被忽略或转换成空格;
  • 第一次获取页面时要载入大量可能永远也不会用到的信息;
  • 不能自定义提示文本样式,只能使用默认设置。

而通过使用Ajax,可以突破这些限制,更好地控制提示文本。

  • 可以结合CSS实现跨浏览器提示文本分行;
  • 只会在需要时发送所需的信息;
  • 可以结合CSS自定义提示文本样式,甚至结合Javascript以特效的方式显示提示文本。

虽然我们的例子三个功能很有实现,但你能从中了解到如何提供自己的动态工具提示信息。这个例子中有一个关于学生信息的列表,当用户把鼠标停在表中某个单元格上时,会显示从数据库读取的该生的考号及试成绩。如果不存在该生的考试信息,则会提示错误。

客户端代码很简单。这里最有意思的是calculateOffset()方法。在理想情况下,可以依赖于当前元素的offset属性。不过,如果要跨浏览器,这样做不一定可行,不同浏览器上的偏移量可能不同。但是,你可以访问DOM来生成一个准确的偏移量,并使用这个偏移量来放置动态内容。

服务器端代码也很简单,主要根据获取请求的URL参数,从数据库查找相应记录,然后返回一个XML文件到客户端。代码如下:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> 
<% 
//设置编码 
Response.Charset = "UTF-8"; 
// 获取请求的URL参数 
var sid=Request.QueryString("sid"); 
//设定为XML文件 
Response.ContentType="text/xml"; 
//不保留缓存 
Response.CacheControl="no-cache"; 
//输出XML文件声明 
Response.Write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); 
var conn = new ActiveXObject("ADODB.CONNECTION"); 
strconn = "DBQ="+Server.MapPath("../../App_Data/Exam.mdb")+";Driver={Microsoft Access Driver (*.mdb)};"; 
conn.Open(strconn); 
var rs = new ActiveXObject("ADODB.RECORDSET"); 
var sql = "Select ScoreID,Chinese,Maths,English FROM Score Where StudentID = '"+sid+"'"; 
rs.Open(sql,conn,1,1); 
//输出根标记 
Response.Write("<score>"); 
if(!rs.EOF){ 
    //输出子元素 
    Response.Write("<ID>"+rs("ScoreID")+ "</ID>"); 
    Response.Write("<Chinese>"+rs("Chinese")+ "</Chinese>"); 
    Response.Write("<Maths>"+rs("Maths")+ "</Maths>"); 
    Response.Write("<English>"+rs("English")+ "</English>");  
} 
Response.Write("</score>"); 
rs.Close(); 
conn.Close(); 
%>

点击此处查看效果。

发表评论