Łączenie/rozłączanie obiekt jQuery do elementu

Używam Flowplayer jquery narzędzia plugin http://flowplayer.org/tools/tooltip.html Łączenie/rozłączanie obiekt jQuery do elementu

1) Chcę podpowiedź być tworzone, gdy użytkownik kliknie na elemencie.

2) Gdy użytkownik kliknie na inny element, stara etykietka musi być odłączone (skreślony)

3) Nowa etykietka powinny być tworzone (lub stary przeniósł się) dla klikniętego elementu

4) Tak więc powinna być < = 1 etykieta narzędzia na stronie

Czy możesz mi pomóc?

Oto kod, działa autonomiczny

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
    <title>jQuery tooltip</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 

    <script type="text/javascript"> 


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/ 
    $(document).ready(function() { 
     $("#_2").tooltip({ 
      effect: "slide", 
      tip: '.tooltip' , 
      position: 'bottom center' 
     }); 

    }); 
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/ 




/** The code below is not working as I expect, it doesn't MOVE tooltip **/ 

      var old_id; 

    //first time - create tooltip 
     function my_create(id){ 
      $("#"+id).tooltip({ 
       effect: "slide", 
       tip: '.tooltip', 
       position: 'bottom center' 
      });  
     } 

    //next times - move tooltip to other element 
     function my_unlink(id){ 
      $("#"+id).unbind("mouseover"); 
      //todo 
     } 

     function my_link(id){ 
      //todo 
     } 


     //THE MAIN FUNCTION 

     function do_tip(new_id){ 
      if(old_id){ 
       my_unlink(old_id); 
       my_link(new_id); 
       alert(new_id); 
      } 
      else 
       my_create(new_id); 

      old_id=new_id; 
     //new_id.focus(); 
    } 

    </script> 

    <style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
    } 

    </style> 
</head> 
<body> 

    <h1 onclick="do_tip(this.id)" id="_1">John</h1> 
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1> 
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1> 
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1> 
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1> 

    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body></html>

Źródło

2010-01-23 Dan

Czy wezwanie do tooltip() zwracają cokolwiek? Czy istnieje obiekt reprezentujący tooptip, który może mieć metodę usuwania lub usuwania? – ironfroggy

1) wywołanie tooltip() zwraca obiekt jquery i może również zwrócić API specyficzne dla biblioteki. 2) Nie, nie ma delete() destructor w bibliotece = ( – Dan

Narzędzie narzędziowe jQuery obsługuje definiowanie zdarzeń wyzwalających etykietę narzędzi.

Nie musisz samodzielnie obsługiwać zdarzenia kliknięcia.

Edytuj: Zaktualizowano skrypt. Kliknij link, aby zawsze przenosić podpowiedź do drugiego elementu.

Oto script

var tt = $("h1").tooltip({ 
    events:{def:'click, click'}, 
    effect: "slide", 
    tip: '.tooltip' , 
    position: "bottom center", 
    api: true, 
    delay: 30000 
}); 

$("#ht").click(function() { 
    tt.hide(); 
    $("#_2").tooltip().show(); 
});

Cały skrypt

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 

<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
<style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
     cursor:pointer; 
    } 

</style> 

</head> 
<body> 

    <h1 id="_1">John</h1> 
    <h1 id="_2">Mary</h1> 
    <h1 id="_3">Dan</h1> 
    <h1 id="_4">Paul</h1> 
    <h1 id="_5">Kim</h1> 

    <a id="ht" href="javascript:void()">Click here</a> 
    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body> 
</html> 

<script> 

var tt = $("h1").tooltip({ 
    events:{def:'click, click'}, 
    effect: "toggle", 
    tip: '.tooltip' , 
    position: "bottom center", 
    api: true, 
    delay: 30000 
}); 

$("#ht").click(function() { 
    tt.hide(); 
    setTimeout(function(){$("#_2").tooltip().show();}, 500); 
}); 

</script>

Źródło

2010-01-28 22:51:00

Dzięki, pracuję! W swojej exaple - czy to możliwe, aby usunąć zdarzenie click i zamiast wywołać podpowiedź prorammaticaly dla konkretnego id jak ten: funkcja hover_tooltip (id) {/ * todo * /} // PS: Nie wolno mi <= 1 podpowiedzi na strona – Dan

chcesz element z konkretnym identyfikatorze, aby pokazać podpowiedzi po najechaniu na lub wywołać go na jakiś inny warunek programowo? Kiedy będzie hover_tooltip (id) można nazwać? –

Mam na myśli unicestwienie niektórych akcji programu. Na przykład te podpowiedzi mogą działać doskonale w sprawdzaniu poprawności formularza. – Dan

FlowPlayer Tooltip ma API, który jest zwracany na każde wezwanie do tooltip. Można wtedy wywołać hide w obiekcie API.

Oto co Twój kod powinien wyglądać następująco:

var old_id, API; 

//first time - create tooltip 
    function my_create(id){ 
     API = $("#"+id).tooltip({ 
      effect: "slide", 
      tip: '.tooltip', 
      position: 'bottom center' 
     });  
    } 

//next times - move tooltip to other element 
    function my_unlink(id){ 
     API.unbind("mouseover"); 
     //todo 
    } 

    function my_link(id){ 
     my_create(id); 
    } 


    //THE MAIN FUNCTION 

    function do_tip(new_id){ 
     if(old_id){ 
      my_unlink(old_id); 
      my_link(new_id); 
      alert(new_id); 
     } 
     else 
      my_create(new_id); 

     old_id=new_id; 
    //new_id.focus(); 
}

Źródło

2010-01-23 19:36:01

!!! Dzięki !!! :) –

Ups! Spróbuj kliknąć John, Mary i John ponownie – Dan

nadal tu jesteś? – Dan

Jak o tym alternatywnym rozwiązaniu?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
    <title>jQuery tooltip</title> 
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> --> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
     $("h1").tooltip({ 
      effect: "slide", 
      tip: '.tooltip' , 
      position: 'bottom center', 
      onBeforeShow: function(event){ 
       //don't show tooltip if trigger (h1 object) does not have specified class 
       if(!this.getTrigger().hasClass("hasToolTip")) 
        return false;      
      } 
     }); 

     $("h1").click(function() { 
      $("h1").removeClass("hasToolTip"); 
      $(this).addClass("hasToolTip"); 
     }); 
    }); 

    </script> 

    <style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
    } 

    </style> 
</head> 
<body> 

    <h1 id="_1">John</h1> 
    <h1 id="_2">Mary</h1> 
    <h1 id="_3">Dan</h1> 
    <h1 id="_4">Paul</h1> 
    <h1 id="_5">Kim</h1> 

    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body></html>

Źródło

2010-01-28 15:43:41

Łączenie/rozłączanie obiekt jQuery do elementu

Odpowiedz

Powiązane problemy