<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>自动提示功能</title> <script type="text/javascript"> var xmlHttp; var dataDiv; var dataTable; var dataTableBody; var offSetEl; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTp"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function initVars() { dataTableBody = document.getElementById("courseDataBody"); dataTable = document.getElementById("courseData"); dataDiv = document.getElementById("popup"); } function getCourseData(element) { initVars(); createXMLHttpRequest(); offSetEl = element; var url = "WS.asmx/AutoToolTip?key=" + escape(element.id); xmlHttp.onreadystatechange = callback; xmlHttp.open("GET", url, true); xmlHttp.send(null); } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setData(xmlHttp.responseXML); } } } function setData(courseData) { clearData(); setOffsets(); var length = courseData.getElementsByTagName("length")[0].firstChild.data; var par = courseData.getElementsByTagName("par")[0].firstChild.data; var row, row2; var parData = "Par:" + par; var lengthData = "Length:" + length; row = createRow(parData); row2 = createRow(lengthData); dataTableBody.appendChild(row); dataTableBody.appendChild(row2); } function createRow(data) { var row, cell, txtNode; row = document.createElement("tr"); cell = document.createElement("td"); cell.setAttribute("bgcolor", "#FFFAFA"); cell.setAttribute("border", "0"); txtNode = document.createTextNode(data); cell.appendChild(txtNode); row.appendChild(cell); return row; } function setOffsets() { var end = offSetEl.offsetWidth; var top = calculateOffsetTop(offSetEl); dataDiv.style.border = "black 1px solid"; dataDiv.style.left = end + 15 + "px"; dataDiv.style.top = top + "px"; } function calculateOffsetTop(field) { return calculateOffset(field, "offsetTop"); } function calculateOffset(field, attr) { var offset = 0; while (field) { offset += field[attr]; field = field.offsetParent; } return offset; } function clearData() { var ind = dataTableBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) { dataTableBody.removeChild(dataTableBody.childNodes[i]); } dataDiv.style.border = "none"; } </script> </head> <body> <h1> 自动提示</h1> <h3> 课程</h3> <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2"> <tbody> <tr> <td id="1" onmousemove="getCourseData(this);" onmouseout="clearData();"> 课程1 </td> </tr> <tr> <td id="2" onmousemove="getCourseData(this);" onmouseout="clearData();"> 课程2 </td> </tr> <tr> <td id="3" onmousemove="getCourseData(this);" onmouseout="clearData();"> 课程3 </td> </tr> <tr> <td id="4" onmousemove="getCourseData(this);" onmouseout="clearData();"> 课程4 </td> </tr> </tbody> </table> <div style="position: absolute;" id="popup"> <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2"> <tbody id="courseDataBody"> </tbody> </table> </div> </body> </html>
后台代码如下：
public class CourseData { private int par; private int length; public CourseData(int par, int length) { this.par = par; this.length = length; } public int GetPar() { return this.par; } public int GetLength() { return this.length; } } public Dictionary<int, CourseData> initData() { Dictionary<int, CourseData> courseDatas = new Dictionary<int, CourseData>(); CourseData courseData1 = new CourseData(72, 7290); CourseData courseData2 = new CourseData(70, 7214); CourseData courseData3 = new CourseData(72, 6566); CourseData courseData4 = new CourseData(70, 7392); courseDatas[1] = courseData1; courseDatas[2] = courseData2; courseDatas[3] = courseData3; courseDatas[4] = courseData4; return courseDatas; } [WebMethod] public void AutoToolTip() { var task = Context.Request.QueryString["key"]; var key = int.Parse(task); CourseData data = initData()[key]; Context.Response.ContentType = "text/xml"; Context.Response.Write("<response>"); Context.Response.Write("<par>" + data.GetPar() + "</par>"); Context.Response.Write("<length>" + data.GetLength() + "</length>"); Context.Response.Write("</response>"); }
运行效果如下：
