Плагин Jquery Tooltip - PullRequest
Новая
       19

Плагин Jquery Tooltip

1 голос
/ 03 декабря 2011

Я очень новичок в создании плагинов jquery, и я начал работать над этим плагином всплывающей подсказки: 

jQuery(function ($) {
    $.fn.simpleMessageTtip = function (options) {
        var settings = {
            'messageTxt': 'The notification frequency has been updated',
        };

        if (options) {
            $.extend(settings, options);
        }

        var getTooltip = function () {
            var tTip =
                '<div class="simple-message-tooltip">' +
                    '<div class="message clearfix">' +
                        '</div>' +
                            '<div class="bubble-pointer-bottom"></div>' +
                                '</div>';
            return tTip;
        };

        $("body").prepend(getTooltip());

        $(this).each(function () {
            var $this = $(this); //the caller of the ttip
            var tip = $('.simple-message-tooltip');
            var tipInner = $('.simple-message-tooltip .message');

            var setTip = function (top, left) {
                var topOffset = tip.height();
                var xTip = (left - 50) + "px";
                var yTip = (top - topOffset - 40) + "px";
                tip.css({ 'top': yTip, 'left': xTip });
            };

            $this.click(function(){
                var offset = $(this).offset(); //Offset returns an object containing the properties top and left.
                var tLeft = offset.left;
                var tTop = offset.top;

                tipInner.html(messageTxt);
                setTip(tTop, tLeft);
            },
                function () {
                    tip.fadeIn("fast");
                    setTimeout(function(){
                        tip.fadeOut("fast");
                    }, 1000);
                }

            );    
        });

    };
} (jQuery));

На данный момент это вроде работает (можно сказать, лол), но с некоторыми проблемами.Может быть, вы, пожалуйста, помогите мне выяснить, почему?

Это всплывающая подсказка, которая появляется, когда вы нажимаете на кнопку радио.

Моя первая проблема заключается в том, что я хочу, чтобы текст внутри был ПАРАМЕТРОМэто можно изменить позже, чтобы сделать плагин более податливым ... Но на данный момент плагин не приносит мне текст = (

Кроме того, он не приводит подсказку ТОЧНО поверх радиопереключателячто пользователь выбирает.

Если бы вы могли мне помочь, я буду очень грациозно !!!

Это скрипка: http://jsfiddle.net/Vrfsx/9/

СПАСИБО ВСЕМ ПРЕДСТАВЛЯЕМ !!=) OrangeJuice .-

1 Ответ

2 голосов
/ 03 декабря 2011

Ты очень близок к тому, чтобы это сработало. Единственное, что вам нужно изменить, это ваш click обработчик. Следующее: 

$this.click(function(){
    var offset = $(this).offset(); //Offset returns an object containing the properties top and left.
    var tLeft = offset.left;
    var tTop = offset.top;

    tipInner.html(messageTxt);
    setTip(tTop, tLeft);
},
function () {
    tip.fadeIn("fast");
    setTimeout(function(){
    tip.fadeOut("fast");
    }, 1000);
});

неверно; первая функция никогда не будет выполнена (из-за перегрузки click с двумя аргументами, последний из которых является обработчиком события). Все, что вам нужно сделать, чтобы исправить это - объединить две функции: 

$this.click(function() {
    var offset = $(this).offset();
    var tLeft = offset.left;
    var tTop = offset.top;

    tipInner.html(settings.messageTxt);
    setTip(tTop, tLeft);
    tip.fadeIn("fast");
    setTimeout(function() {
        tip.fadeOut("fast");
    }, 1000);
});

Обновленный код: http://jsfiddle.net/Bky7F/

...