AJAX 浮动tip
来源:互联网 发布:淘宝店铺卖点怎么写 编辑:程序博客网 时间:2024/06/05 06:42
tooltip.html
tooltip.php
- <html>
- <head>
- <title>Ajax Tool Tip</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();//创建xmlHttp
- offsetEl = element;//获取当前对象
- var url = "tooltip.php?key="+escape(element.id);//加密传送当前位置
- xmlHttp.open("GET",url,true);
- xmlHttp.onreadystatechange = callback;
- xmlHttp.send(null);
- }
- function callback() {
- if (xmlHttp.readyState == 4)
- {
- if ((xmlHttp.status == 200)|(xmlHttp.status == 0))//0本地相应
- {
- 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";
- //dataDiv.setAttribute("border","none");
- }
- //-->
- </script>
- </head>
- <body>
- <h1>Ajax Tool Example</h1>
- <h3>Golf Courses</h3>
- <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" />
- <tbody>
- <tr><td id="1" onmouseover="getCourseData(this);" onmouseout="clearData();">Autusta National</td></tr>
- <tr><td id="2" onmouseover="getCourseData(this);" onmouseout="clearData();">Pinehurst No.2</td></tr>
- <tr><td id="3" onmouseover="getCourseData(this);" onmouseout="clearData();">St.Andrews</td></tr>
- <tr><td id="4" onmouseover="getCourseData(this);" onmouseout="clearData();">Baltusrol Golf</td></tr>
- </tbody>
- </table>
- <div id="popup" style="position:absolute;">
- <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" />
- <tbody id="courseDataBody"></tbody>
- </table>
- </div>
- </body>
- </html>
- <?php
- header('Content-Type: text/xml');
- $resArray = array (
- '1'=>array('par'=>'par1','length'=>'leng1'),
- '2'=>array('par'=>'par2','length'=>'leng2'),
- '3'=>array('par'=>'par3','length'=>'leng3'),
- '4'=>array('par'=>'par4','length'=>'leng4')
- );
- $key=$_GET['key'];
- $res="<response><par>".$resArray[$key]['par']."</par><length>".$resArray[$key]['length']."</length></response>";
- echo $res;
- ?>
- AJAX 浮动tip
- 给特定 View 增加浮动的 Tip 效果
- Tip #10 使用Google AJAX 库 API
- 浮动留言板(jQuery 插件+Ajax)
- tip
- Tip
- tip
- Tip:
- TIP
- Tip
- tip
- Tip
- Tip
- tip
- Tip #6 用ASP.NET AJAX判断当前浏览器类型
- Tip #7 使用ASP.NET Ajax的trace
- django使用ajax post数据403错误解决方法 (tip)
- Ajax显示一个浮动的窗口(实例)
- oracle如何查看执行计划
- .Net开源程序大全 [收藏]
- scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
- const的思考(柴凯)
- 公司的党支部会议
- AJAX 浮动tip
- C#实现获取硬盘编号、CPU编号及类型、内存大小及使用情况
- const用法小结
- JavaScript获取iframe中的HTML代码的方法
- 产生是否继续屏幕
- 如何通过SQL语句修改系统日期和时间
- 使用 Unbound 创建DNS服务器
- linux学习疑惑——手动分区
- [知识普及贴]中国人不可不知道的知识(怕以后找不到了~~) [经典,值得收藏]