快捷導(dǎo)航

全面解析Bootstrap中tooltip、popover的使用方法

更新時(shí)間：2016年06月13日 08:35:51 作者：小龍女先生

這篇文章主要為大家詳細(xì)解析了Bootstrap中tooltip、popover的使用方法，了解提示框、彈出框的實(shí)現(xiàn)原理，感興趣的朋友可以參考一下

一、tooltip（提示框）
源碼文件：
Tooltip.js
Tooltip.scss

實(shí)現(xiàn)原理：
1、獲取當(dāng)前要顯示tooltip的元素的定位信息（top、left、bottom、right、width、height等）
2、計(jì)算tooltip的位置，是top、left、bottom、right其中一個(gè)
3、然后根據(jù)計(jì)算的位置值，運(yùn)算出坐標(biāo)值
4、給tooltip應(yīng)用坐標(biāo)值

源碼分析：
1、ownerDocument：文檔；包含兩個(gè)對(duì)象：<DocType>、documentElement（根節(jié)點(diǎn)）
2、$.contains(domA, domB)：判斷domA是否包含domB元素
3、應(yīng)用了offset.setOffset方法，傳入了using參數(shù)，因?yàn)閛ffset設(shè)置值的時(shí)候，不能四舍五入
4、$viewport：顯示tooltipr的容器元素
5、getPosition：此函數(shù)獲取元素定位坐標(biāo)相關(guān)的信息，如：top、left、bottom、right、width、height、scroll等
5.1、共用到了getBoundingClientRect方法，但此方法在IE8-會(huì)插件width、height
5.2、如果是body，width、height會(huì)被重置為window的
5.3、源碼如下：

$element = $element || this.$element //如果沒有傳入?yún)?shù)，則以$element（觸發(fā)tooltip事件的元素）為準(zhǔn)

 var el = $element[0]
 var isBody = el.tagName == 'BODY'

 var elRect = el.getBoundingClientRect()
 if (elRect.width == null) {
 // width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093
 elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
 }
 var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
 var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
 var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null

return $.extend({}, elRect, scroll, outerDims, elOffset)

6、getCalculatedOffset：計(jì)算tooltip的坐標(biāo)值，利用的是width、height折半原理實(shí)現(xiàn)
6.1、bottom時(shí)
    6.1.1、top為定位元素（pos）的top+ 定位元素(pos)的高度
    6.1.2、left為定位元素(pos)的Left – 定位元素(pos)的寬度/2 – tooltip元素寬度/2
6.2、top時(shí)
    6.2.1、top為定位元素(pos) 的top-tooltip元素的高度
    6.2.2、left為定位元素(pos)的left – 定位元素(pos)的寬度/2 – tooltip元素寬度/2
6.3、left時(shí)
    6.3.1、top為定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2
    6.3.2、left為定位元素(pos)的left – tooltip元素的寬度
6.4、right時(shí)
    6.4.1、top為定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip元素高度/2
    6.4.2、left為定位元素(pos)的left + 定位元素(pos)寬度

6.5、小三角的位置，一般情況下元素的50%的位置，但如果出現(xiàn)tooltip被left、top、right、bottom隱藏的時(shí)候，就需要重新計(jì)算和調(diào)整位置了。方法名為：getViewportAdjustedDelta
     6.5.1、首先計(jì)算出被overflow的寬度、或者高度
     6.5.2、然后計(jì)算出arrowDelta的值，隱藏值 * 2 –tooltip寬度 + tooltip寬度
     6.5.3、設(shè)置三角的top或left百分比的值

二、Popover（彈出框）
源碼文件：
Popover.js
Popover.scss

實(shí)現(xiàn)原理：
1、繼承tooltip實(shí)現(xiàn)的
2、多了一個(gè)標(biāo)題，還可以自定義content（里面可以插入input、button等交互控件）

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: