V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
forsigner
V2EX  ›  程序员

怎样打造一个 DOM 元素位置引擎 (一)

  •  
  •   forsigner · 2016-03-07 13:02:48 +08:00 · 3319 次点击
    这是一个创建于 3194 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是来装逼的,其实这不是什么高大上的引擎,是是我自己写的一个 UI 基础类库,作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库,欢迎 Ver 吐槽建议。

    这个类库我给它取名叫做 beside,意思是 [在旁边] 。

    Gibhub: beside -- I need you beside me.

    Demo: 去体验

    效果图:

    beside

    使用场景

    使用 Beside 可以更方便的实现一些前端组件, 典型的包括: Tooltip 、 Popover 、 Dropdown Menu 、垂直居中的 Modal 等。

    比如下面的二次确认是典型的用法:

    fo-popover

    Beside 的用法

    <script src="bower_components/beside/dist/js/beside.js"></script>
    
    <div id="me">ME</div>
    <div id="you">YOU</div>
    
    beside.init({
      me: document.getElementById('me'),
      you: document.getElementById('you'),
      where: 'top center'
    });
    

    基于 Beside 的 UI component

    浏览器兼容性

    • IE7 && IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    详细介绍可以看我博客原文: http://forsigner.com/2016/03/06/beside-1/

    第 1 条附言  ·  2016-03-07 14:23:20 +08:00
    修改:
    1. Gibhub -> Github
    2. 作用应该是:让一个 DOM 元素放置在另一 DOM 元素旁边,就算屏幕滚动,相对位置也不变。
    21 条回复    2016-05-01 11:05:46 +08:00
    livia313
        1
    livia313  
       2016-03-07 13:12:13 +08:00
    I need you beside me.. 单身狗...
    dongyado
        2
    dongyado  
       2016-03-07 13:48:30 +08:00
    不错,估计下次可以用上
    learnshare
        3
    learnshare  
       2016-03-07 14:06:51 +08:00
    “作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库” 这句我不懂,我英语不好。
    不过 demo 不错。

    如果 #me 和 #you 在一起的话,完全可以用 CSS 来实现,就不需要计算位置和尺寸了。
    (这个好玩,可以考验定位的功力)
    forsigner
        4
    forsigner  
    OP
       2016-03-07 14:17:39 +08:00
    @livia313 汪汪汪~
    forsigner
        5
    forsigner  
    OP
       2016-03-07 14:17:47 +08:00
    forsigner
        6
    forsigner  
    OP
       2016-03-07 14:19:59 +08:00
    @learnshare 漏字了 囧 应该是:让一个 DOM 元素放置在另一 DOM 元素旁边,就算屏幕滚动,相对位置不会改变
    forsigner
        7
    forsigner  
    OP
       2016-03-07 14:20:56 +08:00
    @learnshare 有些场景 CSS 不够用
    breeswish
        8
    breeswish  
       2016-03-07 14:29:09 +08:00
    好评 :-) 我自己造的轮子可以删掉啦
    learnshare
        9
    learnshare  
       2016-03-07 14:31:30 +08:00
    @forsigner 是的,#me 和 #you 不在一起的话,都需要动用 JS 。
    breeswish
        10
    breeswish  
       2016-03-07 14:34:01 +08:00
    请求加上可用空间检测(例如对于 Dropdown 来说,如果放在下方超过了屏幕则应该放在上方)
    forsigner
        11
    forsigner  
    OP
       2016-03-07 15:12:36 +08:00
    @breeswish 空间检测最好在 Dropdown 空间里加吧
    breeswish
        12
    breeswish  
       2016-03-07 18:35:49 +08:00
    @forsigner 那么功能不就和你这个重复了吗 :-) 要知道是否超出空间,要先计算出位置,那么就不用你这个模块啦
    breeswish
        13
    breeswish  
       2016-03-07 18:36:12 +08:00
    @forsigner ( popover,tooltip 同理
    forsigner
        14
    forsigner  
    OP
       2016-03-07 19:44:40 +08:00
    @breeswish 恩恩 可以加一个 options ,是否开启空间检测
    breeswish
        15
    breeswish  
       2016-03-07 20:09:42 +08:00
    @forsigner 我觉得可以作为一个函数,传相同的参数,返回的是布尔值而不去调整位置,这样调用者可以选择在调用 init 之前先调用这个函数检测空间是否充足
    w88975
        16
    w88975  
       2016-03-07 20:13:21 +08:00
    我尝试把"me"的 left 值改了 "you"并没有跟着动
    murmur
        17
    murmur  
       2016-03-07 21:29:11 +08:00
    突然感觉是不是可以拿来做 2048 玩
    forsigner
        18
    forsigner  
    OP
       2016-03-08 09:13:15 +08:00
    @breeswish 恩恩 我后面加上类似的功能
    forsigner
        19
    forsigner  
    OP
       2016-03-08 09:16:35 +08:00
    @w88975 请问你怎么改的呢?
    forsigner
        20
    forsigner  
    OP
       2016-03-08 11:50:32 +08:00
    @murmur 这个脑洞很大
    breeswish
        21
    breeswish  
       2016-05-01 11:05:46 +08:00
    话说楼主是不是造了个轮子 :-)
    https://github.com/HubSpot/tether
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5493 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 03:42 · PVG 11:42 · LAX 19:42 · JFK 22:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.