連結/解除連結jquery對象到一個元素

我使用一個jquery的Flowplayer工具插件http://flowplayer.org/tools/tooltip.html 連結/解除連結jquery對象到一個元素

1）欲當用戶點擊的元件上要創建的工具提示。

2）當另一元件上的用戶點擊，舊工具提示必須取消關聯（刪除）

3）一種新的工具提示應創建（或舊移動到），用於點擊的元件

4 ）所以，應該< = 1頁上的工具提示

你能幫我嗎？

下面的代碼，它運行獨立

<!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>

來源

2010-01-23 Dan

是否調用工具提示（）返回什麼？是否有代表可能具有刪除或刪除方法的tooptip的對象？ – ironfroggy 2010-01-23 19:11:55

1）調用tooltip（）返回jquery對象，它也可以返回特定於庫的API。 2）不，庫中沒有delete（）析構函數=（ – Dan 2010-01-23 20:55:20

jQuery工具提示支持定義哪些事件觸發工具提示。

你不需要自己處理點擊事件。

編輯：更新了腳本。點擊鏈接將工具提示移至第二個元素。

這裏是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(); 
});

整個腳本

<!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>

來源

2010-01-28 22:51:00

謝謝，工作！在你的例外 - 是否有可能刪除一個點擊事件，而是觸發工具提示prorammaticaly爲這樣的特定id：function hover_tooltip（id）{/ * todo * /} // PS：必須有我<= 1 tooltip on頁面 – Dan 2010-02-01 13:20:43

你是否想要一個具有特定ID的元素來顯示工具提示，當它在其他條件下編程時觸發它？何時會調用hover_tooltip（id）？ – 2010-02-01 16:33:09

我的意思是徘徊在某些程序行爲上。例如，這些工具提示可以在表單驗證中很好地工作。 – Dan 2010-02-01 22:40:13

的工具提示的Flowplayer具有一個在每次調用tooltip返回的API。

然後，您可以在API對象上調用hide。

這裏是你的代碼應該是什麼樣子：

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(); 
}

來源

2010-01-23 19:36:01

!!!謝謝!!! :) – 2010-01-23 20:21:14

OOps！嘗試點擊約翰，瑪麗和約翰 – Dan 2010-01-23 20:53:49

你還在嗎？ – Dan 2010-01-23 23:54:39

這樣如何替代解決方案？

<!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>

來源

2010-01-28 15:43:41

連結/解除連結jquery對象到一個元素

回答

相關問題