zoukankan      html  css  js  c++  java
  • 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示例

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

  • 相关阅读:
    学而时习之,不亦乐乎。
    uva10025 The ? 1 ? 2 ? ... ? n = k problem
    uva591 Box of Bricks
    uva253 Cube painting
    uva10194 Football (aka Soccer)
    用WORD2007发布博客文章
    Microsoft Silverlight 1.0 SDK 中文版推出
    vista sp1/office 2007 sp1和xp sp3都出来了
    scrollLeft,scrollWidth,clientWidth,offsetWidth,screen.width全解析(转帖)
    在C#中使用My命名空间
  • 原文地址:https://www.cnblogs.com/zaohe/p/3010651.html
Copyright © 2011-2022 走看看