使用qTip2确认工具提示对话框？ [英] Confirm tooltip dialog with qTip2?

问题描述

所以，当用户点击删除按钮时，我正在尝试创建一个小的确认对话框（inline，toopltip）。

我想像它看起来有点像这个

（但使用小文本，然后单击确定和取消按钮）。
但我不在这里询问如何设计风格。

我更喜欢使用qTip2作为插件工作，但如果你有一个更好的选择，我也会去。

那么，我如何做一些工具提示与一些interatice元素和只有关闭它，如果失去焦点或关闭按钮被点击。另外 - 删除按钮是由Ajax加载。

任何想法？

谢谢，平安！

解决方案

很容易使用和 jQuery UI文档。

So, i'm trying to create a small confirmation dialog (inline, toopltip) when a user clicks a delete button.

I imagine it to look kinda like this

(but with a small text and OK & Cancel buttons). But i'm not here to ask how to style it.

I would prefer to use qTip2 as the plugin for the job, but if you have an better alternative i'd go for it too.

So, how would i do to launch a tooltip with some interatice elements and only close it if looses focus or the close button is clicked. Also - the delete button is loaded by Ajax.

Any ideas?

Thank you, peace!

解决方案

It is easy to do with qTip2. I will give you a start, for that see my DEMO

Result

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());
    });
});​

Please for better adjusting to your needs, read the qTip2 Documentation and the jQuery UI Documentation.

这篇关于使用qTip2确认工具提示对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！