BOOtstrap源码分析之 tooltip、popover

WBOY
发布: 2016-06-16 08:39:32
原创
1045 人浏览过

一、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 || <span style="color: #0000ff">this</span>.$element <span style="color: #008000">//</span><span style="color: #008000">如果没有传入参数,则以$element(触发tooltip事件的元素)为准</span>

    <span style="color: #0000ff">var</span> el     = $element[0<span style="color: #000000">]
    </span><span style="color: #0000ff">var</span> isBody = el.tagName == 'BODY'

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

<span style="color: #0000ff">return</span> $.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)宽度
BOOtstrap源码分析之 tooltip、popover

   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等交互控件)

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!