怎樣打造一個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/