Bootstrap教程JS插件弹出框学习笔记分享


Posted in Javascript onMay 17, 2016

本文主要来学习一下JavaScript插件--弹出框。

案例

为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息。

先来看几个简单的静态案例效果图

Bootstrap教程JS插件弹出框学习笔记分享

效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容。

<div class="bs-example bs-example-popover">

<div class="popover top">

<div class="arrow">

</div>

<h3 class="popover-title">Popover top</h3>

<div class="popover-content">

<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

</div>

<div class="popover right">

<div class="arrow">

</div>

<h3 class="popover-title">Popover right</h3>

<div class="popover-content">

<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

</div>

<div class="popover bottom">

<div class="arrow">

</div>

<h3 class="popover-title">Popover bottom</h3>

<div class="popover-content">

<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

</div>

<div class="popover left">

<div class="arrow">

</div>

<h3 class="popover-title">Popover left</h3>

<div class="popover-content">

<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

</div>

<div class="clearfix">

</div>

</div>

但是我们还是需要给元素设置简单的基本布局

<style type="text/css">

.bs-example-popover .popover {

position: relative; display: block; float: left; width: 240px; margin: 20px;

}

</style>

动态演示

先来看效果图

Bootstrap教程JS插件弹出框学习笔记分享

一个按钮,点击按钮的时候就会弹出右侧的小窗体。

看代码,其实也很简单。

[code]<a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="即对拥有矮、胖、穷、丑、矬、呆、撸等属性特征的各种雷人行径及想法表示轻蔑。?潘浚ɑ蛐醋鳌暗跛俊保┛梢运凳怯陕钊嘶啊?潘馈薄ⅰ暗跛馈薄ⅰ暗鹚馈毖荼涠?础!?潘磕小敝饕?侵复蠖喑錾砬迤吨?遥?缦绱寤蛐矶喑鞘械撞阈∈忻窦彝ィ?挥懈?嗟谋尘埃?矶喑踔屑赐QВ??俏窆ぃ?虺闪瞬吞??裨保?虺闪送?赏?埽?诔鞘械母还笾?蟹值靡槐?喔?换蚴钦?小⑽抟涤蚊瘢?墒峭ǔS植豢铣腥希?鋈艘话阕猿莆?杂芍耙嫡摺? title="" href="#" data-original-title="?潘勘疽?> Please Click to toggle popover </a>[code]

就一个a标签,但是赋予了按钮的样式类,然后给与几个属性,主要用于展示弹出框的:

第一个:data-original-title ——标题

第二个:data-content——内容

第三个:data-placement——位置(上下左右top、bottom、left、right)

不过现在如果你来运行,按钮是有了,你点击按钮弹出框被不会出现,原来很简单,就是我们还没有给它初始化,就像上一节中的tooltip一样的。

只需要添加简单的JavaScript代码就可以了。

<script type="text/javascript">

$("#a1").popover();

</script>

四个方向

Bootstrap教程JS插件弹出框学习笔记分享

<div style="margin-left:200px;margin-top:100px;margin-bottom:200px;" class="bs-example tooltip-demo">

<div class="bs-example-tooltips">

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 左侧弹框 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 上方弹框 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 下方弹框 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 右侧弹框 </button>

</div>

</div>

然后用JavaScript来激活

<script type="text/javascript">

$("#a1").popover();

$("[data-toggle=popover]").popover();

</script>

选择性加入的功能

出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们。

弹出框在按钮组和输入框组中使用时,需要额外的设置

当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。

在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来

为了给disabled 或.disabled元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个<div>中,然后对这个<div>元素应用弹出框。

用法
通过JavaScript启用弹出框:

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

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-animation=""。

Bootstrap教程JS插件弹出框学习笔记分享

方法

$().popover(options)

为一组元素初始化弹出框。

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

显示弹出框。

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

隐藏弹出框。

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

展示或隐藏弹出框。

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

隐藏并销毁弹出框。

事件

Bootstrap教程JS插件弹出框学习笔记分享

$('[data-toggle=popover]').on('shown.bs.popover', function (){

alert(1);

})

Bootstrap教程JS插件弹出框学习笔记分享

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

 以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
详解vue的diff算法原理
May 20 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 #Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 #Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 #Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 #Javascript
jquery获取img的src值的简单实例
May 17 #Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 #Javascript
浅谈Javascript数组(推荐)
May 17 #Javascript
You might like
笑谈配置,使用Smarty技术
2007/01/04 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
laravel请求参数校验方法
2019/10/10 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python函数式编程
2017/07/20 Python
python版百度语音识别功能
2019/07/09 Python
详解python pandas 分组统计的方法
2019/07/30 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python线程threading模块用法详解
2020/02/26 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
洗车工岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
联欢晚会主持词
2014/03/25 职场文书
倡议书范文大全
2015/04/28 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers