JS widget location and alignment

Document directory

• Location
• Alignment
• Implementation

 

Introduction

Many controls need to be located and displayed on the specific location of the page, or on other DOM alignment locations (up, down, and down). This is a feature of the control, is A typical Has-A relationship, so we will actually have two extensions available:

1. Position: controls location-related extensions
2. Align: extension of control alignment with other elements

Location

The position of a widget on a page is the position of the widget relative to the page coordinate (0, 0). We use (x, y) to mark:

 

Here, offset is used to indicate the relative position of the DOM node on the page. $ (). offset () in jQuery can be obtained. The algorithm for calculating the offset is not described here.

1. X coordinate of the offset. left Control
2. Y coordinate of the offset. top Control

The calculation and setting of the widget's location are relatively simple. The required properties and methods are also simple:

Attributes (including setter and getter) include:

1. X: x coordinate of the control
2. Y: y coordinate of the control
3. Xy: the xy coordinate of the control.

Method:

1. MoveTo: Move to a certain point

Alignment

Alignment is a location-based extension. First, let's take a look at some location points of the control:

 

1. Tl: control top, left
2. Tc: the top and middle of the control.
3. Tr: control top, right
4. Cl: center of the control, left
5. Cc: the middle and middle of the control.
6. Cr: middle of the control, right side
7. Bl: Bottom of the control, left
8. Bc: the bottom and middle of the control.
9. Br: Bottom of the control, right

So when we define an alignment, for example, the alignment between element a and Element B (left, top) can be identified by [tl, tl:

 

We can use a combination of the nine vertices to achieve various alignment.

When alignment is used, we also need to specify the offset of the position as follows:

 

At this time, we can find that the attributes need to be specified for definition alignment:

1. Node: aligned node
2. Points: Alignment mode, such as [tl, tl]
3. Offset: the offset, for example, [10, 10].

Provided methods:

Align (node, points, offset): align

Center (node): center, that is, the alignment of [cc, cc]

Implementation

Position implementation

Align implementation

Dialog example

There are many examples of alignment, such as date selection, display menu, editor and table editing.