bootstrap插件学习-bootstrap.popover.js

var Popover = function ( element, options ){} //构造器
Popover.prototype = {} // 构造器的原型
$.fn.popover = function ( option ){} //jQuery原型上的自定义方法
$.fn.popover.Constructor = Popover //重写jQuery原型方法popover的构造器名
$.fn.popover.defaults = {} // 默认参数

<a id="a1" class="btn btn-danger"
data-content="他来自山东，是一名残疾人，因思想独立、指谪政弊而被政府迫害。地方政府和当权政要派专人看管他，
调拨专款作为对他的看管费用，他每天都活在别人的监视和囚禁中，其遭遇只能用令人发指来形容。历尽万难，他终于成功逃离了当地，
在外国使节的帮助和护送下去到了国外。他，就是孙膑。" rel="popover" href="#" data-original-title="他是谁">鼠标经过弹出提示</a>

$("#a1").popover();

/*
* jQuery原型上的自定义方法
* */
$.fn.popover = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('popover')
, options = typeof option == 'object' && option
if (!data) $this.data('popover', (data = new Popover(this, options)))//实例化构造器
if (typeof option == 'string') data[option]() //支持传入方法名参数，执行该方法。
})
}

var Popover = function ( element, options ) {
this.init('popover', element, options) //实例化直接调用原型的init方法
}

Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype,{})

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()//没有默认参数执行
}

/*
* 目的调用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)
}
}

var self = $(e.currentTarget)[this.type](this._options).data(this.type)

var self = this;

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')//半透明效果
}
}

hasContent: function () {
return this.getTitle() || this.getContent()//兼容tooltip插件。
}

getContent: function () {
var content
, $e = this.$element
, o = this.options content = $e.attr('data-content')
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) content = content.toString().replace(/(^\s*|\s*$)/, "") return content
}

/*获取弹出框对象*/
, tip: function() {
if (!this.$tip) {
this.$tip = $(this.options.template)
}
return this.$tip
}

/*
* 给弹出框设置内容
* */
, setContent: function () {
var $tip = this.tip()
, title = this.getTitle()
, content = this.getContent() $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
$tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content) $tip.removeClass('fade top bottom left right in')
}

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: 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()
})
}