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

本文作者：IMWeb forsigner 原文出处：IMWeb社区 未经同意，禁止转载

碎碎念

这是一篇早就应该写的文章，但是由于过年前项目紧张，一直没有时间，这个周末决定把这笔债换了。这个项目开始于两个月前，也是花了比较多时间的一个项目，不像前段时间写的 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/