方法

下面是一些弹出框（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. yum 缓存包到本地

    yum install –downloadonly –downloaddir=/root/mypackages/ vim 说明: --downloadonly 只下载 --downloaddir 下载 ...

  2. php模拟post提交数据

    $data = '{ "id": "17999030", "method": "sayHello", "jso ...

  3. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  4. Ubuntu下rsyslog集中收集mysql审计日志

    服务端 1.安装最新版本rsyslog sudo apt-get install software-properties-common python-software-properties sudo ...

  5. oracle(三)

    /****************************表空间 start****************************/ --表空间的作用 /** 1.决定数据库实体的空间分配 2.设置 ...

  6. jquery——事件

    绑定事件的其他方法 以及 取消绑定 事件:: <!DOCTYPE html><html lang="en"><head> <meta ch ...

  7. （转）/etc/sysctl.conf 调优 & 优化Linux内核参数

    /etc/sysctl.conf 调优 & 优化Linux内核参数 from: http://apps.hi.baidu.com/share/detail/15652067 http://ke ...

  8. java简单使用netty

    一 整合 由于本人的学过的技术太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spri ...

  9. jQuery 结构的实现思路

    前提: 使用 JS 创建对象的最优办法,是 原型模式.   step1: 原型模式的基础使用方式     function fn(){}     fn.prototype = {}       var ...

  10. ASP.NET MVC CheckBoxFor为什么会生成hidden input控件

    自己开发的公众号,可以领取淘宝内部优惠券 @Html.CheckBoxFor(m => m.Bool) 使用CheckBoxFor方法得到的html代码会是下面这个样子 <input ch ...