Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Проблема с моим jquery модулем

Автор: KgCoder 12.7.2009, 09:54

Думаю, на этом сайте это будет оффтоп, но всё же надеюсь на помощь. Проблема:
Сделал себе тултип. Писал с нуля, так как другие модули не подходили из-за (оформление || нет поддрежки ajax). Всё работает, но при наведении на "объект" тултип моргает и видимо снова и снова загружает информацию.

Вот код:

Код


$.extend(jQuery, {
  showInfoTip : function(){
    if ($('#info-tip').css('display') != 'block') {
      $("#info-tip-content").html('Loading information...');
      $("#info-tip").css({
        top: $(this).offset().top - $("#info-tip").height() - 75,
        left: $(this).offset().left - $("#info-tip").width() - 85,
        display: 'block',
      });
      $.getJSON('advanced_glossary/term/' + $(this).attr('id').split('-')[1], '', function(data){
        var output;
        for (var i = 0; i < data.length; i++) {
          output += '<strong>' + data[i].title + '</strong>';
          output += '<p>' + data[i].teaser + '</p>';
        }
        $("#info-tip-content").html(output);
      });
    }
  },
  hideInfoTip : function(){
    if ($('#info-tip').css('display') != 'none') {
      $("#info-tip").hide();
    }
  }
});

$(document).ready(function(){
  $('span.info-tip').bind('mouseover', $.showInfoTip);
  $('span.info-tip').bind('mouseout', $.hideInfoTip);
});

Страница первоначально имеет вид:

Код


<div id="info-tip">
  <div class="info-tip-top"></div>
  <div class="info-tip-middle">
    <span id="info-tip-content">&nbsp;</span>
  </div>
  <div class="info-tip-bottom"></div>
</div>
<span class="advanced-glossary-term info-tip" id="term-4">Apple</span>, Mac, <span class="advanced-glossary-term info-tip" id="term-6">PC</span>

Помогите, я в Javascript нини. А времени в обрез :(

З.Ы. Проблема не в css. Слой info-tip первоначально скрыть через css.

[/code]

Автор: IDVsbruck 12.7.2009, 13:21

mouseover и mouseout - это вобще противоречивые события, события срабатывают много раз при наведении на объект. jQuery предлагает другие события - mouseenter и mouseleave - срабатывают единожды (кроме нескольких случаев) при наведении и уходе с объекта. Это один совет, который не будет многократно обращаться к скрипту.
Второй совет, если не получится с указанными событиями, - использовать биндер one - он запускает обработчик только один раз.