Подсказка jQuery заставляет исчезнуть название href - PullRequest
Новая
       34

Подсказка jQuery заставляет исчезнуть название href

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

Я уверен, что это простая проблема .. Я уже потратил слишком много времени на это

У меня есть следующее изображение: 

 <img src="/_/img/icons/103-map.png" alt="Find Me" title="come and find me..." class="action findMe_map"/>

И следующий javascript, использующий инструменты jQuery 1.2.6: 

 <script>
    $(document).ready(function() {

    // create custom animation algorithm for jQuery called "bouncy"
    $.easing.bouncy = function (x, t, b, c, d) {
        var s = 1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    }

    // create custom tooltip effect for jQuery Tooltip
    $.tools.tooltip.addEffect("bouncy",

        // opening animation
        function(done) {
            this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
        },

        // closing animation
        function(done) {
            this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
                $(this).hide();
                done.call();
            });
        }
    );

    $('img.findMe_map').click(function() {
        event.preventDefault();
        console.log(this);
        $('img[title]').tooltip({effect: 'bouncy'});
    });
 </script>

  • Когда я использую вышеуказанный код, заголовок исчезает из вывода console.log(this);, а во всплывающей подсказке не отображается проблема, которую я пытаюсь решить

  • Когда я закомментирую строку всплывающей подсказки в click() и нажму на изображение, в консоли появится сообщение «Приди и найди меня ...».

Confused.

1 Ответ

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

Объяснение

Все настраивается в параметрах всплывающей подсказки при его инициализации. 

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    tipClass: 'foo',
    ...
});

События не контролируются так, как вы привыкли.
Онина самом деле настраивается при инициализации всплывающей подсказки: 

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    events:{...}
});

Подробнее об этом можно прочитать здесь .

Я предполагаю, что вы хотите, чтобы она отскакивала при нажатииэто, как это делает здесь .

Решение

Вот рабочее решение для JSFiddle с 3 различными примерами использования событий.
.. хотя это не выглядиткак бы круто это ни было на их сайте, это демонстрирует, как это работает!

// create custom animation algorithm for jQuery called "bouncy"
$.easing.bouncy = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

// create custom tooltip effect for jQuery Tooltip
$.tools.tooltip.addEffect("bouncy",

    // opening animation
    function(done) {
        this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
    },

    // closing animation
    function(done) {
        this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
            $(this).hide();
            done.call();
        });
    }
);

//Manage all the settings here, and only do it once
$("img.findMe_map").tooltip({
    effect: 'bouncy',
    events: {
        def: "click, mouseout", // default show/hide events for an element
    }
});

Документация

Всю документацию можно найти здесь .

Удачного кодирования!:)

...