bootstrap插件学习-bootstrap.tooltip.js
先看bootstrap-tooltip.js的结构
var Tooltip = function ( element, options ){} // 构造器 Tooltip.prototype ={} //构造器的原型 $.fn.tooltip = function ( option ) {} //jQuery原型上自定义的方法 $.fn.tooltip.Constructor = Tooltip //重置jQuery原型方法tooltip的构造器名 $.fn.tooltip.defaults ={} // 默认参数
因为tooltip插件的使用比较多，调用者比较杂，源码中没有给出初始化的步骤，在看源码的过程中，我们手动添加初始化。
<p class="muted"> “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。” —— <a rel="tooltip" href="#" data-original-title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">柴静</a> 《看见》专访 <a id="a1" rel="tooltip" href="#" data-original-title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">卡梅隆</a> </p>
$("#a1").tooltip();
在script标签部分加入以上代码，我们可以鼠标移入'卡梅隆'时显示提示框了。
下面开始，进入jQuery原型上的自定义方法tooltip中
/* * jQuery原型上自定义的方法 * */ $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('tooltip') , options = typeof option == 'object' && option if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))//实例化构造器 if (typeof option == 'string') data[option]()//支持传入方法名参数，执行该方法。 }) }
跟之前的几个插件类似，进入构造器中。
/* * 构造器 * */ var Tooltip = function ( element, options ) { this.init('tooltip', element, options)//实例化直接调用原型的init方法 }
进入原型上的init方法
init: function ( type, element, options ) { var eventIn , eventOut this.type = type this.$element = $(element) this.options = this.getOptions(options) this.enabled = true if (this.options.trigger != 'manual') { //选择事件名 eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' //绑定事件 this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))//其中有false，达到阻止冒泡的功能 this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : this.fixTitle()//没有默认参数执行 }
init方法一般执行初始化的步骤，其中的getOptions方法
/* * 添加默认项 * */ , getOptions: function ( options ) { options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) if (options.delay && typeof options.delay == 'number') { options.delay = { show: options.delay , hide: options.delay } } return options }
这里我们看到init方法为点击标签绑定了两种事件mouseenter和mouseleave，它们与mouseover和mouseout的区别：
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
绑定完事件之后，如果是无参数时，我们执行fixTitle方法
/* * 将被点击标签的title属性值转给data-original-title属性，最后删除title属性 * */ , fixTitle: function () { var $e = this.$element if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') } }
为data-original-title属性赋值，为以后将该值加如提示框中做准备。
当鼠标移入时，触发mouseenter事件，进入绑定好的enter方法中
/* * 目的调用show方法 * */ , enter: function ( e ) { /* * 以下方法执行了jQuery原型上的tooltip方法。通过each遍历，获取data对象中的tooltip属性：即该对象的jQuery对象 * 感觉这个写法蛋疼 * */ var self = $(e.currentTarget)[this.type](this._options).data(this.type)//e.currentTarget获取当前点击对象 if (!self.options.delay || !self.options.delay.show) { self.show()//鼠标移上去执行show方法 } else { self.hoverState = 'in' setTimeout(function() { if (self.hoverState == 'in') { self.show() } }, self.options.delay.show) } }
纵观这个方法，其主要目的是为了调用show方法。
/* * 显示提示框 * */ , show: function () { var $tip , inside , pos , actualWidth , actualHeight , placement , tp if (this.hasContent() && this.enabled) { $tip = this.tip()//获取提示框的jQuery对象 this.setContent()//给提示框赋值，初始化提示框的样式 if (this.options.animation) { $tip.addClass('fade')//提示框拥有运动效果，加入fade类 } placement = typeof this.options.placement == 'function' ? this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement//控制提示框的显示方位，默认为top inside = /in/.test(placement)//是否是in $tip .remove() .css({ top: 0, left: 0, display: 'block' }) .appendTo(inside ? this.$element : document.body) /*先将提示框从文档中删除，获取其返回对象，即本身，加入样式，最后再重新插回文档中，这么写主要考虑in的情况 * 符合一种操作规范，如果添加样式，操作dom过于复杂，可以先将节点从dom中取出，经过一系列装饰后，再加入dom中，第一 * 便于浏览器渲染，二来也符合dom操作规范 * */ pos = this.getPosition(inside)//获取被点击对象的位置和本身尺寸 //获取提示框的宽度和高度 actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight //我们拿top举例，在a标签上方，left方向，对着a标签居中。 switch (inside ? placement.split(' ')[1] : placement) { case 'bottom': tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'top': tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'left': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} break case 'right': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} break } $tip .css(tp) .addClass(placement)//配合内部的div实现小三角效果 .addClass('in')//半透明效果 } }
show方法是这个插件的核心方法，与show相关的几个方法，tip()方法，获得提示框模版，setContent()为提示框赋值，hasContent()中调用getTitle()方法获取被点击标签的获取data-original-title属性的值。逻辑不复杂，插件相关的方法调用比较多，耐心点看。
/* * 调用getTitle方法 * */ , hasContent: function () { return this.getTitle() }
/* * 获取data-original-title属性的值 * */ , getTitle: function () { var title , $e = this.$element , o = this.options title = $e.attr('data-original-title') || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) title = (title || '').toString().replace(/(^\s*|\s*$)/, "")//将title中的|去除，并且将|两边的文字合并 return title }
tip方法
/* * 返回提示框模版的jQuery对象 * */ , tip: function () { return this.$tip = this.$tip || $(this.options.template) }
为提示框赋内容
/* * 往提示框中添加title信息，初始化提示框的样式 * */ , setContent: function () { var $tip = this.tip() $tip.find('.tooltip-inner').html(this.getTitle())//添加内容信息 $tip.removeClass('fade in top bottom left right') }
调用getPosition方法，获得对象的位置和尺寸
/* * 获取对象的高度和宽度，和偏移值(left和top) * */ , getPosition: function (inside) { return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { width: this.$element[0].offsetWidth , height: this.$element[0].offsetHeight }) }
offsetWidth和offsetHeight是javascript元素的属性。表示内容高度+内边距+边框，内容宽度+内边距+边框。
对于提示框的显示，默认在被点击标签的上方。相对于被点击标签居中。
当鼠标移开时，触发原型上的leave方法
/* * 调用hide方法 * */ , leave: function ( e ) { /* * 与enter中一样 * */ var self = $(e.currentTarget)[this.type](this._options).data(this.type) if (!self.options.delay || !self.options.delay.hide) { self.hide() } else { self.hoverState = 'out' setTimeout(function() { if (self.hoverState == 'out') { self.hide() } }, self.options.delay.hide) } }
进入核心方法hide
hide: function () { var that = this , $tip = this.tip() $tip.removeClass('in') /* * 定义了提示框消失的特效，要显示这个特效，需要引入其他js，这先不讨论 * */ function removeWithAnimation() { var timeout = setTimeout(function () { $tip.off($.support.transition.end).remove() }, 500) $tip.one($.support.transition.end, function () { clearTimeout(timeout) $tip.remove() }) } $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : $tip.remove()//直接删除提示框 }
我们没有引入相关js时，提示框直接删除了。
有兴趣的朋友可以研究一下bootstrap.tooltip插件对于提示框样式的编写，也挺不错的。最后插件还提供了几个方法，便于我们以后扩展。
/* * 开启提示框功能 * */ , enable: function () { this.enabled = true } /* * 禁用提示框功能 * */ , disable: function () { this.enabled = false } /*开启/禁用切换*/ , toggleEnabled: function () { this.enabled = !this.enabled } /*提示框显示隐藏切换*/ , toggle: function () { this[this.tip().hasClass('in') ? 'hide' : 'show']() } validate: function () { if (!this.$element[0].parentNode) { this.hide() this.$element = null this.options = null } }
使用的时候，直接用jQuery取得一个dom对象点就能点出上述的方法了，很方便。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。
