碎碎念
這是一篇早就應(yīng)該寫的文章，但是由于過年前項(xiàng)目緊張恶耽，一直沒有時(shí)間密任，這個(gè)周末決定把這筆債換了。這個(gè)項(xiàng)目開始于兩個(gè)月前驳棱，也是花了比較多時(shí)間的一個(gè)項(xiàng)目批什，不像前段時(shí)間寫的 Hexo 主題 fexo ，靈感一現(xiàn)社搅，兩個(gè)晚上就大體出來了驻债。這也是一個(gè)比較有意思的項(xiàng)目，因?yàn)樗皇且粋€(gè)可以直接用的前端UI組件形葬，它是一個(gè)基礎(chǔ)UI類庫合呐，要更好的使用它，你需要再它基礎(chǔ)上去實(shí)現(xiàn)一些可用的前端組件笙以。
這個(gè)DOM元素位置引擎是什么淌实？
說成一個(gè)引擎，實(shí)在有些裝逼猖腕，其實(shí)它就是控制 DOM 元素位置的一個(gè) JavaScript Library拆祈，在前端交互中，怎樣給 DOM 元素定位是一個(gè)經(jīng)常遇到的問題倘感，所以我把可以通用的部分抽象出來放坏，這樣可以更方便的給元素定位。
這個(gè)類庫我給它取名叫做 beside老玛，意思是【在旁邊】淤年，這也是 beside 的核心功能，讓一個(gè)元素放置于另一個(gè)元素旁邊蜡豹。
Beside起源
它起源跟藝術(shù)一樣麸粮，源于生活（裝逼）。其實(shí)他的起源來源于一個(gè)刪除按鈕镜廉，需求來源于我們的交互設(shè)計(jì)師弄诲。開始我們前端做了一個(gè)刪除成員的功能，沒有任何提示桨吊，就直接刪除了威根。交互說這當(dāng)然是不行的，要加個(gè)二次確認(rèn)视乐，前端說可以加個(gè)彈窗嗎？交互說不行敢茁，不要這種大彈窗佑淀，在刪除按鈕旁邊彈個(gè)小卡片就好了，也就是下面的效果:
二次確認(rèn)這個(gè)小功能彰檬，它就是 Beside 的起源伸刃。
Beside 到底是什么谎砾？
一句話: beside 是一個(gè)讓一個(gè) DOM 元素放置在另一 DOM 元素的基礎(chǔ) UI 庫。
Gibhub: beside
Demo: 查看
效果圖：
使用場(chǎng)景
使用 Beside 可以更方便的實(shí)現(xiàn)一些前端組件, 典型的包括： 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
