Управление оригинальными элементами с помощью qTip - PullRequest
Новая
       4

Управление оригинальными элементами с помощью qTip

1 голос
/ 21 ноября 2011

У меня есть куча div на моей странице, и у каждого из них есть только атрибут class.В div есть несколько диапазонов, которые настроены на отображение всплывающей подсказки с помощью qTip.

Подсказка должна содержать три элемента:

  • Up: якорь, который долженпереместить OuterDiv вверх (вероятно, что-то вроде этого: переместить вверх / вниз в jquery )
  • Вниз: якорь, который должен переместить OuterDiv вниз
  • Удалить: якорь, которыйдолжен удалить вызывающий OuterDiv

Мой код до сих пор: 

<body>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 1</span>
        </div>
    </div>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 2</span>
        </div>
    </div>
</body>

И скрипты: 

$(document).ready(function () {
            var qTipContent = '<a href="javascript:void(0)" onclick="">&uarr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">&darr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
            $('.Position').each(function () {
                $(this).qtip({
                    content: qTipContent,
                    hide: {
                        fixed: true
                    }
                })
            });
        });

Как должна функционировать onclick в qTipсодержание выглядит?

1 Ответ

1 голос
/ 08 июня 2012

Мое решение можно найти по этому адресу jsFiddle - Помимо очистки qTipContent (было просто очень грязно), единственным реальным заметным добавлением было добавление идентификаторов в якоря и использование API-интерфейса qTip для добавления привязок к событию click для каждого якоря при добавлении окна qTip. 

$('.Position').each(function(idx, elem) {
    $(this).qtip({
        content: qTipContent,
        show: {
            when: {
                event: 'click'
            }
        },
        hide: {
            fixed: true,
            when: {
                event: "unfocus"
            }
        },

        api: {
            onRender: function() {
                var $qtip = $(this.elements.content);
                var odiv = $(elem).closest(".OuterDiv");

                $("#up_arrow", $qtip).click(function() {
                    odiv.insertBefore(odiv.prev());
                })

                $("#down_arrow", $qtip).click(function() {
                    odiv.insertAfter(odiv.next());
                })

                $("#delete", $qtip).click(function() {
                    odiv.remove();
                })
            }
        }
    })
});
...