如何将确认按钮添加到WebUI Popover jQuery插件中

How to add confirmation buttons to the WebUI-Popover jQuery plugin?

本文关键字:Popover WebUI jQuery 插件 添加 确认 按钮      更新时间:2023-09-26

我正在尝试让WebUI Popover jQuery有确认按钮,一个是"保存",另一个是取消,这样我就可以显示/隐藏并运行针对这两个事件的其他操作!

例如:所以我可以通过ajax将文本区域的内容发送到服务器!并验证popover以查看数据是否已保存,如果已保存,则隐藏popover,如果未保存,则不要隐藏它…让它静止显示!

popover本身工作得很好,但默认情况下没有这种功能,我认为这很重要!

以下是我对它的称呼;

HTML:

<table class="widget-table">
<tr>
    <th>Title</th>
    <th>Action</th>
</tr>
<tr>
    <td>Lorem ipsum dolor nova darius...</td>
    <td><button class="button button-primary button-small">Notes</button></td>
</tr>
<tr>
    <td>Lorem ipsum dolor nova darius...</td>
    <td><button class="button button-primary button-small">Notes</button></td>
</tr>

正如你所看到的,我有两个"保存"answers"取消"按钮作为标记的一部分!

JavaScript:

(function() {
        var $table = $('.widget-table');
        $table.find('tr .widget-table-note-trigger').each(function() {
            $(this).webuiPopover({
                placement: 'left',
                title: 'Notes',
                content: function() {
                    var html = ''
                    <div class="form-group">'
                        <textarea class="form-control">Your notes...</textarea>'
                    </div>'
                    <div class="button-group">'
                        <button class="button button-round button-small button-primary">Save</button>'
                        <button class="button button-round button-small button-secondary">Cancel</button>'
                    </div>'
                    ';
                    return html;
                },
                closeable: false,
                trigger: 'manual'
            });
            //
            $(this).click(function(){
                $(this).webuiPopover('show');
            })

        })
    })();

提前感谢

您需要使用dismissible:true来防止popover关闭,然后在事件发生后手动关闭它。如果您想将按钮附加到点击事件

,请记住使用JQuery on()