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

罗志环发布于2019-08-30 12:48 / 3590人阅读

碎碎念

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



ME
YOU

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/

GPU云服务器云服务器 dom元素位置 DOM元素修改DOM元素 dom获取元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115082.html

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

碎碎念这是一篇早就应该写的文章，但是由于过年前项目紧张，一直没有时间，这个周末决定把这笔债换了。这个项目开始于两个月前，也是花了比较多时间的一个项目，不像前段时间写的 Hexo 主题 fexo ，灵感一现，两个晚上就大体出来了。这也是一个比较有意思的项目，因为它不是一个可以直接用的前端UI组件，它是一个基础UI类库，要更好的使用它，你需要再它基础上去实现一些可用的前端组件。这个DOM元素位置引...

qingshanli1988 2019-08-21 10:50 评论0 收藏0
怎样打造一个DOM元素位置引擎 (一)

碎碎念这是一篇早就应该写的文章，但是由于过年前项目紧张，一直没有时间，这个周末决定把这笔债换了。这个项目开始于两个月前，也是花了比较多时间的一个项目，不像前段时间写的 Hexo 主题 fexo ，灵感一现，两个晚上就大体出来了。这也是一个比较有意思的项目，因为它不是一个可以直接用的前端UI组件，它是一个基础UI类库，要更好的使用它，你需要再它基础上去实现一些可用的前端组件。这个DOM元素位置引...

CastlePeaK 2019-08-01 15:07 评论0 收藏0
3d transform的坐标空间及位置

摘要：控制摄像机画面网页里的摄像机一般是这样用的在网页里，无论你搭建了怎样的三维场景，只要你希望它显示出来，就应该像这样把构成场景的三维物体都放在一个容器元素里，然后为容器元素添加摄像机属性和。 css里的3d理念使用css3的3d transform，就可以在平面的网页里添加炫酷的三维视觉效果，这很令人愉悦。需要注意的是，3d transform只是css的一部分，它并不是一个三维引擎...

fasss 2019-08-28 18:28 评论0 收藏0
【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例...

JeOam 2019-08-20 14:46 评论0 收藏0