怎樣打造一個DOM元素位置引擎 (一)

碎碎念

這是一篇早就應該寫的文章，可是因爲過年前項目緊張，一直沒有時間，這個週末決定把這筆債換了。這個項目開始於兩個月前，也是花了比較多時間的一個項目，不像前段時間寫的 Hexo 主題 fexo ，靈感一現，兩個晚上就大致出來了。這也是一個比較有意思的項目，由於它不是一個能夠直接用的前端UI組件，它是一個基礎UI類庫，要更好的使用它，你須要再它基礎上去實現一些可用的前端組件。

這個DOM元素位置引擎是什麼？

說成一個引擎，實在有些裝逼，其實它就是控制 DOM 元素位置的一個 JavaScript Library，在前端交互中，怎樣給 DOM 元素定位是一個常常遇到的問題，因此我把能夠通用的部分抽象出來，這樣能夠更方便的給元素定位。

這個類庫我給它取名叫作 beside，意思是【在旁邊】，這也是 beside 的核心功能，讓一個元素放置於另外一個元素旁邊。

Beside起源

它起源跟藝術同樣，源於生活（裝逼）。其實他的起源來源於一個刪除按鈕，需求來源於咱們的交互設計師。開始咱們前端作了一個刪除成員的功能，沒有任何提示，就直接刪除了。交互說這固然是不行的，要加個二次確認，前端說能夠加個彈窗嗎？交互說不行，不要這種大彈窗，在刪除按鈕旁邊彈個小卡片就行了，也就是下面的效果:

二次確認這個小功能，它就是 Beside 的起源。

Beside 究竟是什麼？

一句話: beside 是一個讓一個 DOM 元素放置在另外一 DOM 元素的基礎 UI 庫。

Gibhub: beside

Demo: 查看

效果圖：

使用場景

使用 Beside 能夠更方便的實現一些前端組件, 典型的包括： Tooltip、Popover、 Dropdown Menu、垂直居中的 Modal 等。

Beside 的用法

<script src="bower_components/beside/dist/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/