方法

下面是一些弹出框（Popover）插件中有用的方法：

方法 描述 实例
Options: .popover(options) 向元素集合附加弹出框句柄。 
$().popover(options)
Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。 
$('#element').popover('toggle')
Show: .popover('show') 显示元素的弹出框。 
$('#element').popover('show')
Hide: .popover('hide') 隐藏元素的弹出框。 
$('#element').popover('hide')
Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。 
$('#element').popover('destroy')

实例

下面的实例演示了弹出框（Popover）插件的方法：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：popover插件中的方法</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding: 100px 220px 50px">
<button type="button"class="btn btn-success popover-show"data-toggle="popover"data-container="body"data-content="左则的popover中的一些内容"title="popover title"data-placement="left">左则的popover</button>
<button type="button" class="btn btn-primary popover-hide" data-toggle="popover" data-container="body" data-content="顶部的popover中的一些内容" title="popover title" data-placement="top">顶部的popover</button>
<button type="button" class="btn btn-info popover-toggle" data-toggle="popover" data-container="body" data-content="右则的popover中的一些内容" title="popover title" data-placement="right">右则的popover</button>
<button type="button" class="btn btn-warning popover-destroy" data-toggle="popover" data-container="body" data-content="底部的popover中的一些内容" title="popover title" data-placement="left">底部的popover</button>
</div>
<script>
$(document).ready(function () {
$(".popover-show").popover("show");
$(".popover-hide").popover("hide");
$(".popover-toggle").popover("toggle");
$(".popover-destroy").popover("destroy");
})
</script>
</body>
</html>

Bootstrap历练实例：popover插件中的方法的更多相关文章

  1. Bootstrap历练实例：导航中的表单

    Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...

  2. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  3. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  4. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  7. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  8. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  9. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

随机推荐

  1. 自动化运维工具之Cobbler

    一.anaconda anaconda负责安装系统向导,默认为GUI界面,如果我们使用ks自动应答安装的话建议使用TUI界面来安装 在安装启动界面我们可以按esc键来自己手动指定安装启动选项 anac ...

  2. 用POST方法上传文件

    文件上传分为客户端和服务器端 客户端可以通过form表单进行上传 客户端使用html表单进行上传 enctype = "multipart/form-data"用来指定表单编码数据 ...

  3. VS文档自动生成

    VS2008文档自动生成 (发现,Sandcastle主要是用于C#项目.里面的注释都是XML格式的.不太适合VC的.最终还是得用Doxygen) 一.Sandcastle简介: Sandcastle ...

  4. Windows应用程序未响应

    昨天在安装postgresql的扩展功能postgis的时候,stackbuilder刚打开就死掉,一直未响应,刚开始以为是内存的原因,后来发现并没有占用太多内存,最后打开vpn发现就可以了,原来是网 ...

  5. 【hihocoder】1237 : Farthest Point 微软2016校招在线笔试题

    题目:给定一个圆,要你求出一个在里面或者在边上的整数点,使得这个点到原点的距离最大,如果有多个相同,输出x最大,再输出y最大. 思路:对于一个圆,里面整点个数的x是能确定的.你找到x的上下界就可以了. ...

  6. UnityError 打包到Android错误解决

  7. 《从0到1学习Flink》—— Flink 项目如何运行？

    前言 之前写了不少 Flink 文章了,也有不少 demo,但是文章写的时候都是在本地直接运行 Main 类的 main 方法,其实 Flink 是支持在 UI 上上传 Flink Job 的 jar ...

  8. jquery选择器大全参考

    在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...

  9. mysq表的三种关系,数据的增删改以及单表多表查询

    一丶三种关系 分析步骤: #.先站在左表的角度去找 是否左表的多条记录可以对应右表的一条记录,如果是,则证明左表的一个字段foreign key 右表一个字段(通常是id) #.再站在右表的角度去找 ...

  10. js对jsonArray的操作

    上一篇写了关于java中Gson对jsonArray的排序处理,这里介绍js中对jsonArray处理, <!DOCTYPE html> <html> <head> ...