1

要素にドロップダウンを作成し、事前定義された要素を適用された要素の外側のドロップダウン メニューとして使用するプラグインを作成しています。

マークアップはこんな感じ

<a href="javascript:void(0)" id="some-menu" data-dropdown="dropdown-element">Click</a>

<ul id="dropdown-element">
    <li><a href="#">First item</a></li>
    <li><a href="#">Second item</a></li>
</ul>

そして使用$("#some-menu").dropdown({ placement: 'top' });すると#dropdown-elementドロップダウンになります。すべての良いとダンディ。

placement要素(上、下、右、左) に応じてドロップダウンをどのように配置するかを決定しますが、デフォルトの配置を把握していれば、これはかなり簡単に適用できるはずです。

BootstrapのTooltipプラグインからこのコードを使用してみました

pos = getPosition($element, inside);

actualWidth = $this[0].offsetWidth;
actualHeight = $this[0].offsetHeight;

switch (inside ? placement.split(' ')[1] : placement) {
    case 'bottom':
        tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
    break;
    case 'top':
        tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
    break;
    case 'left':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
    break;
    case 'right':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
    break;
}

しかし、運がなければ。

これはそれがどのように見えるかです ブラウザでドロップダウンがどのように見えるか

そして、これは望んでいた結果です ドロップダウンの外観

水平方向の中央に配置し#some-menu、ドロップダウンを任意の要素、インラインにも適用し、垂直方向と水平方向の両方の位置を維持したい。

編集: ドロップダウンが で要素内に作成されていることがわかりましたposition: relative。これが、そのオフセットが間違っている理由です。私の質問は、要素を本体に移動する最良の方法 (またはおそらくこれに対するより良い解決策) と、必要以上に DOM に触れずに良好なパフォーマンスを維持する方法です。

4

1 に答える 1

0

これにより、メニューが中央に配置されます。

top = $('#some-menu').offset().top + 8; //Set the vertical position.

left = $('#some-menu').offset().left - $('#dropdown-element').outerWidth/2 + $('#some-menu').outerWidth/2; //Set the menu to the center of the button.

$('#dropdown-element').offset({top: top, left: left});
于 2012-11-23T17:15:42.837 に答える