Отображение всплывающей подсказки JQuery UI после сброса таблицы - PullRequest
Новая
       18

Отображение всплывающей подсказки JQuery UI после сброса таблицы

0 голосов
/ 25 июня 2010

Все,

Я пытаюсь заставить всплывающую подсказку 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>

Спасибо

Ответы [ 2 ]

2 голосов
/ 25 июня 2010

Когда вы инициализировали всплывающую подсказку в первый раз, она удалила атрибут заголовка из тега. Затем, когда таблица обновляется, она не может найти тег заголовка для каждой ссылки и поэтому пропускает его. Я бы рекомендовал кэшировать теги заголовков, чтобы при повторной инициализации всплывающей подсказки можно было повторно вставить исходные теги заголовков. 

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

0 голосов
/ 25 июня 2010

Винсент, это выглядит хорошо.Похоже, вы на правильном пути.

Я был в похожем проекте и обнаружил, что все это выглядело намного проще и более многофункциональным, когда я переключился на Qtip и Datatables.Переход от точного решения, которое вы используете, к новым сценариям дал моему приложению ночные и дневные различия в функциональности и удобстве использования ... и переключение было быстрым.

Вот ссылки на другие инструменты: Qtip: http://craigsworks.com/projects/qtip/ Datatables: http://datatables.net/

Функции сортировки и поиска, доступные только в Datatables, делают его обязательным для просмотра.

Удачи!

...