- 浏览: 125046 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
l85912502:
Tomcat虽然是跨平台的,但是,如果想让Tomcat运行到最 ...
tcnative-1.dll文件 -
iyangxin:
不错不错!
MyEclipse 7.0下载 + 汉化 + doc汉化 -
jingguohao:
憋的久了 就想释放了。。。
为什么一提到裸*聊、艳照 网民就兴奋? -
wsdsgfuqiang:
cqh520llr 写道动态模板怎么给模板加完整的一行
JAVA操作Excel,读取Excel模板动态写入数据并生成Excel -
cqh520llr:
jb,动态模板懂吗?
JAVA操作Excel,读取Excel模板动态写入数据并生成Excel
Color=#cccccc cellSpacing=0 cellPadding=1 width="80%" align=center bgColor=#ffffff border=1 heihgt="">
tooTip.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Tooltip</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 = "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, 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>Ajax Tooltip 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();">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" cellspacing="2" cellpadding="2"/>
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
ToolTipServlet.java:
/*
* ToolTipServlet.java
*
* Created on June 30, 2005, 8:29 PM
*/
package ajaxbook.chap4;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.*;
import javax.servlet.http.*;
/**
*
* @author nate
* @version
*/
public class ToolTipServlet extends HttpServlet {
private Map courses = new HashMap();
public void init(ServletConfig config) throws ServletException {
CourseData augusta = new CourseData(72, 7290);
CourseData pinehurst = new CourseData(70, 7214);
CourseData standrews = new CourseData(72, 6566);
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);
}
/** Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
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();
}
/** Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/** Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}
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;
}
}
}
注释:提示框的位置是计算距离顶部的距离
eg:
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
发表评论
-
大数据学习0基础葵花宝典
2017-03-16 10:09 404BIGDATA葵花宝典 1、虚拟机安装CentOS VMwar ... -
SQL 左外连接,右外连接,全连接,内连接
2010-08-29 22:22 1147联接条件可在 FROM ... -
gethibernatetemplate find条件查询方法
2010-08-29 16:12 1528Spring中常用的hql查询方法(getHibernateT ... -
图解SSH框架配置步骤
2010-08-27 12:02 1037现在开发的一个项目使用S2SH框架,配置环境用了一两天,现在把 ... -
在JSP中配置FCKeditor 2.6.4
2010-01-07 11:21 11041.FCKeditor 介绍FCKeditor 这个开源的HT ... -
struts2 文件下载 修正中文问题
2009-11-06 17:28 1710在BlogJava上已经有一位作者阐述了文件上传的问题,地址是 ... -
MyEclipse 7.0下载 + 汉化 + doc汉化
2009-03-31 16:17 22207MyEclipse7.0 下面是官网就 ... -
每位新手都要搞懂弄明白的事
2009-03-12 16:29 752对于这个系列里的问题,每个学Java的人都应该搞懂。当然,如果 ... -
关于Oracle学习以及DBA工作机会
2008-12-29 16:59 1048最近有很多朋友发邮件或者在QQ/MSN上向我咨询关于学习和工作 ... -
DBA 2.0的时代与 Oracle促进的变革
2008-12-27 11:29 747这几天看到Kamus和Piner分 ... -
Oracle10g RAC安装手册2
2008-07-21 09:34 6356第五部分 安装配置Oracle RAC5.1 配置环境变量5. ... -
Oracle10g RAC安装手册1
2008-07-21 09:33 4560概述本手册在以下环境 ... -
JAVA操作Excel,读取Excel模板动态写入数据并生成Excel
2008-07-05 10:24 4882现在来看看如何读取Excel模板然后把动态数据写入到 ... -
配置AWSTATS用于分析Tomcat的访问日志
2008-06-30 11:20 3359配置AWSTATS用于分析Tomcat ... -
提高Java水平的十大技术
2008-06-26 22:08 967本文列出了当今计算机软件开发和应用领域最重要十种关键技术排名, ... -
Java技术开源搜索引擎
2008-06-24 22:26 1978Egothor Egothor是一个用Java编写的开源而高 ... -
Spring MVC与struts比较
2008-06-21 10:20 5226下面的内容只是对web层的对比,很浮浅,spring的东西, ... -
Seam能否取代Struts?
2008-06-13 15:12 1433本文分析了JBoss Seam ... -
Eclipse快捷键大全(转载)
2008-06-13 14:48 823Ctrl+1 快速修复(最经典 ... -
最吸引眼球的网站——钱包网
2008-05-27 13:58 1071众所周知,今年是web2.0在互联网上大行其道的一年,涌现出众 ...
相关推荐
使用Ajax+servlet技术模拟搜索框智能提示。
右下角提示框 源码(ajax实现)稍加修改 就可以成为自己的了。。。
本案例使用Servlet+Ajax实现搜索框智能提示,仿百度智能提示。
原生ajax+servlet实现智能提示框
通过ajax+servlet实现搜索智能框提示 异步加载
实现右下角提示框 Ajax实现 修正版 只要稍加修改就可以成为自己想要的了。。。
jquery实现ajax搜索框下拉提示小插件jSuggest
NULL 博文链接:https://chaoyi.iteye.com/blog/2162368
ajax实现输入提示(支持中文) 自己从网上搜到的一些代码,然后加了些自己的东西, 需要的朋友可以看看
servlet+ajax搜索提示。 仿Google Suggest,使用ajax技术实现动态获取搜索提示的功能,当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。
用ajax实现的asp页输入框提示,比较经典,也比较简单实用。
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,处理页面接收到值后进行模糊匹配查询,然后将结果返回,输入页收到返回的数据后在处理,并生成相应的页面显示在页面上。若是jquery ...
Java Web,简单的应用Ajax+servlet实现的输入、搜索的提示效果,简单修改连接数据库就可以实现更加智能的提示效果
基于Servlet和Ajax实现搜索框智能提示
Servlet+Ajax实现简易的仿百度搜索框智能提示
用AJAX实现类似GOOGLE搜索框的功能
这是一个jquery提示消息框,平时我们所做的Ajax操作,如果多次提交,效果看不出来,有了这个功能,使得有更好的用户体验,提示出来的信息,两秒后消失!该功能由本人实现,属于原创,所以多要了点分,也不为过
主要介绍了Servlet+Ajax实现智能搜索框智能提示功能,需要的朋友可以参考下
freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax 请求json数据格式 联动下拉 漂亮的弹出框 提示框freemarker ajax ...
采用Ajax和Jquery和语言,基于Microsoft Visual Studio 2008平台,采用c#语言实现谷歌百度搜索下来提示,欢迎使用