Question

我在一个用jquery ui布局插件构建的页面上使用jquery ui multiselect小部件。包含该小部件的页面的一部分（或更确切地说是子窗格）是可滚动的。所以当我点击多选时，它会打开下拉列表。现在，当我开始滚动时，下拉列表仍然打开，下拉列表保持在它的位置，从而与下拉按钮分离。为了解决这个问题，我在该div的滚动事件中添加了一个函数。它解决了这个问题，但在IE中杀死了滚动性能，代码如下

function initializeMultiSelect() {
    $('.dropdown').multiselect({
                multiple: false,
                // header: 'Select an option',
                noneSelectedText: '-Select an option-',
                autoOpen:false,
                selectedList: 1
            }).multiselectfilter();
    $('.multidropdown').multiselect({
                header: '<a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>Uncheck All</span></a>',
                noneSelectedText: "Select one or more",
                autoOpen:false,
                selectedList:25
            }).multiselectfilter();
}

function initializeMultiselectFix() {
    $(".center-center-center").scroll(function() {
        if($('#currentSelectedTab').val() == 1 || $('#currentSelectedTab').val() == 2 || $('#currentSelectedTab').val() == 4 ) {
            $(".ui-multiselect-menu:visible").hide();
            $(".ui-multiselect:visible").removeClass('ui-state-active');
            $(".ui-datepicker:visible").hide();
            $(".ui-autocomplete:visible").hide();
            <%--if ($(".ui-multiselect-menu").css('display', 'block')) {
                $(".ui-multiselect-menu").hide();
                $(".ui-multiselect").removeClass('ui-state-active');
            }
            if ($(".ui-datepicker").css('display', 'block')) {
                $(".ui-datepicker").hide();
            }
            if ($(".ui-autocomplete").css('display', 'block')) {
                $(".ui-autocomplete").hide();
            } --%>
        }
    });
}

这个分离问题可以在这里看到：http：//layout.jquery-dev.net/demos/datepicker.html 单击文本框，然后滚动。

请指出我正确的方向..

编辑：好的，所以我终于解决了这个问题。我决定不用手动隐藏滚动事件上的菜单，让我们修复插件本身。所以我所做的就是这样。

我修改了插件以附加选择菜单以将菜单附加到父div而不是文档正文（这是默认行为）

_create函数

中的

menu = (this.menu = $('<div />'))
                .addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all')
                .addClass( o.classes )
                .appendTo( o.elementToAttach ),

然后我传递了options数组中的elementToAttach属性，如下所示：

    $('#dropdown').multiselect({
elementToAttach:$('#dropdown').parent()
});

所以这解决了问题的一部分，现在选择菜单正在使用div滚动，但它没有位于下拉按钮下。

为了解决这个定位问题，我修改了打开函数（）（应该打开选择菜单。）...多选，我注意到位置是用offset（）方法计算的，它计算坐标相对于文档，但在这里我们想要相对于父级的位置，所以我将函数更改为position（），类似这样的

    open: function( e ){
        var self = this,
            button = this.button,
            menu = this.menu,
            speed = this.speed,
            o = this.options;

        // bail if the multiselectopen event returns false, this widget is disabled, or is already open 
        if( this._trigger('beforeopen') === false || button.hasClass('ui-state-disabled') || this._isOpen ){
            return;
        }

        var $container = menu.find('ul').last(),
            effect = o.show,
//the change
    pos = button.position();

所以现在一切正常，希望这有助于某人

Answer 1

解决方案的第二部分（菜单的定位）可以使用此小部件从rel 1.5开始支持的位置API来实现。您需要做的就是将这样的选项传递给构造函数：

$('#dropdown').multiselect({
    position: {
        my: 'left top',
        at: 'left bottom'
    }
});

仍然需要解决方案的第一部分（elementToAttach）。我建议作者将此功能添加到小部件。

Jquery ui multiselect小部件在IE中慢速滚动

1 个答案: