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 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
理解javascript中的闭包
Jan 11 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
vuejs点击class变化的实例
Sep 05 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
详解python读取和输出到txt
2019/03/29 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python列表切片常用操作实例解析
2019/12/16 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
机关单位工作失职检讨书
2014/11/20 职场文书
个性与发展自我评价
2015/03/06 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL