javascript - 可点击工具提示内的 jQuery 多选小部件

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

但是，工具提示始终会创建和销毁其内容，并且多重选择器状态不会被保存。

我正在寻找一种解决方案，其中具有类似工具提示的功能以及持久的交互式 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 多选择器。 (抱歉，目前还无法发布图片。)