Дисплея JQuery UI подсказка после таблицы сброса

Все,Дисплея JQuery UI подсказка после таблицы сброса

Я пытаюсь получить 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>

Благодаря

источник

2010-06-25 Jake

исправлено ... http://jsbin.com/asaxi3/33/ – Reigel

Привет! Всплывающая подсказка не отображается, когда я перехожу на вторую страницу и наведите указатель мыши на имя. – Jake

Можно ли это исправить? – Jake

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

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

источник

2010-06-25 15:56:26 Zacho

Ничего себе .. Хорошее наблюдение !! Интересно, как вы знали, что теги названия пропущены. Спасибо за решение! – Jake

Я думаю, что это решение нарушило еще один сценарий. Когда вы нажимаете «Сбросить порядок сортировки» и переходите на вторую страницу, всплывающие подсказки снова исчезают :(Не могли бы вы взглянуть? – Jake

Мне нужно будет заглянуть позже. Хорошая практика - понять, почему это происходит. для вашего первого комментария, я использую Firefox с Firebug для отладки подсказки JS. Затем, установив точки останова, я мог точно видеть, какую строку он пропускал. – Zacho

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

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

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

Распределяющей и поиска возможностей только на DataTables сделать это надо видеть.

Удачи вам!

источник

2010-06-25 18:00:38 bpeterson76

Wow .. спасибо за предложение .. Datatable выглядит очень красиво ... Я буду попробуйте!: D – Jake

Дисплея JQuery UI подсказка после таблицы сброса

ответ

Смежные вопросы