Подтвердить диалог всплывающей подсказки с помощью qTip2? - PullRequest
Новая
       48

Подтвердить диалог всплывающей подсказки с помощью qTip2?

4 голосов
/ 23 мая 2011

Итак, я пытаюсь создать небольшое диалоговое окно подтверждения (inline, toopltip), когда пользователь нажимает кнопку удаления.

Я думаю, это выглядит примерно так

enter image description here

(но с небольшим текстом и кнопками ОК и Отмена). Но я здесь не для того, чтобы спросить, как его стилизовать.

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

Итак, как мне сделать, чтобы запустить всплывающую подсказку с некоторыми элементами взаимодействия и закрывать ее только в случае потери фокуса или нажатия кнопки закрытия. Также - кнопка удаления загруженаот Ajax.

Есть идеи?

Спасибо, мир!

1 Ответ

2 голосов
/ 07 мая 2012

Это легко сделать с qTip2 .Я дам вам старт, для этого посмотрите мой ДЕМО

Результат

Demo pic

HTML 

<button id="gear">Gear</button>
<div style="display:none;" id="menu">
    <div class="menuitem">Rename</div><br>
    <div class="menuitem">Duplicate</div><br>
    <div class="menuitem">Delete</div><br>
</div>

CSS 

#gear {
    margin:100px;
}
.menuitem {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 9px;
    margin-bottom: 3px;
    width: 75px;
}

JavaScript 

$(function() {
    $("#gear").button({
        icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
        },
        text: false
    }).qtip({
        content: {
            text: $('#menu')
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        style: {
            classes: 'ui-tooltip-dark ui-tooltip-shadow'
        },
        position: {
            my: 'top center',
            at: 'bottom center',
        }
    });
    $(".menuitem").button().click(function(){
        alert($(this).text());
    });
});​

Пожалуйста, для лучшей адаптации к вашим потребностям прочитайте документацию qTip2 и документация по jQuery UI .

...