文档章节

4.20、Bootstrap V4自学之路-----内容---提示框

Asktao
 Asktao
发布于 2016/03/25 17:17
字数 1713
阅读 144
收藏 0

我预计要歇菜,mark!

概述

在使用提示框插件的时候你需要知道这些:

  • 提示框依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示框起作用。

  • 提示框需要依赖提示冒泡插件

  • 出于性能的原因,提示框是选择性加入的,所以你必须自己初始化它们

  • 标题零长度的提示框不会显示出来。

  • 指定container: 'body'以避免复杂组件(比如说输入框组,按钮组,等等)中的渲染问题。

  • 在隐藏的元素上触发的提示框不会起作用。

  • 如果从一个跨多行的链接上触发提示框,提示框将居中。在<a>上使用white-space:nowrap;可以避免这种情况。

示例:在任何地方启用提示框

在网页上初始化所有的提示框的一个途径是用data-toggle属性选中它们:

$(function () {
   $('[data-toggle="popover"]').popover() 
})

示例:使用container选项

如果你在一个父元素上有一些样式与提示框产生干扰,你可以指定一个自定义的container,这样提示框的HTML将出现在这个元素内部了。

$(function () {
   $('.example-popover').popover({
        container: 'body'   
   }) 
})

静态提示框

歇菜。。。

现场演示

<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
歇菜,出不来呀。。。

四个方向

例子是这个例子,但是我怀疑还是JS引入的不对。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

    在下一次点击时撤回

使用focus触发器,会在用户下一次点击时抹除提示框。

dismiss-on-next-click明确标记

为了适当的跨浏览器和跨平台表现,你必须使用<a>标记。不能是<button>标记,而且<a>还必须包含一个tabindex属性。

$('.popover-dismiss').popover({
   trigger: 'focus' 
})

用法

利用JavaScript启用提示框:

$('#example').popover(options)

选项

可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-后面,比如说写成data-animation=""

$().popover(options) 为一个元素集合初始化提示框。

.popover('show') 显示一个元素的提示框。**在提示框真正显示之前返回给调用者**(也就是,在`shown.bs.popover`事件发生之前)。这被视为提示冒泡的一次“人为”触发。零长度标题零长度内容的提示框不会显示。

$('#element').popover('show')

.popover('hide') 隐藏一个元素的提示框。

**在提示框真正隐藏之前返回给调用者**(也就是,在`hidden.bs.popover`事件发生之前)。这被视为提示框的一次“人为”触发。 Copy

$('#element').popover('hide')

  .popover('toggle') 切换一个元素的提示框。

**在提示框真正显示或隐藏之前返回给调用者**(也就是,在 `shown.bs.popover`或`hidden.bs.popover`事件发生之前)。这被视为提示框的一次“人为”触发。 Copy

$('#element').popover('toggle')

  .popover('destroy') 隐藏并销毁一个元素的提示框。

使用委派的提示框(创建时使用了[`selector`选项](#options))不能在后代触发元素上被单独销毁。 Copy

$('#element').popover('destroy')

事件

名称 类型 默认值 描述
animation boolean true 对提示框应用一个CSS褪色过渡
container string | false false

向一个特定元素追加提示框。示例:container: 'body'。这个选项在某些时候特别有用,比如说它允许你在文档流中在触发元素附近定位提示框--这将防止在窗口调整大小的时候,提示框飘到远离触发元素的位置。

content string | function ''

如果data-content属性不存在,提供默认的content值。

如果提供了一个函数,调用这个函数时,函数的this引用被设置为附加提示框的元素。

delay number | object 0

延迟显示或延迟隐藏提示框(以毫秒计)——它不会应用到人为触发类型。

如果向这个选项提供一个数字,显示和隐藏都会应用这个延迟。

对象结构是delay: { "show": 500, "hide": 100 }                    

html boolean false 向提示框插入HTML。如果值为false,将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话,请使用text。
placement string | function 'right'

如何定位提示框:`top`、 `bottom`、`left`、`right`、`auto`。
如果指定了`auto`,它会动态地调整提示框的位置。举个例子,如果placement是`auto left`,提示框将尽可能地显示在左侧,否则显示在右侧。

如果用一个函数来决定placement,会调用提示框的DOM节点作为第一个参数,然后触发元素的DOM节点是第二个参数。this的上下文设置为提示框的实例。

selector string false 如果提供了一个选择器,提示框将被委派给指定的目标。在实践中,它让动态添加的HTML内容也能附加提示框。看这里一个翔实的例子
template string '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

在创建提示框时使用HTML。

提示框的title将注入到.popover-title里面。

提示框的content将注入到.popover-content里面。

.popover-arrow将变成提示框的箭头

最外层的包裹元素必须拥有.popover类。

title string | function ''

如果title属性不存在,提供默认的title值。

如果提供了一个函数,调用这个函数时,函数的this引用被设置为附加提示框的元素。

trigger string 'click' 如何触发提示框——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器,用空格隔开它们。但是`manual`不能用别的触发器结合使用。
constraints Array 'hover focus' 一个约束数组,传递给Tether。欲知更多请查询Tether的约束文档
offsets string '0 0' 提示框相对于目标的偏移,欲知更多请查询Tether的偏移文档
事件类型 描述
show.bs.popover 当调用show实例方法时,会立即触发该事件。
shown.bs.popover 当提示框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。
hide.bs.popover 当调用hide实例方法时,会立即触发该事件。
hidden.bs.popover 当提示框对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
$('#myPopover').on('hidden.bs.popover', function () {
   // do something… 
})


© 著作权归作者所有

Asktao
粉丝 27
博文 98
码字总数 114189
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
421
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
426
0
4.17、Bootstrap V4自学之路-----组件---模态框

由于HTML5定义了它的语义, HTML 属性在Bootstrap模态框中产生不了影响。为了实现同样的效果,使用一些自定义JavaScript: $('#myModal').on('shown.bs.modal', function () { $('#myInput')......

Asktao
2016/03/25
137
0
4.19、Bootstrap V4自学之路-----内容---提示冒泡

我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果。 mark着,回头再看。先熟悉文档。 概述 在使用提示冒泡插件的时候你需要知道这些: 提示冒泡依赖第三方库Tether实现定位。你必...

Asktao
2016/03/25
191
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
155
1

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部