这是一个创建于 3185 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是来装逼的，其实这不是什么高大上的引擎，是是我自己写的一个 UI 基础类库，作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库，欢迎 Ver 吐槽建议。
这个类库我给它取名叫做 beside，意思是 [在旁边] 。
Gibhub: beside -- I need you beside me.
Demo: 去体验
效果图：
使用场景
使用 Beside 可以更方便的实现一些前端组件, 典型的包括： Tooltip 、 Popover 、 Dropdown Menu 、垂直居中的 Modal 等。
比如下面的二次确认是典型的用法：
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
- fo-popover A nice popover for Angular.
- fo-tooltop A nice tooltip for Angular.
浏览器兼容性
- 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 元素旁边，就算屏幕滚动，相对位置也不变。
1. Gibhub -> Github
2. 作用应该是：让一个 DOM 元素放置在另一 DOM 元素旁边，就算屏幕滚动，相对位置也不变。
 |
1
livia313 2016-03-07 13:12:13 +08:00
I need you beside me.. 单身狗...
|
 |
2
dongyado 2016-03-07 13:48:30 +08:00
不错，估计下次可以用上
|
 |
3
learnshare 2016-03-07 14:06:51 +08:00
“作用是让一个 DOM 元素放置在另一 DOM 元素的基础 UI 库” 这句我不懂，我英语不好。
不过 demo 不错。 如果 #me 和 #you 在一起的话，完全可以用 CSS 来实现，就不需要计算位置和尺寸了。 （这个好玩，可以考验定位的功力） |
 |
6
forsigner OP @learnshare 漏字了 囧 应该是：让一个 DOM 元素放置在另一 DOM 元素旁边，就算屏幕滚动，相对位置不会改变
|
|
7
forsigner OP @learnshare 有些场景 CSS 不够用
|
 |
8
breeswish 2016-03-07 14:29:09 +08:00
好评 :-) 我自己造的轮子可以删掉啦
|
|
9
learnshare 2016-03-07 14:31:30 +08:00
@forsigner 是的，#me 和 #you 不在一起的话，都需要动用 JS 。
|
|
10
breeswish 2016-03-07 14:34:01 +08:00
请求加上可用空间检测（例如对于 Dropdown 来说，如果放在下方超过了屏幕则应该放在上方）
|
|
15
breeswish 2016-03-07 20:09:42 +08:00
@forsigner 我觉得可以作为一个函数，传相同的参数，返回的是布尔值而不去调整位置，这样调用者可以选择在调用 init 之前先调用这个函数检测空间是否充足
|
 |
16
w88975 2016-03-07 20:13:21 +08:00
我尝试把"me"的 left 值改了 "you"并没有跟着动
|
 |
17
murmur 2016-03-07 21:29:11 +08:00
突然感觉是不是可以拿来做 2048 玩
|
|
21
breeswish 2016-05-01 11:05:46 +08:00
话说楼主是不是造了个轮子 :-)
https://github.com/HubSpot/tether |
Select Language