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>

然后我调用multiselect操作并隐藏整个事情：

    $(".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。（抱歉，还不能发布图片。）

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

1 个答案: