站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Ajax- 创建工具提示
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span> <div style="clear:both;"></div> 我们见过许多使用Ajax的应用,到目前为止,我们认为最有意思的是DVD租借服务Netflix。当浏览Netflix中的各个选择时,会看到各类最新影片的相关图片和文字。当把鼠标停在一个给定影片的图片上时,就会看到更多的信息(见图4-12)。尽管不使用Ajax也能达到这个效果,但第一次获取页面时要纳入大量可能永远也不会用到的信息。通过使用Ajax,只会在需要时发送所需的信息。 <br> [[Image:image012.jpg]]图12 [[Image:image013.jpg]] 图13 图4-12 Netflix浏览器特性<br> 虽然我们的例子做得没有这么漂亮,但你能从中了解到如何提供自己的动态工具提示信息。客户端代码相当简单(见代码清单4-11)。这里最有意思的是calculateOffset()方法。在理想情况下,可以依赖于当前元素的offset属性。不过,如果要跨浏览器,这样做不一定可行,不同浏览器上的偏移量可能不同。但是,你可以访问DOM来生成一个准确的偏移量,并使用这个偏移量来放置动态内容。这个例子中有一个简单的表,其中包含著名的高尔夫球场,当用户把鼠标停在表中某个单元格上时,会显示一些额外的信息。<br> 代码清单4-11 toolTip.html<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <head><br> <title>Ajax Tool Tip</title><br> <script type="text/javascript"><br> var xmlHttp;<br> var dataDiv;<br> var dataTable;<br> var dataTableBody;<br> var offsetEl;<br> function createXMLHttpRequest() {<br> if (window.ActiveXObject) {<br> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br> }<br> else if (window.XMLHttpRequest) {<br> xmlHttp = new XMLHttpRequest();<br> }<br> }<br> function initVars() {<br> dataTableBody = document.getElementById("courseDataBody");<br> dataTable = document.getElementById("courseData");<br> dataDiv = document.getElementById("popup");<br> }<br> function getCourseData(element) {<br> initVars();<br> createXMLHttpRequest();<br> offsetEl = element;<br> var url = "ToolTipServlet?key=" + escape(element.id);<br> xmlHttp.open("GET", url, true);<br> xmlHttp.onreadystatechange = callback;<br> xmlHttp.send(null);<br> }<br> function callback() {<br> if (xmlHttp.readyState == 4) {<br> if (xmlHttp.status == 200) {<br> setData(xmlHttp.responseXML);<br> }<br> }<br> }<br> function setData(courseData) {<br> clearData();<br> setOffsets();<br> var length =<br> courseData.getElementsByTagName("length")[0].firstChild.data;<br> var par = courseData.getElementsByTagName("par")[0].firstChild.data;<br> var row, row2;<br> var parData = "Par: " + par<br> var lengthData = "Length: " + length;<br> row = createRow(parData);<br> row2 = createRow(lengthData);<br> dataTableBody.appendChild(row);<br> dataTableBody.appendChild(row2);<br> }<br> function createRow(data) {<br> var row, cell, txtNode;<br> row = document.createElement("tr");<br> cell = document.createElement("td");<br> cell.setAttribute("bgcolor", "#FFFAFA");<br> cell.setAttribute("border", "0");<br> txtNode = document.createTextNode(data);<br> cell.appendChild(txtNode);<br> row.appendChild(cell);<br> return row;<br> }<br> function setOffsets() {<br> var end = offsetEl.offsetWidth;<br> var top = calculateOffsetTop(offsetEl);<br> dataDiv.style.border = "black 1px solid";<br> dataDiv.style.left = end + 15 + "px";<br> dataDiv.style.top = top + "px";<br> }<br> function calculateOffsetTop(field) {<br> return calculateOffset(field, "offsetTop");<br> }<br> function calculateOffset(field, attr) {<br> var offset = 0;<br> while(field) {<br> offset += field[attr];<br> field = field.offsetParent;<br> }<br> return offset;<br> }<br> function clearData() {<br> var ind = dataTableBody.childNodes.length;<br> for (var i = ind - 1; i >= 0 ; i--) {<br> dataTableBody.removeChild(dataTableBody.childNodes[i]);<br> }<br> dataDiv.style.border = "none";<br> }<br> </script><br> </head><br> <body><br> <nowiki> <h1>Ajax Tool Tip Example</h1></nowiki><br> <nowiki><h3>Golf Courses</h3></nowiki><br> <nowiki><table id="courses" bgcolor="#FFFAFA" border="1"</nowiki><br> <nowiki>cellspacing="0" cellpadding="2"/></nowiki><br> <nowiki><tbody></nowiki><br> <nowiki><tr><td id="1" onmouseover="getCourseData(this);"</nowiki><br> <nowiki>onmouseout="clearData();">Augusta National</td></tr></nowiki><br> <nowiki><tr><td id="2" onmouseover="getCourseData(this);"</nowiki><br> <nowiki>onmouseout="clearData();">Pinehurst No. 2</td></tr></nowiki><br> <nowiki><tr><td id="3" onmouseover="getCourseData(this);"</nowiki><br> <nowiki>onmouseout="clearData();"></nowiki><br> <nowiki>St. Andrews Links</td></tr></nowiki><br> <nowiki><tr><td id="4" onmouseover="getCourseData(this);"</nowiki><br> <nowiki>onmouseout="clearData();">Baltusrol Golf Club</td></tr></nowiki><br> <nowiki></tbody></nowiki><br> <nowiki></table><nowiki><br> <div style="position:absolute;" id="popup"><br> <table id="courseData" bgcolor="#FFFAFA" border="0"<br> cellspacing="2" cellpadding="2"/><br> <tbody id="courseDataBody"></tbody><br> </table><br> </div><br> </body><br> </html><br> 要记住,在生产环境中,可能会从某种数据库获取额外的信息,而且servlet中可能不会有内部类!代码清单4-12显示了ToolTipServlet.java。<br> 代码清单4-12 ToolTipServlet.java<br> package ajaxbook.chap4;<br> import java.io.*;<br> import java.util.HashMap;<br> import java.util.Map;<br> import javax.servlet.*;<br> import javax.servlet.http.*;<br> public class ToolTipServlet extends HttpServlet {<br> private Map courses = new HashMap();<br> public void init(ServletConfig config) throws ServletException {<br> CourseData augusta = new CourseData(72, 7290);<br> CourseData pinehurst = new CourseData(70, 7214);<br> CourseData standrews = new CourseData(72, 6566);<br> CourseData baltusrol = new CourseData(70, 7392);<br> courses.put(new Integer(1), augusta);<br> courses.put(new Integer(2), pinehurst);<br> courses.put(new Integer(3), standrews);<br> courses.put(new Integer(4), baltusrol);<br> }<br> /** Handles the HTTP <code>GET</code> method.<br> * @param request servlet request<br> * @param response servlet response<br> */<br> protected void doGet(HttpServletRequest request, HttpServletResponse response)<br> throws ServletException, IOException {<br> Integer key = Integer.valueOf(request.getParameter("key"));<br> CourseData data = (CourseData) courses.get(key);<br> PrintWriter out = response.getWriter();<br> response.setContentType("text/xml");<br> response.setHeader("Cache-Control", "no-cache");<br> out.println("<response>");<br> out.println("<par>" + data.getPar() + "</par>");<br> out.println("<length>" + data.getLength() + "</length>");<br> out.println("</response>");<br> out.close();<br> }<br> private class CourseData {<br> private int par;<br> private int length;<br> public CourseData(int par, int length) {<br> this.par = par;<br> this.length = length;<br> }<br> public int getPar() {<br> return this.par;<br> }<br> public int getLength() {<br> return this.length;<br> }<br> }<br> }<br> 图4-13显示了实际运行的工具提示。 [[category:Ajax]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:开发语言导航
(
编辑
)