JS 控件 位置和对齐

 

简介

很多控件需要进行定位，显示在页面的具体位置上，或者显示在于其他DOM对齐的位置（上下左右）上，这是控件拥有的特性，是典型的 Has-A关系，所以我们将其实现成2个扩展：

1. Position： 控件位置相关的扩展
2. Align：控件跟其他元素对齐的扩展

位置

控件在页面上的位置是指控件相对于页面坐标（0,0）的位置，我们用（x,y）来标示：

 

我们这里用offset来标示DOM节点在页面上的相对位置，jQuery中 $().offset()既可以求出，具体计算offset 的算法这里就不介绍了。

1. offset.left 控件的 x 坐标
2. offset.top 控件的 y 坐标

计算和设置控件的位置比较简单需要的属性和方法也简单：

属性（包括setter 和 getter）有：

1. x : 控件的 x 坐标
2. y : 控件的 y 坐标
3. xy : 控件的 xy 坐标

方法：

1. moveTo : 移动到某一点

对齐

对齐是基于位置的的一个扩展，我们首先来看一下控件的本身的一些位置点：

 

1. tl: 控件的顶部，左边
2. tc: 控件的顶部，中间
3. tr: 控件的顶部，右边
4. cl: 控件的中间，左边
5. cc: 控件的中间，中间
6. cr: 控件的中间，右边
7. bl: 控件的底部，左边
8. bc: 控件的底部，中间
9. br: 控件的底部，右边

所以当我们定义一个对齐时，如a 元素与 b元素的（左边，顶部）对齐我们可以用[tl,tl]来标示：

 

我们可以用上面的9个点两两组合，来实现各种对齐。

在使用对齐时，有时候我们还需要指定一下位置的偏移，如下：

 

这时候我们可以发现定义对齐需要指定一下属性：

1. node : 对齐的节点
2. points : 对齐方式，例如[tl,tl]
3. offset : 偏移量，例如[10,10]

提供的方法：

align(node,points,offset): 对齐

center(node): 居中，即[cc,cc]的对齐方式

实现

position实现

align 实现

dialog示例

对齐的示例非常的多，选择日期、显示菜单、编辑器编辑表格等等