Bootstrap popover源码分析
/* ========================================================================
* Bootstrap: popover.js v3.3.7
* http://getbootstrap.com/javascript/#popovers
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */ +function ($) {
'use strict'; // POPOVER PUBLIC CLASS DEFINITION
// =============================== var Popover = function (element, options) {
this.init('popover', element, options)
} if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js') Popover.VERSION = '3.3.7' Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {//把默认trigger条件改为click,默认模板也改成现在需要的。
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}) // NOTE: POPOVER EXTENDS tooltip.js
// ================================ Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)//把原型里的方法都继承过来, Popover.prototype.constructor = Popover Popover.prototype.getDefaults = function () {//因为继承的tootle里面还是原来的,现在改成Popover.DEFAULTS
return Popover.DEFAULTS
} Popover.prototype.setContent = function () {//这个是把模板填充数据的方法,当然需要修改成Popover独有的
var $tip = this.tip()
var title = this.getTitle()
var content = this.getContent() $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content').children().detach().end()[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content) $tip.removeClass('fade top bottom left right in') // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
} Popover.prototype.hasContent = function () {//一句话,把你的换成我的
return this.getTitle() || this.getContent()
} Popover.prototype.getContent = function () {
var $e = this.$element
var o = this.options return $e.attr('data-content')
|| (typeof o.content == 'function' ?
o.content.call($e[0]) :
o.content)
} Popover.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
} // POPOVER PLUGIN DEFINITION
// ========================= function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
} var old = $.fn.popover $.fn.popover = Plugin
$.fn.popover.Constructor = Popover // POPOVER NO CONFLICT
// =================== $.fn.popover.noConflict = function () {
$.fn.popover = old
return this
} }(jQuery);
Bootstrap popover源码分析的更多相关文章
- Bootstrap Tooltip源码分析
/* ======================================================================== * Bootstrap: tooltip.js ...
- Bootstrap Dropdown 源码分析
/* ======================================================================== * Bootstrap: dropdown.js ...
- Bootstrap button源码分析
/* ======================================================================== * Bootstrap: button.js v ...
- Bootstrap tabs 源码分析
前言: 阅读建议:去github下载一个完整dom然后把,本篇代码复制进去然后运行就好了以地址 tab组件是非常简单的一种组件,因为这是一个系列,所以就顺便看了,其实它写的这个还算不错的,很有条例,也 ...
- BOOtstrap源码分析之 tooltip、popover
一.tooltip(提示框) 源码文件: Tooltip.jsTooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.wid ...
- Bootstrap源码分析之dropdown
源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...
- Appium Server源码分析之作为Bootstrap客户端
Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...
- Appium Android Bootstrap源码分析之启动运行
通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...
- Appium Android Bootstrap源码分析之命令解析执行
通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...
随机推荐
- for in,Object.keys()与for of的用法与区别
Array.prototype.sayLength=function(){ console.log(this.length); } let arr = ['a','b','c','d']; arr.n ...
- java IO流 内容整理
在java中,对数据的输入和输出操作以流的方式进行.(注:对文件的操作用io.File类,但不能对文件中的内容进行操作) 一.IO流的分类: 按数据流的方向不同,可以分为输入流和输出流: 按处理数据的 ...
- cookie、localStorage和sessionStorage三者的异同
1.三者都是用来存储浏览器数据的 2.生命周期:cookie可以设置数据失效时间,默认是关闭浏览器后失效:localStorage中的数据是永久保存的,除非手动清除:sessionStorage的数据 ...
- Java基础学习总结(89)——为什么单元测试应该我们开发人员来写
软件测试是为了保证项目质量,单元测试可以快速执行测试回归测试,做好单元测试可以大大提升测试效率,项目开发真正达到敏捷效果. 单元测试做什么? 1. 核心类方法 2. 异常处理 3. 边界值测试 4. ...
- 1001. A+B Format (20) (%0nd)
1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Calculate ...
- boot简介
目录 1:bootloader介绍2:如何启动一个机器3:工具 Bootloader介绍 MTK的bootloader 主要分为Pre-loader, LK. Pre-loader: 初始化PLL,U ...
- [NOIP2007] 提高组 洛谷P1098 字符串的展开
题目描述 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母获数 ...
- codeforces Gym 100735 D、E、G、H、I
http://codeforces.com/gym/100735 D题 直接暴力枚举 感觉这道题数据有点问题 为什么要先排下序才能过?不懂.. #include <stdio.h> #in ...
- n个点中求任意两点组成斜率的最大值
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1100 首先按x坐标排序,然后相邻的三个点A,B,C 组成的三条直线必然有 ...
- Extjs6(六)——增删查改之查询
本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...