twitter

This is an article that should have been written long ago, but due to the tight project before the Chinese New Year, I have no time, so I decided to change the debt this weekend. This project started two months ago, which also took a long time. Unlike the Hexo theme Fexo, which was written recently, the inspiration came out in two nights. This is also an interesting project because it is not a front-end UI component that can be used directly. It is a basic UI class library that you need to implement some usable front-end components on top of.

What is the DOM element location engine?

It is a JavaScript Library that controls the location of DOM elements. In front end interactions, how to locate DOM elements is a common problem, so I abstract out the parts that can be used in general, so that it is easier to locate elements.

I named this library beside, which means beside, and that’s beside’s core function, to put one element next to another.

Beside the origin

It has the same origin as art, from life. In fact, its origin came from a delete button, and the requirements came from our interaction designers. At the beginning, we did a function to delete members in the front end, without any hint, it was directly deleted. Interaction said this is of course not, to add a second confirmation, the front said can you add a popover? No, don’t do this big popover, just pop a small card next to the delete button, which is the following effect:

<>

Double-check this little feature, which is the origin of Beside.

What exactly is Beside?

In a word: Beside is a basic UI library for placing one DOM element in another.

Gibhub: beside

Demo: view

Effect:

<>

Usage scenarios

Using Beside makes it easier to implement some front-end components, such as Tooltip, Popover, Dropdown Menu, vertically centered Modal, etc.

Beside the usage of the




       

        ME
       


       

        YOU
       
Copy the code
beside.init({
  me: document.getElementById('me'),
  you: document.getElementById('you'),
  where: 'top center'
});Copy the code

Beside based UI Component

Browser compatibility

  • IE7 && IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

Blog: forsigner.com/2016/03/06/…