Bootstrap3.0学习教程二十一:JS插件弹出框

  • 时间:
  • 浏览:1
  • 来源:大发快3_快3平台手机版_大发快3平台手机版

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

全版教程可查看:Bootstrap3.0教程

弹出框

案例

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

先来看多少简单的静态案例效果图

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

<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>

动态演示

先来看效果图

有另一1个按钮,点击按钮的那末 就会弹出右侧的小窗体。

看代码,着实 也很简单。

<a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="即对拥有矮、胖、穷、丑、矬、呆、撸等属性型态的各种雷人行径及想法表示轻蔑。屌丝(或写作“吊丝”)必须说是由骂人话“屌死”、“吊死”、“叼死”演变而来。“屌丝男”主却说指大多出身清贫之家,如乡村或其他城市底层小市民家庭,那末 更多的背景,其他初中即停学,进城务工,或成了餐厅服务员,或成了网吧网管,在城市的富贵之中分得一杯苦羹;或是宅男、无业游民,那末 通常又不肯承认,每所有人一般自称为自由职业者。" title="" href="#" data-original-title="屌丝本义"> Please Click to toggle popover </a>

就有另一1个a标签,并且赋予了按钮的样式类,并且给与多少属性,主要用于展示弹出框的:

第有另一1个:data-original-title ——标题

第1个:data-content——内容

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

不过现在那末 你来运行,按钮是有了,你点击按钮弹出框被不用再次跳出,那末 很简单,却说大家还那末 给它初始化,就像上一节中的tooltip一样的。

只必须加进去去简单的JavaScript代码就必须了。

<script type="text/javascript">

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

</script>

1个方向

<div 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'选项(见下面的文档)以避免不用须的副作用(同类,当弹出框显示那末 ,与其媒体媒体合作的页面元素那末 变得更宽或是去圆角)。

在禁止使用的页面元素上使用弹出框时必须额外增加有另一1个元素将其快递邮包起来

为了给disabled 或.disabled元素加进去去弹出框时,将必须增加弹出框的页面元素快递邮包在有另一1个<div>中,并且对你这个 <div>元素应用弹出框。

用法

通过JavaScript启用弹出框:

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

选项

必须将选项通过data属性或JavaScript传递。对于data属性,必须将选项名称放上去data-那末 ,同类data-animation=""。

最好的办法

$().popover(options)

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

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

显示弹出框。

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

隐藏弹出框。

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

展示或隐藏弹出框。

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

隐藏并销毁弹出框。

事件

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

alert(1);

})

总结

Bootstrap3.0的示例代码有那末 不全,让小菜测试的那末 摸不着头脑,很无语,不过还好,搞了一晚上,效果最终还是有了。