Bootstrap历练实例：popover插件中的方法

时间：2022-05-03 00:15:29

方法

下面是一些弹出框（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 历练实例-轮播&lpar;carousel&rpar;插件方法

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

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

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

  4. Bootstrap历练实例：警告框&lpar;Alert&rpar;插件的方法

    <!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 历练实例-轮播&lpar;carousel&rpar;插件的事件

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

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

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

  8. Bootstrap历练实例：弹出框&lpar;popover&rpar;事件

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

  9. Bootstrap历练实例：警告框&lpar;Alert&rpar;插件事件

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

随机推荐

  1. ThinkPHP 3&period;2 获取页面运行时间

    在ThinkPHP中,可以通过在config.php中配置'SHOW_PAGE_TRACE' =>true,打开页面调试,实现页面载入时间的显示.但显示在页面右下角TP的LOGO显然不能适用于我 ...

  2. apache一个IP多个站点的配置方法

    在日常的网站发布中很多情况下都无法做到一个IP对应一个站点,在IP4的情况下IP的资源是相对有限的.然而作为最流行的Apache自然也考虑到这种情况,那么接下来看看apache服务器怎么配置一个IP多 ...

  3. boost库在windows下的编译和使用

    因为跨平台的原因,现在要使用到boost库,boost库非常大,现在处于摸索阶段. 首先来说boost库在window下的安装和使用. 一.下载 首先从boost官方主页http://www.boos ...

  4. MVC3&period;0 中Razor 学习

    随着MVC3.0RTM版本的发布,最近将公司的项目从MVC2.0升级到MVC3.0.同时打算在MVC3中全面使用Razor模板引擎.现将Razor学习拿出来和大家分享,如果存在不足的地方欢迎您指出. ...

  5. maven 常用命令及操作（转）

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1. 创建Maven的普通 ...

  6. B桥接模式ridge

    1.一个简短的引论 1)模式概述:将抽象部分与实现部分分离.使它们都能够独立的变化.让抽象类和派生类各自实现自己的对象.当一个系统有多维度的变化时,将各个维度分离出来让它们独立于变化(多角度地分类实现 ...

  7. firefox 对WebRTC支持

    本文原创自 http://blog.csdn.net/voipmaker  转载注明出处. firefox pc和android 最新版本号已经默认支持webrtc, 同一时候,firefox在支持V ...

  8. BZOJ 1085&colon; &lbrack;SCOI2005&rsqb;骑士精神&lpar;A&ast;算法&rpar;

    第一次写A*算法（这就是A*？如果这就是A*的话，那不就只是搜索的一个优化了= =，不过h函数如果弄难一点真的有些难设计） 其实就是判断t+h（x）（t为当前步数，h（x）为达到当前状态的最小步数） ...

  9. YiShop&lowbar;如何选择B2C商城开发商

    说到B2C商城开发,现在网上搜索能搜出来一大堆开发公司的信息出来.面对如果巨大的信息用户应该如果去评估和判断哪家更适合自己呢!其实开发B2C商城不仅体现在一家开发公司本身的具体实力,还体现在对每一个商 ...

  10. sqlserver中压缩日志文件

    最近在转移数据,sqlserver的日志文件ldf,占用空间特别大,为了还原库,节省空间,所以压缩日志文件迫在眉睫.在网上找了一段代码: USE [master] GO ALTER DATABASE ...

相关文章