2

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 ),

次に、次のようにオプション配列に elementToAttach プロパティを渡しました。

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

これで問題の一部が修正されました。現在、選択メニューは div でスクロールされていましたが、ドロップダウン ボタンの下に配置されていませんでした。

この配置の問題を修正するために、open function() (選択メニューを開くはずです) を変更しました。ドキュメントですが、ここでは親に対する相対的な位置が必要なので、関数を 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

ソリューションの 2 番目の部分 (メニューの配置) は、このウィジェットがリリース 1.5 以降でサポートしている位置 API を使用して実現できます。必要なことは、次のようなオプションをコンストラクターに渡すことだけです。

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

ソリューションの最初の部分 (elementToAttach) はまだ必要です。この機能をウィジェットに追加することを著者に提案しました。

于 2013-03-29T22:43:35.220 に答える