VPF::[JQuery] Определение Id - Форум программистов

CapitanHarison

Дата 7.4.2011, 12:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.4.2011

Репутация: нет
Всего: нет

Доброго времени суток!

Возникла небольшая проблема. Есть небольшой плагин к jquery "easytooltip" (всплывающие подсказки).
Он подгружаеться отдельно, обращение к нему осуществляеться так:

Код


$(document).ready(function(){          
     $("div").mouseover(function(){    
       var a = this.id;
         $(this).easyTooltip({                
            useElement: "test"+a
         });
      });
    });

HTML часть выглядит так:

Код


<div id="1">ONE</div>
<div id="2">TWO</div>
                               
<div id="test1">HIDDEN 1</div>
<div id="test2">HIDDEN 2</div>

При наведении на ONE должна всплыть подсказка "<div id="test1"..." к TWO соответственно "<div id="test2"..."

Все работает идеально, если JS представить в таком виде:

Код


$(document).ready(function(){      
         $("div#1").easyTooltip({                
            useElement: "test1"
         });    
    });

А проблема значит такая. В первом варианте подсказка всплывает после второго и послудующих наведений мыши на блок id="1", т.е. первый раз навожу - ничего не приисходит, после этого все работает нормально, причем такое с каждым блоком, получаеться нужно на каждый блок навести раз мышкой, после чего уже в последующих наведениях мыши они нориально отображаються(всплывают подсказки). А второй вариант не подходит, т.к. id выводяться с PHP, поэтому их нужно подставлять динамически.
К сведению! Пробовал и такой вариант:

Код


function test(a) {
тут Jquery с подставлением "а" как в первом варианте...
}

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

В самом этом дополнении врятли проблема, т.к. там все работает отлично, проблема видимо где-то в присвоении "useElement:" id... Но если требуеться дам код.

нуп

Дата 7.4.2011, 16:38 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Та лучше покажи код. И попробуй вместо

Код


<div id="1">ONE</div>

писать

Код


<div id="div_id_1">ONE</div>

CapitanHarison

Дата 7.4.2011, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.4.2011

Репутация: нет
Всего: нет

Цитата

...И попробуй вместо

А в чем собственно отличие, этот и этот просто айдишник? (ради интереса даже попробовал - тот же результат).

Я вот немогу понять в чем загвоздка... Все вроде работает, но только после второго наведения на каждый блок. Ладно даю код, ато уже десятки вариантов попробовал и ничего.(мог бы поскать или на крайний случай что-то свое писать, но уже этот (easytooltip) под себя подстроил и с html+php все понапихал). Итак, даю этот плагин(оригинальный, без моих поправок, хотя там тоже самое):

Код


(function($) {

    $.fn.easyTooltip = function(options){
      
        // default configuration properties
        var defaults = {    
            xOffset: 10,        
            yOffset: 25,
            tooltipId: "easyTooltip",
            clickRemove: false,
            content: "",
            useElement: ""
        }; 
            
        var options = $.extend(defaults, options);  
        var content;
                
        this.each(function() {                
            var title = $(this).attr("title");                
            $(this).hover(function(e){                                                                           
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");                                                    
                if (content != "" && content != undefined){            
                    $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");        
                    $("#" + options.tooltipId)
                        .css("position","absolute")
                        .css("top",(e.pageY - options.yOffset) + "px")
                        .css("left",(e.pageX + options.xOffset) + "px")                        
                        .css("display","none")
                        .fadeIn("fast")
                }
            },
            function(){    
                $("#" + options.tooltipId).remove();
                $(this).attr("title",title);
            });    
            $(this).mousemove(function(e){
                $("#" + options.tooltipId)
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                    
            });    
            if(options.clickRemove){
                $(this).mousedown(function(e){
                    $("#" + options.tooltipId).remove();
                    $(this).attr("title",title);
                });                
            }
        });
      
    };

})(jQuery);

Видимо есть какой-то фактор, про который мне не известно...

нуп

Дата 7.4.2011, 17:07 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Код


$(document).ready(function(){          
     $("div").mouseover(function(){    
       var a = this.id;
         $(this).easyTooltip({                
            useElement: "test"+a
         });
      });
    });

менять на

Код


$(document).ready(function(){          
     $("div").each(function(){    
       var a = this.id;
         $(this).easyTooltip({                
            useElement: "test"+a
         });
      });
    });

mcTep

Дата 7.4.2011, 17:16 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: нет
Всего: 6

Цитата(CapitanHarison @ 7.4.2011, 16:49

)

А в чем собственно отличие, этот и этот просто айдишник? (ради интереса даже попробовал - тот же результат).

Не по стандарту

CapitanHarison

Дата 8.4.2011, 14:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.4.2011

Репутация: нет
Всего: нет

Большое спасибо! Все работает.

Только вот новая проблема )

Дело в том что уже на сайте оно все прикрепляеться к таблице

В работе выглядит прибл. так, но работать не хочет:

Код


$(document).ready(function(){          
       $("td").each(function(){    
         var a = this.id;
           $("td#"+a).easyTooltip({                
            useElement: "test"+a
           });
         });
       });

А вот если указать конкретный id, т.е. обратиться к конкретной ячейке, например:

Код


$(document).ready(function(){          
       $("td#123456").each(function(){    
         var a = this.id;
           $("td#"+a).easyTooltip({                
            useElement: "test"+a
           });
         });
       });

все работет

Здесь видимо конфликт где-то с другими id или функциями на сайте... Но времени все это перебирать нету.

Вопрос! Можно как-то сюда например влепить проверку вроде mouseover или как-то еще? Дело в том что id 123456 (например) неизвестен, он создаеться динамически php.

Есть впрочем один вариант привязать не к ID, а к class, но это уже как-то совсем страшно smile

Вот работает, но думаю есть более гуманный способ smile

Код


$(document).ready(function(){        
       $("td.mytest").each(function(){    
         var a = this.id;
           $("td#"+a).easyTooltip({                
            useElement: "test"+a
           });
         });    
     });

Это сообщение отредактировал(а) CapitanHarison - 8.4.2011, 14:19

mcTep

Дата 8.4.2011, 14:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: нет
Всего: 6

Цитата(CapitanHarison @ 8.4.2011, 14:00

)

Есть впрочем один вариант привязать не к ID, а к class, но это уже как-то совсем страшно

Наоборот, так и надо.

Вы делаете сначала выборку всех td, потом берете их id, а потом еще раз делаете выборку тех же td, но уже по id. Это жесть. smile

Можно гораздо упростить код. И сделать его понятнее:

Код


$(document).ready(function(){        
       $("td.mytest").easyTooltip({                
            useElement: "easytooltip-element"
           });
     });

Вместо класса mytest лучше наверное использовать что-то типа "my-easytooltip".
А на счет useElement: "easytooltip-element", то в описании плагина говорится, что используется внутренний элемент уже конкретного элемента, на который применяется плагин, и поэтому достаточно указать один класс без привязки к id, т.к. искомый useElement уже будет находиться внутри тултипа.

Отвратный плагин. Ща подумаю.

Это сообщение отредактировал(а) mcTep - 8.4.2011, 14:49

mcTep

Дата 8.4.2011, 15:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: нет
Всего: 6

Попробуйте заменить в плагине строчку:

Код


content = (options.useElement != "") ? $("#" + options.useElement).html() : content;

на:

Код


if (typeof options.useElement == 'function')  content = options.useElement.call(this).html()
else  content = (options.useElement != "") ? $("#" + options.useElement).html() : content;

тогда вызов будет примерно таким:

Код


$(document).ready(function(){        
   $("td.mytest").easyTooltip({                
        useElement: function(){
            return $('#test'+this.id);
        }
       });
 });

Это сообщение отредактировал(а) mcTep - 8.4.2011, 15:19

CapitanHarison

Дата 8.4.2011, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.4.2011

Репутация: нет
Всего: нет

Спасибо!!!
smile

Все работает, супер! Вот только как я понял суть осталась таже что с моим примером с класами, но покомпактнее.

Ещё проверку сделал, чтоб за борт не вылезало smile

(на скорую руку):

Код


if(e.pageX>(((screen.width-800)/2)+525)) { var xoffset_res = -230; }  
else { var xoffset_res = -20; };
                        
    $("#" + options.tooltipId)
        .css("top",(e.pageY - options.yOffset) + "px")
        .css("left",(e.pageX + xoffset_res) + "px")

Тут просто эти тултипы только для примеров увеличеных нужны, причем все рисунки одного размера.

Вообще плохо что они не сделалли этого нормально изначально - это жирный минус!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »