Улучшение кода всплывающей подсказки - PullRequest
Новая
       16

Улучшение кода всплывающей подсказки

1 голос
/ 31 октября 2008

Я пытаюсь создать всплывающую подсказку Jquery. Эта подсказка должна появиться, когда я наведу курсор на какой-то элемент и останусь поставить, если я решу навести курсор на всплывающую подсказку тоже. Всплывающая подсказка должна исчезнуть, только если я наведусь на элемент или из тела всплывающей подсказки.

Основываясь на найденном примере, мне удалось создать такое поведение, но так как я новичок в Jquery, я был бы рад услышать ваши комментарии о улучшение функции.

Код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="jquery-1.2.6.min.js"></script>
<style>
#tooltip{
       position:absolute;
       border:1px solid #333;
       background:#f7f5d1;
       padding:2px 5px;
       color:#333;
       display:none;
       text-align: left;
}

</style>


</head>
<body>

<script type="text/javascript">
jQuery.fn.extend({
       'tooltip': function(text){
                               xOffset = 10;
                               yOffset = 20;

                               var that = this;
                       $(this).mouseover(function(e){
                               this.t = text;
                               $("body").append("<div id='tooltip'>"+ this.t +"</div>");
                               $("#tooltip")
                                       .css('position', 'absolute')
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px")
                                       .fadeIn("fast");
                   });
                       $(this).mouseout(function(){
                               that.hide_ff = setTimeout('$("#tooltip").hidetooltip()', 1000);
                               $("#tooltip").hover(function(){
                                       clearTimeout (that.hide_ff);
                               },
                               function(){
                                       $("#tooltip").hidetooltip()
                               });

                               //$("#tooltip").hidetooltip()
                   });
                       $(this).mousemove(function(e){
                               $("#tooltip")
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px");
                       });
       },

       'hidetooltip': function()
       {
               var that = this;
               $(this).remove();
               if (that.hide_ff)
               {
                       clearTimeout (that.hide_ff);
               }
       }
});

</script>
<a id="fff">ToolTip</a>

<div id="tooltip_share_text" style="display:none">
       <div style="width: 100px;">
       This is a Tooltip.
       <br/>
       <a href="javascript:void(0)" onclick="alert('boo')"> Click Me</a>
       </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
       $("#fff").tooltip($('#tooltip_share_text').html());
});
</script>

</body>
</html>

Меня больше всего беспокоят две вещи:

  1. Мне нужно было расширить Jquery с помощью 2 функций (всплывающая подсказка и hidetooltip), я хотел бы добиться того же поведения только с одним расширение, но мне не удалось это сделать.
  2. Использование «that.hide_ff», которое я использовал, просто не выглядит правильным. однажды опять же, я думаю, что эта переменная должна принадлежать объекту «всплывающей подсказки», но если я не ошибаюсь, он присоединен к самому объекту Jquery.

Кроме того, я был бы рад услышать любые другие улучшения ...

Заранее спасибо, Gordi

Ответы [ 3 ]

2 голосов
/ 31 октября 2008

Для JQuery существует плагин всплывающей подсказки . Если вы предпочитаете делать свои собственные, я уверен, что вы можете получить идеи, посмотрев на то, что они сделали.

0 голосов
/ 27 августа 2009

Я обнаружил, что qTip удовлетворил все мои потребности в подсказке:

0 голосов
/ 27 августа 2009

Я не уверен, если вы все еще заинтересованы в этом ... это был почти год o.O

Но я немного изменил твой код:

  • Я избавился от hidetooltip (дополнительное расширение)
  • Использование that.hide_ff нормально, поэтому я не изменил его
  • Всплывающая подсказка появляется в конце ссылки и не перемещается с помощью мыши - я думаю, она выглядит чище.
  • Переключил xOffset и yOffset
  • Прокомментировал исходный код перемещения мыши, чтобы вы могли изменить его обратно, если он вам не нравится. 
jQuery.fn.extend({
 'tooltip': function(text){
  xOffset = 10;
  yOffset = 20;

  var that = this;
  $(this).mouseover(function(e){
   this.t = text;
   $("body").append(""+ this.t +"");
   $("#tooltip")
    .css('position', 'absolute')
    .css("top",(this.offsetTop + yOffset) + "px") /* .css("top",(e.pageY - xOffset) + "px") */
    .css("left",(this.offsetLeft + this.offsetWidth) + "px") /* .css("left",(e.pageX + yOffset) + "px") */
    .fadeIn("fast");
  });
  $(this).mouseout(function(){
   that.hide_ff = setTimeout('$("#tooltip").remove()', 500);
   $("#tooltip").hover(function(){
    clearTimeout (that.hide_ff);
    },
    function(){
     $("#tooltip").remove();
    }
   );
  });
/*
  $(this).mousemove(function(e){
   $("#tooltip")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
  });
*/
 }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...