3

jQuery UI Select Menuを使用していますが、時々問題が発生します。

これは、ユーザーのページの左上にあります。「ドロップダウン/アドレス」タイプを使用すると、(一見ランダムに見える) ドロップダウンが DOWN ではなく UP で開き、最初のオプション以外はすべて画面の「上」にあるため、オプションを選択できません。

強制的に開くための設定/オプションを知っている人はいますか? ありがとう！

update.... 2011 年 11 月 23 日午後 1 時 11 分 (東部標準時 ) 呼び出しのコードを次に示します。

$(function(){
            $('select#selectionA').selectmenu({
                style:'dropdown', 
                menuWidth: 220,
                positionOptions: {
                    collision: 'none'
                },
                format: addressFormatting
            });
        });
4

2 に答える 2

7

プラグインは、jQuery UI ライブラリのPositionユーティリティを使用します。プラグインのソースのデフォルト オプションを見るとpositionOptions、関数で使用されるプロパティがあります_refreshPosition()。

options: {
    transferClasses: true,
    typeAhead: 1000,
    style: 'dropdown',
    positionOptions: {
        my: "left top",
        at: "left bottom",
        offset: null
    },
    width: null,
    menuWidth: null,
    handleWidth: 26,
    maxHeight: null,
    icons: null,
    format: null,
    bgImage: function() {},
    wrapperElement: "<div />"
}

_refreshPosition: function() {
    var o = this.options;

    // if its a pop-up we need to calculate the position of the selected li
    if ( o.style == "popup" && !o.positionOptions.offset ) {
        var selected = this._selectedOptionLi();
        var _offset = "0 " + ( this.list.offset().top  - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
    }
    // update zIndex if jQuery UI is able to process
    this.listWrap
        .zIndex( this.element.zIndex() + 1 )
        .position({
            // set options for position plugin
            of: o.positionOptions.of || this.newelement,
            my: o.positionOptions.my,
            at: o.positionOptions.at,
            offset: o.positionOptions.offset || _offset,
            collision: o.positionOptions.collision || 'flip'
        });
}

位置ユーティリティ'flip'のオプションに何も指定されていない場合、デフォルト値が使用されていることがわかります。collisionjQuery UI ドキュメントによると:

反転: 反対側に移動し、衝突検出が再度実行されて適合するかどうかが確認されます。どちらの位置にも収まらない場合は、中央のオプションをフォールバックとして使用する必要があります。
fit : 要素は目的の方向を保ちますが、フィットするように再配置されます。
none : 衝突検出を行いません。

したがって、プラグインを初期化しnoneて衝突オプションを定義するときにオプションを渡すことができると思います。

$('select').selectmenu({
    positionOptions: {
        collision: 'none'
    }
});

まだテストしていません。これはコードを見るだけです。

次のコメントを編集

github で利用できる JavaScript のバージョンと、プラグイン Web サイトで使用されている JavaScript のバージョンが同じではないことに気付きました。どれを使っているかわかりませんが、ウェブサイトで使われているものはpositionOptions実際にはオプションがないので、呼び出すときに指定しても効果はありませんselectmenu()。
サイトの JavaScript に直接リンクすることはできないようです。そのため、説明するコードを次に示します。

defaults: {
    transferClasses: true,
    style: 'popup', 
    width: null, 
    menuWidth: null, 
    handleWidth: 26, 
    maxHeight: null,
    icons: null, 
    format: null
}

_refreshPosition: function(){   
    //set left value
    this.list.css('left', this.newelement.offset().left);

    //set top value
    var menuTop = this.newelement.offset().top;
    var scrolledAmt = this.list[0].scrollTop;
    this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
        scrolledAmt -= $(this).outerHeight();
    });

    if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
        menuTop+=scrolledAmt; 
        this.list.css('top', menuTop); 
    }   
    else { 
        menuTop += this.newelement.height();
        this.list.css('top', menuTop); 
    }
}

githubのバージョンで最初に説明したように、機能させることができました。私の意見では、それはより新しい/完全なバージョンです。また、数日前に更新されました。

2 つの選択を含む小さなテスト ページを作成しました。ドロップダウンの両方の位置を上に表示するように変更しました。
最初のものは衝突オプションを指定していないため、「フリップ」が使用され、ドロップダウンが下に表示されます。これは、上に十分なスペースがないためです。
2 番目には「なし」が指定されており、十分なスペースがない場合でもドロップダウンが上に表示されます。

小さなテスト プロジェクトをドロップボックスに置きました。

于 2011-11-21T10:05:50.597 に答える
1

私はSelectmenuプラグインのメンテナーです。現在3つのバージョンがあります。詳細については、wikiを参照してください：https ：//github.com/fnagel/jquery-ui/wiki/Selectmenu

あなたは私のフォークを使っていると思います。衝突の問題は、この修正に関連している可能性がありますhttps://github.com/fnagel/jquery-ui/pull/255、最新バージョンを試してください。

スクロールバーを強制するには、オプションmaxHeightを使用します。

于 2012-09-04T10:32:18.680 に答える