如何打造一个DOM元素位置引擎 (一)

2019年8月30日 181次阅读 来源: forsigner

碎碎念

这是一篇早就应当写的文章，然则由于过年前项目慌张，一向没有时候，这个周末决议把这笔债换了。这个项目最先于两个月前，也是花了比较多时候的一个项目，不像前段时候写的 Hexo 主题 fexo ，灵感一现，两个晚上就大致出来了。这也是一个比较有意义的项目，由于它不是一个能够直接用的前端UI组件，它是一个基本UI类库，要更好的运用它，你须要再它基本上去完成一些可用的前端组件。

这个DOM元素位置引擎是什么？

说成一个引擎，着实有些装逼，实在它就是掌握 DOM 元素位置的一个 JavaScript Library，在前端交互中，如何给 DOM 元素定位是一个常常碰到的题目，所以我把能够通用的部份笼统出来，如许能够更轻易的给元素定位。

这个类库我给它取名叫做 beside，意义是【在旁边】，这也是 beside 的中心功用，让一个元素安排于另一个元素旁边。

Beside劈头

它劈头跟艺术一样，源于生涯（装逼）。实在他的劈头来源于一个删除按钮，需求来源于我们的交互设计师。最先我们前端做了一个删除成员的功用，没有任何提醒，就直接删除了。交互说这当然是不可的，要加个二次确认，前端说能够加个弹窗吗？交互说不可，不要这类大弹窗，在删除按钮旁边弹个小卡片就好了，也就是下面的结果:

《如何打造一个DOM元素位置引擎 (一)》

二次确认这个小功用，它就是 Beside 的劈头。

Beside 究竟是什么？

一句话: beside 是一个让一个 DOM 元素安排在另一 DOM 元素的基本 UI 库。

Gibhub: beside

Demo: 检察

结果图：

《如何打造一个DOM元素位置引擎 (一)》

运用场景

运用 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

浏览器兼容性

  • IE7 && IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

博客原文： http://forsigner.com/2016/03/06/beside-1/

    原文作者：forsigner
    原文地址: https://segmentfault.com/a/1190000004554642
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞