JQuery ToolTip

做到了查询这个功能来。。查出来后有相应的结果集。然后每条记录的标题以超链接的形式显示。。以便点击后显示详细信息。但是使用者觉得麻烦。。想直接查询出来后能看到所有的信息。。于是我就想到用tooltip这种气泡的方式来做。

思路：用Ajax异步请求来实现，鼠标放在每条记录标题的超链接上，以气泡的方式显示当前记录的所有信息。
插件：jquery1.3.js 和 jquery tooltip.js

Ajax前面常写的客套代码就不贴了。。就贴解析部分的：

// 解析返回的数据

function parseMessage(){

                            var xmlDoc = req.responseXML.documentElement;

                            var rodeCode = xmlDoc.getElementsByTagName('rodeCode')[0].firstChild.nodeValue;

                            var rodeName = xmlDoc.getElementsByTagName('rodeName')[0].firstChild.nodeValue;

                            var rptFrom = xmlDoc.getElementsByTagName('rptFrom')[0].firstChild.nodeValue;

                            var trobType = xmlDoc.getElementsByTagName('trobType')[0].firstChild.nodeValue;

                            var trobDesc = xmlDoc.getElementsByTagName('trobDesc')[0].firstChild.nodeValue;

                            var trobMatter = xmlDoc.getElementsByTagName('trobMatter')[0].firstChild.nodeValue;

                            document.getElementById('rodeName').innerHTML='路口代码：'+rodeCode+'<br>路口名称：'+rodeName+'<br>报修来源：'+rptFrom+'<br>故障类别：'+trobType+'<br>故障现象：'+trobDesc+'<br>故障原因：'+trobMatter;

}


这个是异步请求查询后返回的数据。

在当前页用到了一个<span id='rodeName' style='display:none;'></span>

Jquery部分：
<script type="text/javascript">

$(document).ready(function(){

$('#base_<%=i %>').hover(function(){

popDetail(<%=i %>);

$('#rodeName').popup('<b>详细信息</b>',$('#base_<%=i %>'),{},{close:'mouseout'});

});

});

</script>

查询出来的结果是循环遍历显示出来的，所以这个jquery部分的代码放在循环体里面了。因为在循环体内每条记录的<a>标签的id是动态的：          

<a href="TroubleDeclareServlet?method=3&id=<%=vo.getId() %>" id="base_<%=i %>"><%=vo.getRodeName() %></a>，这样在JQuery里面才知道当前鼠标触发的是哪个链接。

tooltip已经实现。

问题：查询出来后：
步骤1：鼠标移到任意一条记录上，tooptip框显示出来的内容为空。我把span的display属性去掉。是有值的。而气泡显示出来的为空。
步骤2：鼠标移开，再把鼠标移到刚才那条记录的链接上。值显示出来。
步骤3：再看任意一条记录，显示出信息，但其值为上一次显示的值。重复步骤2方才显示当前记录的信息。。

效果图

[ 此帖被sheepo在2009-08-07 16:57重新编辑 ]