视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
BOOtstrap源码分析之tooltip、popover
2020-11-27 16:41:00 责编:小采
文档

一、tooltip(提示框)

源码文件:

Tooltip.js
Tooltip.scss

实现原理:

1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width、height等)
2、计算tooltip的位置,是top、left、bottom、right其中一个
3、然后根据计算的位置值,运算出坐标值
4、给tooltip应用坐标值

源码分析:

1、ownerDocument:文档;包含两个对象:、documentElement(根节点)
2、$.contains(domA, domB):判断domA是否包含domB元素
3、应用了offset.setOffset方法,传入了using参数,因为offset设置值的时候,不能四舍五入
4、$viewport:显示tooltipr的容器元素
5、getPosition:此函数获取元素定位坐标相关的信息,如:top、left、bottom、right、width、height、scroll等
5.1、共用到了getBoundingClientRect方法,但此方法在IE8-会插件width、height
5.2、如果是body,width、height会被重置为window的
5.3、源码如下:

$element = $element || this.$element //如果没有传入参数,则以$element(触发tooltip事件的元素)为准

 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:计算tooltip的坐标值,利用的是width、height折半原理实现
6.1、bottom时
6.1.1、top为定位元素(pos)的top+ 定位元素(pos)的高度
6.1.2、left为定位元素(pos)的Left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2
6.2、top时
6.2.1、top为定位元素(pos) 的top-tooltip元素的高度
6.2.2、left为定位元素(pos)的left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2
6.3、left时
6.3.1、top为定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2
6.3.2、left为定位元素(pos)的left – tooltip元素的宽度
6.4、right时
6.4.1、top为定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip元素高度/2
6.4.2、left为定位元素(pos)的left + 定位元素(pos)宽度

6.5、小三角的位置,一般情况下元素的50%的位置,但如果出现tooltip被left、top、right、bottom隐藏的时候,就需要重新计算和调整位置了。方法名为:getViewportAdjustedDelta
6.5.1、首先计算出被overflow的宽度、或者高度
6.5.2、然后计算出arrowDelta的值,隐藏值 * 2 –tooltip宽度 + tooltip宽度
6.5.3、设置三角的top或left百分比的值

Popover(弹出框)

源码文件:

Popover.js
Popover.scss

实现原理

1、继承tooltip实现的
2、多了一个标题,还可以自定义content(里面可以插入input、button等交互控件)

下载本文
显示全文
专题