Liên kết/hủy liên kết đối tượng jquery để một yếu tố

Tôi đang sử dụng một flowplayer jquery cụ cắm http://flowplayer.org/tools/tooltip.html Liên kết/hủy liên kết đối tượng jquery để một yếu tố

1) Tôi muốn có một tooltip được tạo ra khi người dùng nhấp vào một phần tử.

2) Khi người dùng nhấp vào một yếu tố khác, các tooltip cũ phải được bỏ liên kết (xóa)

3) Một tooltip mới nên được tạo ra (hoặc cũ chuyển sang) cho các phần tử nhấp

4) Vì vậy, cần có < = 1 chú giải công cụ trên trang

Bạn có thể giúp tôi được không?

Dưới đây là đoạn code, nó chạy độc lập

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

Nguồn

2010-01-23 Dan

Có cuộc gọi đến tooltip() trả về bất cứ điều gì? Có một đối tượng đại diện cho tooptip mà có thể có một loại bỏ hoặc xóa phương pháp? – ironfroggy

1) gọi tới tooltip() trả về đối tượng jquery và nó cũng có thể trả về API dành riêng cho thư viện. 2) Không, không có hàm delete() hủy trong thư viện = ( – Dan

Chú giải công cụ jQuery hỗ trợ xác định sự kiện nào kích hoạt chú giải công cụ.

Bạn không cần phải tự mình xử lý sự kiện nhấp.

Chỉnh sửa: Cập nhật tập lệnh. Nhấp vào liên kết để chuyển chú giải công cụ tới phần tử thứ hai luôn.

Đây là 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(); 
});

Toàn bộ kịch bản

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

Nguồn

2010-01-28 22:51:00

Xin cảm ơn, hãy làm việc! Trong exaple của bạn - có thể loại bỏ một sự kiện click và thay vào đó kích hoạt prorammaticaly tooltip cho id cụ thể như thế này: function hover_tooltip (id) {/ * todo * /} // PS: Phải có tôi <= 1 tooltip trên trang – Dan

Bạn có muốn một phần tử có id cụ thể hiển thị chú giải công cụ khi di chuột lên hoặc kích hoạt nó khi một số điều kiện khác có lập trình không? Khi nào thì hover_tooltip (id) sẽ được gọi? –

Tôi có nghĩa là di chuột qua một số hành động của chương trình. Ví dụ: các chú giải công cụ này có thể hoạt động tốt trong xác thực biểu mẫu. – Dan

Các Flowplayer Tooltip có một API được trả về trên mỗi cuộc gọi đến tooltip.

Sau đó, bạn có thể gọi hide trên đối tượng API.

Đây là những gì mã của bạn sẽ giống như thế:

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

Nguồn

2010-01-23 19:36:01

!!! Thanks !!! :) –

OOps! Hãy thử nhấp vào John, Mary và John một lần nữa – Dan

bạn vẫn ở đây? – Dan

Làm thế nào về giải pháp thay thế này?

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

Nguồn

2010-01-28 15:43:41

Liên kết/hủy liên kết đối tượng jquery để một yếu tố

Trả lời

Các vấn đề liên quan