Question

所有

我试图让JQueryUI工具提示和Tablesorter插件一起工作。当我将鼠标悬停在名称上时，我无法显示JQueryUI工具提示，但在单击“重置排序顺序”链接后，工具提示将不会显示。

单击“重置排序顺序”链接后，如何确保显示工具提示。在对表进行排序或分页时，也应显示工具提示。

可以在以下位置查看代码演示：http://jsbin.com/asaxi3/32/

代码在这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
  <title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
  <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
  <link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
  <link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
  <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
  <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
  <script  type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">

  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#" title="I am Student01">Student01</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>

      <td><a href="#" title="I am Student02">Student02</a></td>
      <td>Mathematics</td>
      <td>male</td>

    </tr>
    <tr>
      <td><a href="#" title="I am Student03">Student03</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>

      <td><a href="#" title="I am Student04">Student04</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student05">Student05</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student06">Student06</a></td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student07</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student08</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student09</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student10</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student11</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student12</td>
      <td>Mathematics</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Student13</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Student14</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student15">Student15</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student16</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student17">Student17</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student18">Student18</a></td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student19</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student20</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student21</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student22</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student23</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    </tbody>
</table>
<div id="pager1" class="pager">
  <form>
    <a href="javascript:resetTableOrder(tablebackup)">Reset Sort Order</a>&nbsp;
    <img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
    <img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
    <input type="text" class="pagedisplay"/>
    <img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
    <img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
    <select class="pagesize">
      <option selected="selected"  value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option  value="40">40</option>
    </select>    
  </form>
</div>
  <script type="text/javascript">
  $(function() {
    $("#table1 a").tooltip({
                showURL: false,
                fixPNG: true,
                track:true,
                delay:0
                });
    tablebackup = $("#table1").clone();
    $("#table1")
      .tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorterPager({container: $("#pager1")});
  });


    function resetTableOrder(tablebackup) {

    tablebackup.clone().insertAfter("#table1");
    $("#table1").remove();
    $("#table1")
      .tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorterPager({container: $("#pager1")});
          //Load Tool Tips for links inside the tab container
    $("#table1 a").tooltip({
                showURL: false,
                fixPNG: true,
                track:true,
                delay:0
                });
    }
  </script>
</div>

</body>
</html>

由于

Answer 1

第一次初始化工具提示时，它会从标记中删除title属性。然后，当刷新表时，它无法找到每个链接的标题标记，因此会跳过它。我建议缓存标题标签，以便在重新初始化工具提示时，可以重新插入原始标题标签。

var tableTitles;

$(function() {
    tableTitles = $("#table1 a").attr("title");
    $("#table1 a").tooltip({
        showURL: false,
        fixPNG: true,
        track:true,
        delay:0
    });
    tablebackup = $("#table1").clone();
    $("#table1")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager1")});
});


function resetTableOrder(tablebackup) {    
    tablebackup.clone().insertAfter("#table1");
    $("#table1").remove();
    $("#table1")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager1")});
    //Load Tool Tips for links inside the tab container
    $("#table1 a").attr("title", tableTitles).tooltip({
        showURL: false,
        fixPNG: true,
        track:true,
        delay:0
    });
}

以下是工作版本：http://jsbin.com/asaxi3/36

Answer 2

文森特，看起来不错。好像你走在正确的轨道上。

我在一个类似的项目中发现，当我切换到Qtip和Datatables时，整个事情看起来更容易，功能更丰富。从您使用的确切解决方案切换到新脚本，使我的应用程序在功能和可用性方面有着日夜差异......并且转换速度很快。

以下是其他工具的链接： Qtip：http://craigsworks.com/projects/qtip/ 数据表：http://datatables.net/

数据表单独的排序和搜索功能使其成为必须看到的。

祝你好运！

表重置后显示JQuery UI工具提示

2 个答案: