可点击工具提示中的jQuery Multiselect Widget

Question

我尝试了atooltip ，它给了我一个可单击的工具提示，并且能够设置jQuery UI Multiselector作为内容。

        jQuery1_9('.fixedHeader tr').first().find('th').first().aToolTip({
          clickIt: true,
          tipContent: '<select class="test" multiple="multiple">' +
                        '<option>Test1</option>' +
                        '<option>Hello</option>' +
                        '<option>1F</option>' +
                      '</select>',
          onShow: function () {
            jQuery1_9(".test").multiselect();
          }
        });

但是，工具提示始终会创建和销毁其内容，并且不会保存multiselector状态。

我正在寻找一种解决方案，该解决方案应具有类似于工具提示的功能以及持久的交互式HTML内容。

不能选择弹出对话框。

Answer 1

我通过使用qTip2找到了解决我问题的方法。

我正在创建此隐藏的选择器：

<select class="test" multiple="multiple">
   <option>Test1</option>
   <option>Hello</option>
   <option>1F</option>
</select>

然后，我调用多选操作并隐藏整个内容：

    $(".test").multiselect()
    $('.ui-multiselect').hide();
    $('.ui-multiselect-close').hide(); // the default close-button is not wanted

对于包含多重选择器小部件的qTip，我然后使用以下选项：

    $('.selector').qtip({
        content: {
            text: $(".test").multiselect("widget"), // display the widget
            button: 'Close'
        },
        position: {
            my: 'top center',
            at: 'bottom center'
        },
        hide: {
            event: false
        },
        show: {
            event: 'click'
        }
    });

结果是一个非常漂亮的，交互式的，小巧的，类似于工具提示的窗口，其中带有jQuery UI Multiselector。 （对不起，还不能发布图片。）