Связывание / отмена связи объекта jquery с элементом - PullRequest
Новая
       19

Связывание / отмена связи объекта jquery с элементом

5 голосов
/ 23 января 2010

Я использую плагин jquery flowplayer tools http://flowplayer.org/tools/tooltip.html

1) Я хочу создать всплывающую подсказку, когда пользователь нажимает на элемент.

2) Когда пользователь нажимает на другой элемент, старая всплывающая подсказка должна быть отсоединена (удалена)

3) Для выбранного элемента должна быть создана новая всплывающая подсказка (или перенесена старая)

4) Итак, на странице должна быть <= 1 подсказка </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>

Ответы [ 3 ]

2 голосов
/ 29 января 2010

Подсказка для инструментов jQuery поддерживает определение событий, вызывающих всплывающую подсказку.

Вам не нужно обрабатывать событие click самостоятельно.

Редактировать: Обновлен скрипт. Нажмите на ссылку, чтобы всегда перемещать подсказку ко второму элементу.

Вот сценарий 

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>
1 голос
/ 28 января 2010

Как насчет этого альтернативного решения? 

<!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>
1 голос
/ 23 января 2010

У подсказки FlowPlayer есть API, который возвращается при КАЖДОМ вызове tooltip.

Затем можно вызвать hide для объекта API.

Вот как должен выглядеть ваш код: 

    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();
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...