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

【问题标题】：jQuery Multiselect Widget inside a clickable tooltip可点击工具提示内的 jQuery 多选小部件
【发布时间】：2013-10-08 11:35:51
【问题描述】：

我试过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 内容。

弹出对话框不是一个选项。

【问题讨论】：

标签： javascript jquery-ui widget tooltip multi-select

【解决方案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 多选器。（抱歉，目前还不能发布图片。）

【讨论】：