2

我在使用 jquery ui 布局插件构建的页面上使用 jquery ui 多选小部件。包含此小部件的页面的一部分（或更确切地说是子窗格）是可滚动的。所以当我点击多选时，它会打开下拉菜单。现在，当我在下拉菜单仍然打开的情况下开始滚动时，下拉菜单保持在其位置，因此与下拉按钮分离。为了解决这个问题，我在该 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 一起滚动，但它没有位于下拉按钮下方。

为了解决这个定位问题，我修改了多选的打开函数（）（应该打开选择菜单。）...，我注意到位置是使用计算相对于坐标的偏移量（）方法计算的文档，但是这里我们想要相对于父级的位置，所以我将函数更改为 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();

所以现在一切正常，希望这可以帮助某人

4

1 回答 1

1

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

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

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

于 2013-03-29T22:43:35.220 回答