3

jQuery Tokeninputプラグインを使用して、jsonp 経由で配信される音楽アーティスト名のオートコンプリート リストを表示しています。

これはすべて正常に機能しますが、ページの固定フッターに入力を入れる必要があります。つまり、もちろん、ドロップダウン リスト自体がページの下部から外れます。

この動作を逆にして、ドロップダウン リストを入力要素の「上」に表示したいのですが、これを実現する方法が見つからないようです。

何か案は？

4

2 に答える 2

1

show_dropdown 関数を修正して、上に表示するか下に表示するかを自動的に決定します。

function show_dropdown() {
    if (input_box.is(':focus')) {
        var windowHeight = $(window).height();
        var docViewTop = $(window).scrollTop();
        var dropdownPosition = $(token_list).offset().top + $(token_list).outerHeight();
        var availableSpace = windowHeight - (dropdownPosition - docViewTop)
        var borderWidth = parseInt(dropdown.css('border-bottom-width'));

        if (availableSpace >= (settings.maxHeight + 2 * borderWidth)) {
            dropdown.css('bottom', '');
            $('body').css('position', '');

            dropdown.css({
                'border-top-width': 0,
                left: $(token_list).offset().left,
                top: $(token_list).offset().top + $(token_list).outerHeight()
            });
        } else {
            dropdown.css('top', '');

            var bodyHeight = $('body').outerHeight();
            var bodyTop = $('body').offset().top;
            var bottom;

            if ((bodyHeight + bodyTop) < dropdownPosition) {
                bottom = dropdownPosition - (bodyTop + bodyHeight) ;
            }
            else {
                bottom = (bodyTop + bodyHeight) - ($(token_list).offset().top + borderWidth);
            }

            dropdown.css({
                'border-top-width': borderWidth,
                'border-top-color': dropdown.css('border-bottom-color'),
                'border-top-style': dropdown.css('border-bottom-style'),
                'bottom': bottom,
                'left': $(token_list).offset().left - parseInt($('body').css('margin-left')),
                'position': 'absolute'
            });
            $('body').css({
                'position': 'relative'
            });
        }
        dropdown.css({
            maxHeight: settings.maxHeight,
            overflow: 'auto',
            zIndex: settings.zIndex
        }).show();
    }
}

maxHeightまた、tokenInput にプロパティを追加し、それを使用してスペースを確認し、ドロップダウンのサイズを設定します。

ここで試してみてください: http://jsfiddle.net/colin_young/dvuHD/19/ (私のバージョンにはストック バージョンからの重要な変更がいくつかあることに注意してください。それらのプル リクエストを作成する機会がありませんでした)。

ただし、上にスペースがあることを確認する試みは行われません。入力要素を中央に配置することは良い妥協点かもしれませんが、下にも上にもスペースがない場合、できることはあまりないという前提があります。

于 2013-04-10T18:57:08.997 に答える
0

jquery.tokeninput.jsファイル内のshow_dropdown()関数のコードを変更する必要があると思います。

function show_dropdown() {
        dropdown
            .css({
                position: "absolute",
                top: $(token_list).offset().top + $(token_list).outerHeight(),
                left: $(token_list).offset().left,
                zindex: 999
            })
            .show();
    }

「上」の広告「左」のパラメータを適切に調整するだけです。

于 2012-07-23T10:41:32.517 に答える