怎樣打造一個(gè)DOM元素位置引擎 (一)

碎碎念

這是一篇早就應(yīng)該寫的文章,但是由于過年前項(xiàng)目緊張恶耽,一直沒有時(shí)間密任,這個(gè)周末決定把這筆債換了。這個(gè)項(xiàng)目開始于兩個(gè)月前驳棱,也是花了比較多時(shí)間的一個(gè)項(xiàng)目批什,不像前段時(shí)間寫的 Hexo 主題 fexo ,靈感一現(xiàn)社搅,兩個(gè)晚上就大體出來了驻债。這也是一個(gè)比較有意思的項(xiàng)目,因?yàn)樗皇且粋€(gè)可以直接用的前端UI組件形葬,它是一個(gè)基礎(chǔ)UI類庫合呐,要更好的使用它,你需要再它基礎(chǔ)上去實(shí)現(xiàn)一些可用的前端組件笙以。

這個(gè)DOM元素位置引擎是什么淌实?

說成一個(gè)引擎,實(shí)在有些裝逼猖腕,其實(shí)它就是控制 DOM 元素位置的一個(gè) JavaScript Library拆祈,在前端交互中,怎樣給 DOM 元素定位是一個(gè)經(jīng)常遇到的問題倘感,所以我把可以通用的部分抽象出來放坏,這樣可以更方便的給元素定位。

這個(gè)類庫我給它取名叫做 beside老玛,意思是【在旁邊】淤年,這也是 beside 的核心功能,讓一個(gè)元素放置于另一個(gè)元素旁邊蜡豹。

Beside起源

它起源跟藝術(shù)一樣麸粮,源于生活(裝逼)。其實(shí)他的起源來源于一個(gè)刪除按鈕镜廉,需求來源于我們的交互設(shè)計(jì)師弄诲。開始我們前端做了一個(gè)刪除成員的功能,沒有任何提示桨吊,就直接刪除了威根。交互說這當(dāng)然是不行的,要加個(gè)二次確認(rèn)视乐,前端說可以加個(gè)彈窗嗎?交互說不行敢茁,不要這種大彈窗佑淀,在刪除按鈕旁邊彈個(gè)小卡片就好了,也就是下面的效果:

fo-popover
fo-popover

二次確認(rèn)這個(gè)小功能彰檬,它就是 Beside 的起源伸刃。

Beside 到底是什么谎砾?

一句話: beside 是一個(gè)讓一個(gè) DOM 元素放置在另一 DOM 元素的基礎(chǔ) UI 庫。

Gibhub: beside

Demo: 查看

效果圖:

beside
beside

使用場(chǎng)景

使用 Beside 可以更方便的實(shí)現(xiàn)一些前端組件, 典型的包括: Tooltip捧颅、Popover景图、 Dropdown Menu、垂直居中的 Modal 等碉哑。

Beside 的用法

<script src="bower_components/beside/dist/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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末挚币,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子扣典,更是在濱河造成了極大的恐慌妆毕,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贮尖,死亡現(xiàn)場(chǎng)離奇詭異笛粘,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)湿硝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門薪前,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人关斜,你說我怎么就攤上這事示括。” “怎么了蚤吹?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵例诀,是天一觀的道長。 經(jīng)常有香客問我裁着,道長繁涂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任二驰,我火速辦了婚禮扔罪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘桶雀。我一直安慰自己矿酵,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布矗积。 她就那樣靜靜地躺著全肮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪棘捣。 梳的紋絲不亂的頭發(fā)上辜腺,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼评疗。 笑死测砂,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的百匆。 我是一名探鬼主播砌些,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼加匈!你這毒婦竟也來了存璃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤矩动,失蹤者是張志新(化名)和其女友劉穎有巧,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悲没,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡篮迎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了示姿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甜橱。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖栈戳,靈堂內(nèi)的尸體忽然破棺而出岂傲,到底是詐尸還是另有隱情,我是刑警寧澤子檀,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布镊掖,位于F島的核電站,受9級(jí)特大地震影響褂痰,放射性物質(zhì)發(fā)生泄漏亩进。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一缩歪、第九天 我趴在偏房一處隱蔽的房頂上張望归薛。 院中可真熱鬧,春花似錦匪蝙、人聲如沸主籍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽千元。三九已至,卻和暖如春颤绕,著一層夾襖步出監(jiān)牢的瞬間诅炉,已是汗流浹背蜡歹。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國打工屋厘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涕烧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓汗洒,卻偏偏與公主長得像议纯,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子溢谤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,777評(píng)論 25 707
  • 你成了冰冷的海水冰冷的槍 我是漏水的方舟受傷的羊 你是我詩唱的白牽牛 我是笑納寒風(fēng)倒在夢(mèng)中的墻 曾載我一路幾年長 ...
    Mr_regret閱讀 458評(píng)論 0 1
  • MXnet的學(xué)習(xí)筆記瞻凤,這次主要是使用MXnet提供的example模型進(jìn)行訓(xùn)練時(shí)如何加載數(shù)據(jù)集的介紹。步驟基本上按...
    ToeKnee閱讀 5,324評(píng)論 3 5
  • 前些陣子,我和師門的幾個(gè)同學(xué)一起幫助老師辦一個(gè)國際暑期學(xué)校瞻坝。這是是個(gè)非常復(fù)雜的籌辦過程蛛壳,經(jīng)常需要大家湊在一起討論,...
    Piecyk派大星閱讀 1,626評(píng)論 0 0
  • 就你舒服了所刀,車子房子孩子都有了 而且這么年輕 我們最難熬 一樣沒有頂著這么大壓力在外漂泊 沒有拉衙荐,房子我們還沒建新...
    風(fēng)嘻嘻閱讀 125評(píng)論 0 0