您的位置：首页 > Web前端 > BootStrap

bootstrap源码学习与示例：bootstrap-popover

2012-12-24 18:09 309 查看
bootstrap-popover是bootstrap-toolbar的子类。它就比toolbar多一个content参数，其他就是一些默认值不同。与toolbar一样没有自定义事件。

名称类型默认描述
animation布尔值true为弹出提示添加一个淡入的过渡。
placement字符串或函数'right'弹出提示的位置：top | bottom | left | right。
selector字符串false如果提供了selector，将对符合条件的某个或多个元素启用工具提示。
trigger字符串'hover'弹出提示的触发方式：鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
title字符串或函数''如果元素没有指定'title'属性，就使用该值做为默认的标题。
content字符串或函数''如果元素没有指定'data-content'属性，就使用该值做为默认的内容。
delay数字或对象0显示和隐藏时的延迟时间(以毫秒计)

如果提供的是一个数字，延迟就会同时被应用到显示和隐藏。

如果是一个对象，其结构就是: 
delay: { show: 500, hide: 100 }


不过最近2.2.3有点奇怪，它默认的触发事件是点击。

由于是子类，因此引入JS，至少引入四个JS文件：jquery库，bootstrap-transition.js，bootstrap-tooltip.js与bootstrap-popover.js

!function ($) {

"use strict"; // jshint ;_;

/* POPOVER PUBLIC CLASS DEFINITION
* =============================== */

var Popover = function (element, options) {
this.init('popover', element, options)
}

/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
========================================== */

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

constructor: Popover

,
setContent: function () {
var $tip = this.tip()//取得模板
, title = this.getTitle()//取得标题
, content = this.getContent()//取得正文

$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
//移除原先的所有位置与特效的类名
$tip.removeClass('fade top bottom left right in')
}

,
hasContent: function () {
return this.getTitle() || this.getContent()
}

,
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)

return content
}

,
tip: function () {
if (!this.$tip) {
this.$tip = $(this.options.template)
}
return this.$tip
}

,
destroy: function () {
this.hide().$element.off('.' + this.type).removeData(this.type)
}

})

/* POPOVER PLUGIN DEFINITION
* ======================= */

var old = $.fn.popover

$.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]()
})
}

$.fn.popover.Constructor = Popover

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'right'
,
trigger: 'hover'
,
content: ''//模板结构比tooltip复杂一点，用于放置更多的内容
,
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
})

/* POPOVER NO CONFLICT
* =================== */

$.fn.popover.noConflict = function () {
$.fn.popover = old
return this
}

}(window.jQuery);


<!DOCTYPE html>
<html>
<head>
<title>bootstrap学习 by 司徒正美</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/>
<script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-tooltip.js"></script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-popover.js"></script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script>
<script >
$(function () {
var log = function(s){
window.console && console.log(s)
}
$('.well a').popover()
})
</script>
<script>

</script>
</head>
<body>
<br/>
<br/>
<h3>by 司徒正美</h3>
<br/>

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

运行代码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航