пользовательский баг плагина Jquery - PullRequest
Новая
       12

пользовательский баг плагина Jquery

0 голосов
/ 31 мая 2011

Я создал простой плагин после tuts + и изменил его, чтобы сделать то, что я хочу. По сути, он создает «всплывающую подсказку», которую я пытаюсь оставить видимой в течение определенного периода времени, но также позволяет пользователю нажимать на блок, чтобы получить больше уведомления, чем всплывающей подсказки. То, что у меня есть, находится ниже, но когда оно не скрывается автоматически ... нажмите, чтобы закрыть работу. Кто-нибудь может заметить, что я делаю неправильно / улучшения? 

$.fn.betterTooltip = function(options){

    /* Setup the options for the tooltip that can be 
       accessed from outside the plugin              */
    var defaults = {
        speed: 200,
        delay: 300,
        hideAfter:5000
    };

    var options = $.extend(defaults, options);

    /* Create a function that builds the tooltip 
       markup. Then, prepend the tooltip to the body */
    getTip = function() {
        var tTip = 
        "<div class='tip'>" +
        "<div class='tipMid'>"  +
        "</div>" +
        "<div class='tipBtm'></div>" +
        "</div>";
        return tTip;
    }
    $("body").prepend(getTip());

    /* Give each item with the class associated with 
       the plugin the ability to call the tooltip    */
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        var tipInner = $('.tip .tipMid');

        var tTitle = (this.title);
        this.title = "";

        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();

        /* Delay the fade-in animation of the tooltip */
        setTimer = function() {
            $this.showTipTimer = setInterval("showTip()", defaults.delay);
        }
        hideTip=function(){
            stopTimer();
            tip.hide();
        }
        stopTimer = function() {
            clearInterval($this.showTipTimer);
            clearInterval( $this.hideTimer);
        }

        /* Position the tooltip relative to the class 
           associated with the tooltip                */
        setTip = function(top, left){
            var topOffset = tip.height()-30;
            var xTip = (left+60)+"px";
            var yTip = (top-topOffset)+"px";
            tip.css({
                'top' : yTip, 
                'left' : xTip
            });
        }

        /* This function stops the timer and creates the
           fade-in animation                          */
        showTip = function(){
            stopTimer();
            tip.animate({
                "top": "+=20px", 
                "opacity": "toggle"
            }, defaults.speed);
        }
        $(this).ready(function() {
            tipInner.html(tTitle+'<br />(Click to dismiss)');
            setTip(tTop, tLeft);
            setTimer();
            hideTimer=function(){
                $this.hideTimer=setInterval("hideTip()",defaults.hideAfter);
            }
            hideTimer();
        });
        $(tip).click(function() {
                hideTip();
        }); 
    });
};

1 Ответ

2 голосов
/ 31 мая 2011

Я думаю, что вы хотите setTimeout и clearTimeout вместо ...Interval версий, которые у вас есть.Первые запускают свои обратные вызовы один раз, тогда как вторые делают это неоднократно.

Некоторые советы:

  1. Не передавайте строку в setTimeout или setInterval для кодаrun - использовать указатель на функциюЯ нахожу, что это намного менее подвержено ошибкам, и область видимости никогда не является проблемой.
  2. Скрыть подсказку о событии mouseleave (либо от элемента, для которого предназначен совет, либо от самого наконечника) и показать его на mouseover или mouseenter.Это более эффективно, чем постоянный запуск JavaScript.
...