注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

断尘居

温柔的男人像海洋。

 
 
 
 
 

日志

 
 

Ajax创建工具提示  

2010-09-17 03:56:54|  分类: JS / jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<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
  {
   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="ToolTipServlet?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)
   {
    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,textNode;
  row=document.createElement("tr");
  cell=document.createElement("td");
  cell.setAttribute("bgcolor","#FFFAFA");
  cell.setAttribute("border",0);
  textNode=document.createTextNode(data);
  cell.appendChild(textNode);
  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+1+"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 index=dataTableBody.childNodes.length;
  for(var i=index-1;i>=0;i--)
  {
   dataTableBody.removeChild(dataTableBody.childNodes[i]);
  }
  dataDiv.style.border="none";
 }
</script>
<h1>Ajax Tool Tip Example</h1>
<h3>Golf Coursers</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellpadding="0" cellspacing="0">
 <tbody>
  <tr><td id="1" onmouseover="getCourseData(this);" onmouseout="clearData()">
  Augusta 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 links
  </td></tr>
  <tr><td id="4" onmouseover="getCourseData(this);" onmouseout="clearData()">
  Baltusrol golf club
  </td></tr>
 </tbody>
</table>
<div style="position:absolute;" id="popup">
 <table id="courseData" bgcolor="#fffafa" border="0" cellpadding="2" cellspacing="2">
 <tbody id="courseDataBody"></tbody>
 </table>
</div>
</BODY>
</HTML>
-----------ToopTipServlet.java-----------------------------
package com.ajax;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.*;
import javax.servlet.http.*;

public class ToolTipServlet extends HttpServlet
{
 private Map courses=new HashMap();
 public void init(ServletConfig conifg)throws ServletException
 {
  CourseData augusta=new CourseData(72,7290);
  CourseData pinehurst=new CourseData(70,7214);
  CourseData standrews=new CourseData(72,6565);
  CourseData baltusrol=new CourseData(70,7392);
  courses.put(new Integer(1),augusta);
  courses.put(new Integer(2),pinehurst);
  courses.put(new Integer(3),standrews);
  courses.put(new Integer(4),baltusrol);
 }
 protected void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException
 {
  Integer key=Integer.valueOf(request.getParameter("key"));
  CourseData data=(CourseData)courses.get(key);
  PrintWriter out=response.getWriter();
  response.setContentType("text/xml");
  response.setHeader("Cache-Control","no-cache");
  out.println("<response>");
  out.println("<par>"+data.getPar()+"</par>");
  out.println("<length>"+data.getLength()+"</length>");
  out.println("</response>");
  out.close();
 }

 private 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;
  }
 }

}

  评论这张
 
阅读(754)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017