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示例

對齊的示例非常的多，選擇日期、顯示菜單、編輯器編輯表格等等