BOOtstrap源码分析之 tooltip、popover
一、tooltip(提示框)
源码文件:
Tooltip.js
Tooltip.scss
实现原理:
1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width、height等)
2、计算tooltip的位置,是top、left、bottom、right其中一个
3、然后根据计算的位置值,运算出坐标值
4、给tooltip应用坐标值
源码分析:
1、ownerDocument:文档;包含两个对象:<DocType>、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等交互控件)
BOOtstrap源码分析之 tooltip、popover的更多相关文章
- Bootstrap源码分析系列之整体架构
作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...
- Appium Android Bootstrap源码分析之启动运行
通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...
- Appium Android Bootstrap源码分析之命令解析执行
通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...
- Appium Android Bootstrap源码分析之控件AndroidElement
通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...
- Bootstrap源码分析系列之初始化和依赖项
在上一节中我们介绍了Bootstrap整体架构,本节我们将介绍Bootstrap框架第二部分初始化及依赖项,这部分内容位于源码的第8~885行,打开源码这部分内容似乎也不是很难理解.但是请站在一个开发 ...
- Bootstrap源码分析之dropdown
源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...
- Appium Android Bootstrap源码分析之简介
在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...
- bootstrap源码分析之Carousel
源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分 1. ...
- bootstrap源码分析之tab(选项卡)
实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消2.然后给被单击元素进行高亮3.如果单击元素是下拉框中某个选项,则选中本身, ...
随机推荐
- 通过js获得选择文件的绝对路径
<form name="thisform" method="get" action="test.jsp" id="thisf ...
- android 处理302地址
最近项目中需要用到重定向下载,所以找了很多的方法都不合适.因为下载的链接并非单纯的地址,而是需要多次转发的, 在下载的时候用的是URL来打开数据流.但是多次测试并不能对多次跳转的链接打开请求.对于30 ...
- Example of ApplicationContextAware in Spring--转
原文地址:http://www.concretepage.com/spring/example_applicationcontextaware_spring In spring we can get ...
- js断点调试心得
虽然网上已经有多的数不清的调试教程了,但仍然没有发现哪篇文章写的通俗易懂,索性自己尝试写写自己的一些使用习惯或者说是心得,希望对那些还不是很懂得使用断点调试的孩子有一些帮助(大神请无视~). 1.断点 ...
- Deep learning:五十(Deconvolution Network简单理解)
深度网络结构是由多个单层网络叠加而成的,而常见的单层网络按照编码解码情况可以分为下面3类: 既有encoder部分也有decoder部分:比如常见的RBM系列(由RBM可构成的DBM, DBN等),a ...
- web接口开发与测试
最近一直在学习和整理web开发与接口测试的相关资料.接口测试本身毫无任何难度,甚至有很多工具和类库来帮助我们进行接口测试.大多测试人员很难深入了解web接口测试的原因是对web开发不太了解,当你越了解 ...
- 移植SlidingMenu Android library,和安装example出现的问题解决
很多项目都用到类似左侧滑动菜单的效果,比如facebook,evernote,VLC for android等等,这很酷 源代码可以从GitHub的https://github.com/jfeinst ...
- Theano入门神经网络(四)
这一部分主要介绍用Theano 实现softmax函数. 在多分类任务中经常用到softmax函数,首先上几个投影片解释一下 假设目标输出是y_hat ,激活函数后的Relu y 一个是1.2 一个是 ...
- 为什么是梯度下降?SGD
在机器学习算法中,为了优化损失函数loss function ,我们往往采用梯度下降算法来进行优化.举个例子: 线性SVM的得分函数和损失函数分别为: ...
- Javascript编程风格
Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么.我非常推荐这个演讲,它 ...