Внешний плагин всплывающей подсказки на Jqgrid - PullRequest
Новая
       32

Внешний плагин всплывающей подсказки на Jqgrid

2 голосов
/ 11 января 2011

В настоящее время я не использую никакой другой плагин для всплывающей подсказки при наведении мыши на строку сетки.Я использую 

$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});

Где Name - это имя столбца, в котором будет установлена ​​подсказка, а rowid идентифицирует строку.Для получения дополнительной информации прочитайте этот ответ, включая ссылки.

Существует ли какой-либо внешний плагин для достижения того же эффекта в лучшем пользовательском интерфейсе.Эта подсказка недостаточно хороша для выполнения моего требования

Ответы [ 2 ]

3 голосов
/ 11 января 2011

Поскольку в следующую версию jQuery UI будет включен Подсказка (см. демо ), я рекомендую вам лучше скачать его сейчас с github и немногопоиграйте с ним.

Я подготовил демонстрационную версию , которая изменяет всплывающую подсказку для второго столбца сетки и использует HTML-код с пользовательским классом (я использую в демонстрационном стандартном ui-state-highlight классе)пользовательский эффект анимации (slideUp / slideDown).Итак, вы узнаете о следующих alt text

Надеюсь, демоверсия поможет вам реализовать ваши требования к пользовательским подсказкам.

2 голосов
/ 02 сентября 2011

Также можно использовать другой подход. Поскольку многие «причудливые» всплывающие подсказки основаны на определениях классов и jquery, вы можете загрузить связанный с всплывающей подсказкой класс в loadcomplete, например:

$(this).find("td").addClass('gridtip');

Я использовал очень маленькую и эффективную подсказку от Alen Gracalic который я призываю на событие при наведении, как это: 

jQuery("#competencegrid").live('hover',function(e){
   gridtip();
});

Кроме того, я убираю все предыдущие заголовки, чтобы встроенная в браузер функция подсказок не отображалась. Это также делается после loadcomplete: 

$('[title]').each(function(){
    $this = $(this);
    if($this.attr('title').length>1){
        $.data(this, 'title', $this.attr('title'));
    }
    $this.removeAttr('title');
});

(В исходном коде от Alen Gracalic атрибут title удаляется при отображении всплывающей подсказки, а затем восстанавливается. Этот метод не очень хорошо взаимодействует с jqgrid. Поэтому лучше удалить его полностью и полагаться на данные jquery.)

Проверка длины заголовка, приведенная выше, является особой потребностью, которая есть в моем заявлении, и может быть проигнорирована.

Наконец, при загрузке всплывающей подсказки в javaclass, я имею в виду данные jquery, а не атрибут title (так как он сейчас пуст). 

this.gridtip = function(){
    xOffset = 15;
    yOffset = 20;
    $(".gridtip").hover(function(e){
        this.t = $.data(this, 'title');
        if(this.t){
            $("body").append("<p id='gridtip'>"+ this.t +"</p>");
            $("#gridtip")
               .css("top",(e.pageY - xOffset) + "px")
               .css("left",(e.pageX + yOffset) + "px")
               .fadeIn("fast");
         }
     },
     function(){
         $("#gridtip").remove();
     });
     $(".gridtip").mousemove(function(e){
         $("#gridtip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
     });
};

Последнее, но не обязательно - вот как выглядит мой класс .css: 

#gridtip{
    position:absolute;
    border:4px solid #adadad;
    background:#fefefe;
    -moz-border-radius: 5px;
    padding:4px 5px;
    color:#666;
    display:none;
    font-size:14px;
    font-family:verdana;
    text-align:left;
    z-index:50;
    filter: alpha(opacity=100);
    opacity:0.85;
}

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

var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
    var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
    var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
    if(description.length>0){
        $("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
    }
}
...