bootstrap之popover
2024-04-23 08:01:28
一、前言
这节介绍下popover(弹出框)模块的源码实现。
二、源码
1、popovers.less
//// Popovers(弹出框)// --------------------------------------------------.popover {position: absolute;top: 0;left: 0;z-index: @zindex-popover;display: none;max-width: @popover-max-width;padding: 1px;// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.// So reset our font and text properties to avoid inheriting weird values..reset-text();font-size: @font-size-base;background-color: @popover-bg;background-clip: padding-box;border: 1px solid @popover-fallback-border-color;border: 1px solid @popover-border-color;border-radius: @border-radius-large;.box-shadow(0 5px 10px rgba(0,0,0,.2));// Offset the popover to account for the popover arrow&.top { margin-top: -@popover-arrow-width; }&.right { margin-left: @popover-arrow-width; }&.bottom { margin-top: @popover-arrow-width; }&.left { margin-left: -@popover-arrow-width; }}.popover-title {margin: 0; // reset heading marginpadding: 8px 14px;font-size: @font-size-base;background-color: @popover-title-bg;border-bottom: 1px solid darken(@popover-title-bg, 5%);border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;}.popover-content {padding: 9px 14px;}// Arrows//// .arrow is outer, .arrow:after is inner.popover > .arrow {&,&:after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;}}.popover > .arrow {border-width: @popover-arrow-outer-width;}.popover > .arrow:after {border-width: @popover-arrow-width;content: "";}.popover {&.top > .arrow {left: 50%;margin-left: -@popover-arrow-outer-width;border-bottom-width: 0;border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallbackborder-top-color: @popover-arrow-outer-color;bottom: -@popover-arrow-outer-width;&:after {content: " ";bottom: 1px;margin-left: -@popover-arrow-width;border-bottom-width: 0;border-top-color: @popover-arrow-color;}}&.right > .arrow {top: 50%;left: -@popover-arrow-outer-width;margin-top: -@popover-arrow-outer-width;border-left-width: 0;border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallbackborder-right-color: @popover-arrow-outer-color;&:after {content: " ";left: 1px;bottom: -@popover-arrow-width;border-left-width: 0;border-right-color: @popover-arrow-color;}}&.bottom > .arrow {left: 50%;margin-left: -@popover-arrow-outer-width;border-top-width: 0;border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallbackborder-bottom-color: @popover-arrow-outer-color;top: -@popover-arrow-outer-width;&:after {content: " ";top: 1px;margin-left: -@popover-arrow-width;border-top-width: 0;border-bottom-color: @popover-arrow-color;}}&.left > .arrow {top: 50%;right: -@popover-arrow-outer-width;margin-top: -@popover-arrow-outer-width;border-right-width: 0;border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallbackborder-left-color: @popover-arrow-outer-color;&:after {content: " ";right: 1px;border-right-width: 0;border-left-color: @popover-arrow-color;bottom: -@popover-arrow-width;}}}2、popover.js
/* ========================================================================* 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, {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 = PopoverPopover.prototype.getDefaults = function () {return Popover.DEFAULTS}Popover.prototype.setContent = function () {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 eventsthis.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.$elementvar o = this.optionsreturn $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' && optionif (!data && /destroy|hide/.test(option)) returnif (!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 = oldreturn this}}(jQuery);三、应用 & 源码分析
1、应用
<button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover"data-original-title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容">猛击我吧</button><a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover"title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容">猛击我吧</a>// 不能直接通过自定义属性data-来触发，需依赖于JavaScript<script type="text/javascript">$(function () {$('[data-toggle="popover"]').popover();});</script>2、源码分析
2.1、popovers.less
1、弹出框 popover 模板与 tooltip 不同，不仅有标题，还可以设置内容
2.2、popover.js
1、popover 继承了 tooltip 的原型，只不过覆盖了部分布局方法
2、提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
bootstrap之popover相关推荐
- BootStrap笔记-popover的使用（popover中放验证码，点击更新）
做出来的效果是这样的. 当鼠标点击验证码的Input框时. 点击里面的img可以进行刷新 对应的代码如下: <link href="css/bootstrap.min.css" ...
- bootstrap之popover插件使用
bootstrap可以说是后台管理前端的一个很不错的框架,应用也特别广泛,但笔者认为bootstrap的一些开发文档却不是很足,有时查个东西得找半天. 一般情况下,开源软件的官网是资料最全主要是准确的 ...
- bootstrap的popover呈现table
效果如下图: 原生的popover只支持 静态内容,此示例中的table是动态渲染的,需要对部分源码稍作调试. POPOVER插件调整如下: +function ($) {"use stri ...
- php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
- 学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式 注意事项 弹出方向 失去焦点隐藏 禁用元素弹出提示框 data属性详解 js方法与事件 方法: 事件: 注意事项 popover提示框组件依赖 ...
- bootstrap的tooltip
bootstrap官方自带有tooltip插件,用起来挺好看的,也不用去找其他的了,看看其效果来: 就是这样的效果:当鼠标悬停在小图标上时,出现对该项的解释,我还是用JavaScript的方式实现.整 ...
- jquery 定义html模板,jquery – 使自定义html模板使自举popover工作
我正在使用输入组文本框,我需要Bootstrap 3 popover才能正常工作,而Popover模板应该由我设计和设计. 所以我目前与我的html是: 当输入组图标点击时,我想要一个popover打 ...
- 如何点击按钮弹出弹框显示几秒_layer消息框显示在鼠标旁边
layer因为操作简单,界面美观,是开发消息弹窗的不二选择.一般我们都会让消息框采用浮动效果显示在屏幕正中间,但是如果我们的需求是弹框显示在鼠标点击位置的左下角,而且是随滚动条移动的,就像bootst ...
- 【Yeoman】热部署web前端开发环境
本文来自 "简时空":<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利 ...
最新文章
- 【翻译】将Ext JS Grid转换为Excel表格
- WordPress标签
- 指定wsus服务器,步骤 2：在服务器上安装 WSUS
- 打印对象和toString方法
- java内存模型浅析_浅析java内存模型
- 服务器打开虚拟机电源重启,虚拟机服务器自动重启
- c#操作html dom元素,C#获取与修改HTML DOM元素信息
- java中注解的使用与实例(一)
- android edittext 正则限制,Android EditText 使用正则表达式进行输入过滤
- 石锤！今年Python要过苦日子了？ 程序员：我疯了！
- Java高级语法笔记-反射机制(Reflection) (1)
- ETL数据清洗的案例
- 俄罗斯方块代码 java_俄罗斯方块java代码-java编写俄罗斯方块代码详解分享
- 童年修复系列-SNES芯片组介绍及FPGA实现
- 再说setlocale——关于区域名称
- windows图片和传真查看器的调出
- 一个简单的敌人自动寻找玩家进行攻击及受到伤害死亡效果实现
- 接口调用正常却返回404
- GRA灰色关联度分析学习 附python代码
- mysql更新多字段sql_sql的update语句 批量更新某字段