ajax提示工具条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Ajax Tool Tip </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce: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 = "ToolTipServer.php?key="+escape(element.id); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ setData(xmlHttp.responseXML); } } function setData(courseData){ clearData(); setOffsets(); var tp = courseData.getElementsByTagName("type")[0].firstChild.data; var tt = courseData.getElementsByTagName("title")[0].firstChild.data; var row, row2; var tpData = "Type: " + tp; var ttData = "Title: " + tt; row = createRow(tpData); row2 = createRow(ttData); dataDiv.appendChild(row); dataDiv.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"); cell.setAttribute("width", "500"); cell.setAttribute("height", "50"); 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 = dataDiv.childNodes.length; for(var i=ind-1; i>=0; i--){ dataDiv.removeChild(dataDiv.childNodes[i]); } dataDiv.style.border = "none"; } // --></mce:script> </HEAD> <BODY> <h1>Ajax Tool Tip Example</h1> <h3>Gold Courses</h3> <table id="courses" bgcolor="#FFFAAA" border="1" cellspacing="0" cellpadding="2" /> <tbody id="courseDataBody"> <tr> <td id="1" onMouseOver="getCourseData(this);" onMouseOut="clearData();"> August National</td></tr> <tr> <td id="2" onMouseOver="getCourseData(this);" onMouseOut="clearData();"> PineHuers No. 2</td></tr> <tr> <td id="3" onMouseOver="getCourseData(this);" onMouseOut="clearData();"> St. Andresrew</td></tr> <tr> <td id="4" onMouseOver="getCourseData(this);" onMouseOut="clearData();"> Baltustrol golf club</td></tr> </tbody> </table> <div style="position:absolute; " mce_style="position:absolute; " id="popup"> <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" /> </tbody id="courseData"></tbody> </table> </div> </BODY> </HTML>

你可能感兴趣的:(ajax提示工具条)