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

  • 2019 年 12 月 4 日
  • 筆記

本文作者：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

瀏覽器兼容性

  • IE7 && IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

部落格原文： http://forsigner.com/2016/03/06/beside-1/

VirMach 便宜 VPS

QNews

QNews