怎样打造一个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

浏览器兼容性

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

极速适配 iPhone X 秘笈

20840
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

27360
来自专栏非著名程序员

【周末分享】解决中文排版错位的JustifiedTextview控件

1、FlowingDrawer 效果 ---- ? 2、Justifiedtextview 说明 ---- android中textview在中文排版时会出现无...

22780
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

35180
来自专栏大数据钻研

前端工程师必备实用网站

一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们...

32960
来自专栏DeveWork

移动端UC /QQ 浏览器的部分私有Meta 属性

如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下,单从这...

333100
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

17620
来自专栏GA小站

Adobe Experience Cloud指南2018

1、登录的地址访问http://marketing.adobe.com,可以看到如下的画面:

37330
来自专栏林德熙的博客

win10 uwp BadgeLogo 颜色

本文讲的是在上传应用商店出现BadgeLogo颜色问题,和如何解决,因为我是渣渣,本文可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果...

8210
来自专栏DeveWork

Fontello:免费Web-font 图标大集合(font-face 图标集)

当我知道这个网站的存在,我就知道我非常有必要将此分享给大家。Fontello,一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设...

29160

扫码关注云+社区

领取腾讯云代金券