2009-08-18 4 views
1

Это часть второй вопроса:jQuery tooltip popup re-insert значение названия при закрытии - WORKING YEAH!

При закрытии всплывающего окна мне нужно снова вставить значение title = "" в исходное значение до того, как щелкнула всплывающая ссылка. всплывающие использует заголовок =»значение для отображения во всплывающем окне и удаляет его из исходного тега так, чтобы не отображать в подсказке, если кто-то витает над ссылкой.

The JS

this.contactPreview = function() { 
jQuery("a.contact").live('click', function(e){ 
     //store clicked link 
     var $this = jQuery(this); 
     //store title 
     var title = $this.attr('title'); 
     //remove title 
     $this.attr('title', ''); 

     //tip !== "" ? "<br />" + title : "";          

     jQuery("body").append("<p id='contact-info'>" + title + "<a id='close-contact' class='close-contact' style='color:red;'>Close</a></p>"); 

     //store reference to anchor and persist title on close-contact anchor 
     jQuery('#close-contact').data('anchor', $this).data('title', title); 

     jQuery("#contact-info").css("top", (e.pageY - xOffset) + "px") 
           .css("left", (e.pageX + yOffset) + "px") 
           .fadeIn(500); 
    }); 

    jQuery("#close-contact").live('click', function(){ 
     //store clicked link 
     var $this = jQuery(this); 
     //get anchor  
     var $anchor = $this.data('anchor'); 
     //get title 
     var title = $this.data('title'); 
     //set anchors title back 
     $anchor.attr('title', title);    
     //remove tip 
     jQuery('#contact-info').remove(); 

    }); 
}; 

// Use jQuery() instead of $()for WordPress compatibility with the included prototype js library which uses $() 
// http://ipaulpro.com/blog/tutorials/2008/08/jquery-and-wordpress-getting-started/ 
// See http://chrismeller.com/using-jquery-in-wordpress 
jQuery(document).ready(function(){ 

    // Call the function here 
    contactPreview(); 

}); 

В CSS

#contact-info{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 

HTML-

<a class='contact' title='this is what is in the popup'>Display popup</a> 

Еще раз спасибо всем;)

ответ

1

Не нужно скрывать поле. Вы можете использовать .data для сохранения информации. Также я использовал live для всех якорных кликов. Нет необходимости в событиях x dom, когда 1 будет делать.

this.contactPreview = function() { 
    jQuery("a.contact").live('click', function(e){ 
      //store clicked link 
      var $this = $(this); 
      //store title 
      var title = $this.attr('title'); 
      //remove title 
      $this.attr('title', ''); 

      tip !== "" ? "<br />" + title : ""; 

      jQuery("body").append("<p id='contact-info'>" + title + "<a id='close-contact' class='close-contact' style='color:red;'>Close</a></p>"); 

      //store reference to anchor and persist title on close-contact anchor 
      $('#close-contact').data('anchor', $this) 
           .data('title', title); 

      jQuery("#contact-info").css("top", (e.pageY - xOffset) + "px") 
            .css("left", (e.pageX + yOffset) + "px") 
            .fadeIn(500); 
     }); 

     jQuery("#close-contact").live('click', function(){ 
      //store clicked link 
      var $this = $(this); 
      //get anchor  
      var $anchor = $this.data('anchor'); 
      //get title 
      var title = $this.data('title'); 
      //set anchors title back 
      $anchor.attr('title', title);    
      //remove tip 
      $this.parent.remove();   
     }); 
    }; 
+0

Привет и спасибо, только один вопрос, это: (совет == "
" + название: "! "?""; ) не работает. выдает ошибку, говорит, что подсказка не определена. Также нужно использовать jQuery вместо $, но это не так уж важно для сделки –

+0

Спасибо, что он работает, опубликует рабочий код :) –

+0

Вы должны были оставить исходный вопрос и, возможно, добавить обновленный бит с решением, которое вы отправили для. Рад работать. – redsquare