AJAX 浮动tip

最新推荐文章于 2024-05-29 17:46:13 发布
最新推荐文章于 2024-05-29 17:46:13 发布
阅读量654 收藏
点赞数
分类专栏： AJAX 文章标签： ajax border 加密 null url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baihuo/article/details/2880464
版权
 tooltip.html
  1. <html>
  2.     <head>
  3.     <title>Ajax Tool Tip</title>
  4.     <script type="text/javascript">
  5.     <!--
  6.         var xmlHttp;
  7.         var dataDiv;
  8.         var dataTable;
  9.         var dataTableBody;
  10.         var offsetEl;
  12.         function createXMLHttpRequest() {
  13.             if (window.ActiveXObject)
  14.             {
  15.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  16.             }
  17.             else if (window.XMLHttpRequest)
  18.             {
  19.                 xmlHttp = new XMLHttpRequest();
  20.             }
  21.         }
  23.         function initVars() {
  24.             dataTableBody = document.getElementById("courseDataBody");
  25.             dataTable = document.getElementById("courseData");
  26.             dataDiv = document.getElementById("popup");
  27.         }
  29.         function getCourseData(element) {
  30.             initVars();//定义参数
  31.             createXMLHttpRequest();//创建xmlHttp
  32.             offsetEl = element;//获取当前对象
  33.             var url = "tooltip.php?key="+escape(element.id);//加密传送当前位置
  35.             xmlHttp.open("GET",url,true);
  36.             xmlHttp.onreadystatechange = callback;
  37.             xmlHttp.send(null);
  38.         }
  40.         function callback() {
  41.             if (xmlHttp.readyState == 4)
  42.             {
  43.                  if ((xmlHttp.status == 200)|(xmlHttp.status == 0))//0本地相应
  44.                  {
  45.                     setData(xmlHttp.responseXML);
  46.                  }
  47.             }
  48.         }
  50.         function setData(courseData) {
  51.             clearData();
  52.             setOffsets();
  53.             var length = courseData.getElementsByTagName("length")[0].firstChild.data;
  54.             var par = courseData.getElementsByTagName("par")[0].firstChild.data;
  56.             var row,row2;
  57.             var parData = "Par: " + par;
  58.             var lengthData = "Length: " + length;
  60.             row = createRow(parData);
  61.             row2 = createRow(lengthData);
  63.             dataTableBody.appendChild(row);
  64.             dataTableBody.appendChild(row2);
  65.         }
  67.         function createRow(data) {
  68.             var row,cell,txtNode;
  69.             row = document.createElement("tr");
  70.             cell = document.createElement("td");
  72.             cell.setAttribute("bgcolor","#FFFAFA");
  73.             cell.setAttribute("border","0");
  75.             txtNode = document.createTextNode(data);
  76.             cell.appendChild(txtNode);
  77.             row.appendChild(cell);
  79.             return row;
  80.         }
  82.         function setOffsets() {
  83.             var end = offsetEl.offsetWidth;//整数 绝对宽度
  84.             var top = calculateOffsetTop(offsetEl);//整数  相对于版面或是指定父坐标，计算出上侧位置
  85.             dataDiv.style.border = "black 1px solid";
  86.             dataDiv.style.left = end + 15 +"px";
  87.             dataDiv.style.top = top + "px";
  88.         }
  90.         function calculateOffsetTop(field) {
  91.             return calculateOffset(field,"offsetTop");
  92.         }
  94.         function calculateOffset(field,attr) {//相对于版面或是指定父坐标，计算出上侧位置
  95.             var offset = 0;
  96.             while (field)//逐级计算出相对位置，并叠加
  97.             {
  98.                 offset += field[attr];
  99.                 field = field.offsetParent;
  100.             }
  101.             return offset;
  102.         }
  104.         function clearData() {
  105.             var ind = dataTableBody.childNodes.length;
  106.             for (var i = ind-1;i >=0 ;i-- )
  107.             {
  108.                 dataTableBody.removeChild(dataTableBody.childNodes[i]);
  109.             }
  110.             dataDiv.style.border = "none";
  111.             //dataDiv.setAttribute("border","none");
  112.         }
  114.     //-->
  115.     </script>
  116.     </head>
  117.     <body>
  118.         <h1>Ajax Tool Example</h1>
  119.         <h3>Golf Courses</h3>
  120.         <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" />
  121.             <tbody>
  122.                 <tr><td id="1" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Autusta National</td></tr>
  123.                 <tr><td id="2" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Pinehurst No.2</td></tr>
  124.                 <tr><td id="3" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">St.Andrews</td></tr>
  125.                 <tr><td id="4" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">Baltusrol Golf</td></tr>
  126.             </tbody>
  127.         </table>
  128.         <div id="popup" style="position:absolute;">
  129.             <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" />
  130.                 <tbody id="courseDataBody"></tbody>
  131.             </table>
  132.         </div>
  133.     </body>
  134. </html>
tooltip.php
  1. <?php
  2. header('Content-Type: text/xml');
  3. $resArray = array (
  4.     '1'=>array('par'=>'par1','length'=>'leng1'),
  5.     '2'=>array('par'=>'par2','length'=>'leng2'),
  6.     '3'=>array('par'=>'par3','length'=>'leng3'),
  7.     '4'=>array('par'=>'par4','length'=>'leng4')
  8. );
  9. $key=$_GET['key'];
  10. $res="<response><par>".$resArray[$key]['par']."</par><length>".$resArray[$key]['length']."</length></response>";
  11. echo $res;
  12. ?>

baihuo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery tip提示框
张先生
05-13 1万+
html： jquery tip提示 js调用：
Ajax实现登录案例
10-14
主要为大家详细介绍了Ajax实现登录案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax onmouseover显示Tip
Lynn
01-12 230
看到很多网站上面 鼠标停留在商品图片上面 边上显示出个提示层 显示些简单的商品信息 呵呵 研究了下 终于弄了个出来 通过《ajax基础教程》得到很大提示 但是它的有很多错 呵呵 var tmp=null; // 声明一个临时变量 存贮图片位置的表格 var xmlHttp = null; function createXMLHttpRequest() { i...
Ajax tooltip 动态ajax载入tips
freejs
03-25 363
Ajax tooltip 动态ajax载入tips   演示     XML/HTML Code &lt;div id="mainContainer"&gt;       &lt;div id="mainContent"&gt;           &lt;table width="100%" class="productTable"&gt;     
ajax TooTip 异步显示动态数据
小虫乱爬--爬爬也论技术 博客
07-19 654
body,td,th { font-size: 12px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; } aaaaaaaaaaaaa
流行的jQuery信息提示插件(jQuery Tooltip Plugin)
wjboy49的专栏
06-25 259
信息提示虽然是小东西，但是在网站设计中却起到了巨大的作用。如果你网站的信息提示做的好，会给访客留下非常深刻的印象。下面有30个非常流行的 jQuery信息提示插件，希望对各位有所帮助。记住，所有的这些都是为了使网站设计更好。   1. Dynamic tooltip 非常漂亮的tooltip！有渐变、透明、阴影等效果。 Dynamic tooltip 2. P...
【实战】AJAX之『后台列表管理模块』
小管打天下的博客
09-04 166
一、源码 知识补充 caption：标题标签 border-collapse：collapse去除双边框 table显示：display-table text-decoration：none 去除文本默认样式 .clearfix::after{content=’’, display=‘table’, clear:both}：清除浮动 布局方式：thead-tbody-tfoot setselectionRange(star, over)：选中输入框中的文字 ; (function (doc) {
Extjs tip的用法
CenturyMagus的专栏
07-03 2373
<!--google_ad_client = "pub-0068659036624865";/* 468x60, 创建于 09-9-23 */google_ad_slot = "6909668336";google_ad_width = 468;google_ad_height = 60;// -->ExtJs是通过Ext.ToolTip和Ext.Qui
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajax、servlet
10-30
ajax、servlet
SpringBoot使用Ajax实现登录
12-02
SpringBoot使用Ajax实现登录例子
仿Vista风格的JS Ajax浮动窗口特效.rar
07-10
一个仿Vista风格的JS Ajax浮动窗口特效，也就是大家常见的网页弹出层，可在这个窗口中打个网址，其实本浮动层代码实现了用JS模拟Win界面窗口的效果，窗口下边还有类似于最小化后的效果，这个拖动可随意拖动位置，可...
AJAX 自动刷新页面
白活随笔
09-02 3232
count.htmlaaaaaavar xmlHttp;function createXMLHttpRequest(){    if (window.ActiveXObject)    {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }    else if (window.XMLHttpRequest)    {    
AJAX xmlHttp.status = 0 ,xmlHttp.status = 200
白活随笔
09-02 3014
xmlHttp.status==0    本地响应成功。       如果用==200    你可以配置一下服务器    然后在xmlHttp.open方法中将url参数设置为形如http://...的字符串。
AJAX基础知识
m0_59365887的博客
05-23 575
技术网页应用能够快速地将数据更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作.针对同一个资源（比如博客）的增删改查，请求的接口一般是一样的，服务端会通过获取请求方。对象：这是一个浏览器内置对象，可以向指定的地址发送请求。前后端分离项目开发中，不同的目的要使用不同的请求方式.式，然后将不同的请求转发给不同的代码来处理。属性的值，可以知道请求当前正处于哪个阶段。：向服务端提交数据，用于新增。：向服务端提交数据，用于修改。：请求已完成，且响应已完成。：用于无刷新的更新页面。
jquery---ajax方法示例
最新发布
I_am_shy的博客
05-29 95
ajax方法有一个参数，一定长度的对象，内部指定了ajax的请求地址和格式，方式等等，它可以有以下的属性和值。
Ajax与Axios
weixin_51416826的博客
05-29 239
相比于原生的Ajax，Axios提供了更加方便的API，可以更容易地处理请求和响应，处理错误，并且支持取消请求等功能。总结来说，Axios是Ajax概念的一个现代化实现，它以更现代的JavaScript特性（如Promise）为基础，提供了更便捷、强大的HTTP请求处理能力，特别适合现代Web应用的开发需求。2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。Ajax和Axios都是用于在前端进行数据交互的工具，但它们有一些重要的区别，从使用方式到功能特性都有所不同。
ajax嵌套ajax
07-28
在前端开发中，可以使用Ajax嵌套Ajax来实现多个异步请求的依次执行。具体步骤如下： 1. 在第一个Ajax请求的回调函数中，发送第二个Ajax请求。可以使用`$.ajax()`方法或者其他类似的方法发送异步请求。 2. 在第二个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值