мы можем использовать $this в закрытие для jQuery плагин


Я попытался создать быстрый плагин всплывающей подсказки с помощью jQuery и положения пользовательского интерфейса jQuery. Кстати я использовал корпус правы и использование прав, так как в ФФ, то это, кажется, есть некоторые проблемы с памятью..он запоминает Предыдущие установки, когда я обновить страницу после первого раза. ниже приведен код

Эта потребность в последней jQuery & jQuery интерфейса

  $.fn.tooltip = function(options) {
            var defaults = {
                my : "left center",
                at : "right top",
                collision : "none",
                offset : "0 0"
            }

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

            return this.each(function() {
                var $this = $(this);
                var tip = $("<span class='tooltip'>" + $this.attr('tooltip') + "</span>");
                tip.css({
                    width : options.width
                });
                $this.after(tip);
                tip.position({
                    my : options.my,
                    at : options.at,
                    of : $this,
                    collision : options.collision,
                    offset : options.offset
                });

                $this.add(tip).hover(function() {
                    var timeoutId = $this.data('timeoutId');
                    if(timeoutId) {
                        clearTimeout(timeoutId);
                    }
                    tip.fadeIn("slow");

                }, function() {
                    var timeoutId = setTimeout(function() {
                        tip.fadeOut("slow");
                    }, 650);
                    $this.data('timeoutId', timeoutId);
                });
            });
        };
        $(function() {
            $('#input1').tooltip();
            $('#input2').tooltip();
        });

стиль CSS

        .tooltip {
            display: none;
            position: absolute;
            background-color: #ffaa5e;/* #F5F5B5; */
            border: 1px solid #DECA7E;
            color: #303030;
            font-family: sans-serif;
            font-size: 12px;
            line-height: 18px;
            padding: 10px 13px;
            position: absolute;
            text-align: center;
            top: 0;
            left: 0;
            z-index: 3;
        }

HTML код, чтобы проверить это

http://jsfiddle.net/HE8QN/

спасибо



249
1
задан 29 ноября 2011 в 03:11 Источник Поделиться
Комментарии
1 ответ

Попробуйте этот тип закрытия

    $this.add(tip).hover(function() {
return function() {
var timeoutId = $this.data('timeoutId');
if(timeoutId) {
clearTimeout(timeoutId);
}
tip.fadeIn("slow");
};

}(), function() {
return function() {
var timeoutId = setTimeout(function() {
tip.fadeOut("slow");
}, 650);
$this.data('timeoutId', timeoutId);
};
}());

Только не забудьте сказать, если это решает проблему. Удачи.

2
ответ дан 30 ноября 2011 в 11:11 Источник Поделиться