要素にドロップダウンを作成し、事前定義された要素を適用された要素の外側のドロップダウン メニューとして使用するプラグインを作成しています。
マークアップはこんな感じ
<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 に触れずに良好なパフォーマンスを維持する方法です。