怎样打造一个 DOM 元素位置引擎 (一)

[forsigner]

我是来装逼的，其实这不是什么高大上的引擎，是是我自己写的一个 UI 基础类库，作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库，欢迎 Ver 吐槽建议。

这个类库我给它取名叫做 beside，意思是 [在旁边] 。

Gibhub: beside -- I need you beside me.

Demo: 去体验

效果图：

使用场景

使用 Beside 可以更方便的实现一些前端组件, 典型的包括： Tooltip 、 Popover 、 Dropdown Menu 、垂直居中的 Modal 等。

比如下面的二次确认是典型的用法：

Beside 的用法

<script src="bower_components/beside/dist/js/beside.js"></script>

<div id="me">ME</div>
<div id="you">YOU</div>

beside.init({
  me: document.getElementById('me'),
  you: document.getElementById('you'),
  where: 'top center'
});

基于 Beside 的 UI component

• fo-popover A nice popover for Angular.
• fo-tooltop A nice tooltip for Angular.

浏览器兼容性

• IE7 && IE7+
• Firefox
• Chrome
• Safari
• Opera

详细介绍可以看我博客原文： http://forsigner.com/2016/03/06/beside-1/

[livia313]

I need you beside me.. 单身狗...

[dongyado]

不错，估计下次可以用上

[learnshare]

“作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库” 这句我不懂，我英语不好。
不过 demo 不错。

如果 #me 和 #you 在一起的话，完全可以用 CSS 来实现，就不需要计算位置和尺寸了。
（这个好玩，可以考验定位的功力）

[forsigner]

@livia313 汪汪汪~

[forsigner]

@dongyado thx

[forsigner]

@learnshare 漏字了 囧 应该是：让一个 DOM 元素放置在另一 DOM 元素旁边，就算屏幕滚动，相对位置不会改变

[forsigner]

@learnshare 有些场景 CSS 不够用

[breeswish]

好评 :-) 我自己造的轮子可以删掉啦

[learnshare]

@forsigner 是的，#me 和 #you 不在一起的话，都需要动用 JS 。

[breeswish]

请求加上可用空间检测（例如对于 Dropdown 来说，如果放在下方超过了屏幕则应该放在上方）

[forsigner]

@breeswish 空间检测最好在 Dropdown 空间里加吧

[breeswish]

@forsigner 那么功能不就和你这个重复了吗 :-) 要知道是否超出空间，要先计算出位置，那么就不用你这个模块啦

[breeswish]

@forsigner （ popover,tooltip 同理

[forsigner]

@breeswish 恩恩 可以加一个 options ，是否开启空间检测

[breeswish]

@forsigner 我觉得可以作为一个函数，传相同的参数，返回的是布尔值而不去调整位置，这样调用者可以选择在调用 init 之前先调用这个函数检测空间是否充足

[w88975]

我尝试把"me"的 left 值改了 "you"并没有跟着动

[murmur]

突然感觉是不是可以拿来做 2048 玩

[forsigner]

@breeswish 恩恩 我后面加上类似的功能

[forsigner]

@w88975 请问你怎么改的呢？

[forsigner]

@murmur 这个脑洞很大