bootstrap之popover插件使用
bootstrap可以说是后台管理前端的一个很不错的框架,应用也特别广泛,但笔者认为bootstrap的一些开发文档却不是很足,有时查个东西得找半天。
一般情况下,开源软件的官网是资料最全主要是准确的地方,下面直接进入bootstrap的主页:
要看popover插件的js代码就需要进入JavaScript页面查找,下面是popover的一段内容:
$('#example').popover(options)
配置参数:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-animation=""
.
Name | Type | Default | Description |
---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the popover |
container | string | false | false |
Appends the popover to a specific element. Example: |
content | string | function | '' |
Default content value if If a function is given, it will be called with its |
delay | number | object | 0 |
Delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
html | boolean | false |
Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
|
placement | string | function | 'right' |
How to position the popover - top | bottom | left | right | auto. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The |
selector | string | false | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. |
template | string |
'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
Base HTML to use when creating the popover. The popover's The popover's
The outermost wrapper element should have the |
title | string | function | '' |
Default title value if If a function is given, it will be called with its |
trigger | string | 'click' |
How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
|
viewport | string | object | function | { selector: 'body', padding: 0 } |
Keeps the popover within the bounds of this element. Example: If a function is given, it is called with the triggering element DOM node as its only argument. The |
Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Methods
$().popover(options)
Initializes popovers for an element collection.
.popover('show')
Reveals an element's popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover
event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
$('#element').popover('show')
.popover('hide')
Hides an element's popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover
event occurs). This is considered a "manual" triggering of the popover.
$('#element').popover('hide')
.popover('toggle')
Toggles an element's popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover
or hidden.bs.popover
event occurs). This is considered a "manual" triggering of the popover.
$('#element').popover('toggle')
.popover('destroy')
Hides and destroys an element's popover. Popovers that use delegation (which are created using the selector
option) cannot be individually destroyed on descendant trigger elements.
$('#element').popover('destroy')
Events
Event Type | Description |
---|---|
show.bs.popover |
This event fires immediately when the show instance method is called.
|
shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.popover |
This event is fired immediately when the hide instance method has been called.
|
hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.popover |
This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
|
$('#myPopover').on('hidden.bs.popover', function () {// do something…
})
下面给出笔者的应用场景:
popover弹出内容为html,而不是普通文本,但是这样要确保html内容不含有xss攻击代码
<div class="formula-hint" title="提示"
data-container="body" data-toggle="popover" data-placement="top"
data-content="<div>xxxxx</div><div>xxxxx</div>">
</div>
$("#element").popover({
placement:"top",
html:true
});
$("#element").popover("show");
这样就可以在popover显示html内容,比普通文本显示更丰富些
bootstrap之popover插件使用相关推荐
- 玩转Bootstrap(JS插件篇)
模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js ...
- ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件
杂记 插件之间的依赖关系 某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系.注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所 ...
- bootstrap的popover呈现table
效果如下图: 原生的popover只支持 静态内容,此示例中的table是动态渲染的,需要对部分源码稍作调试. POPOVER插件调整如下: +function ($) {"use stri ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
- 第二百四十八节,Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap 警告框插件Alert 的事件
事件 Bootstrap警告框插件Alert有两个事件,一个是close,一个是closed,它们的含义见表 5‑6. 表 5‑6 警告框的事件及含义 事件 含义 close 调用close方法时,立 ...
- Bootstrap 警告框插件Alert
警告框 Bootstrap警告框插件Alert需要 bootstrap-alert.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-alert.js 文件. 使用方法 ...
- Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
最新文章
- ICLR2020放榜 34篇满分论文! 48篇orals,108篇spotlights,531篇poster
- 在maven项目中使用Junit进行单元测试(一)
- zbg是什么意思_zbg的含义,zbg是什么的缩写,zbg的词语,zbg代表的意思
- ORACLE11G RAC增加节点操作
- EC+VO+SCOPE for ES3
- Java中的安全加密
- 04.卷积神经网络 W4.特殊应用:人脸识别和神经风格转换
- 10.java之父被B站学习者下载达7000万次的Java视频教程你还没有看过知乎
- 实现一个react系列一:JSX和虚拟DOM
- XML揭秘 入门 应用 精通pdf
- IOS:APP三种状态下收到推送后的跳转操作
- 浏览器怎么导入导出|删除书签,方法步骤来咯
- 【网络安全】实操XSS订单系统漏洞(利用盲打)
- Python 网络编程入门——用 Socket 做一个风花雪月服务器
- git is outside repository
- 二次开发手册——百家CMS微商城说明文档(5)
- 计算机设备系统包括哪些,计算机硬件系统包括哪些
- VMware View Client 连接服务器,提示身份验证失败,连接服务器时
- TCP 协议面试灵魂 12 问(二)
- 别样肉客首次针对中国市场独家研发创新植物性猪肉糜产品