如何向WebUI-Popover jQuery 插件添加确认按钮？

Question

我正在尝试让 WebUI-Popover jQuery 有确认按钮，一个 'Save' 和另一个 'Cancel'，所以我可以 show/hide 和运行针对这两个事件的其他行动！

例如：所以我可以通过ajax将textarea内容发送到服务器！并验证弹出窗口以查看数据是否已保存，如果已保存则隐藏弹出窗口，如果没有则不要隐藏它...让它仍然显示！

弹出窗口本身工作得很好，但默认情况下没有这种功能，我认为这很重要！

我是这样称呼它的；

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>

如您所见，我将两个 'Save' 和 'Cancel' 按钮作为标记的一部分！

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');
            })


        })
    })();

提前致谢

Answer 1

您需要使用dismissible:true来防止弹出窗口关闭，然后在事件发生后手动关闭它。如果要将按钮附加到点击事件，请记住使用 JQuery on()

如何向WebUI-Popover jQuery 插件添加确认按钮？

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

javascript

jquery

jquery-plugins

popover