星空网 > 软件开发 > Java

第 16 章 弹出框和警告框插件

学习要点:

1.弹出框
2.警告框

主讲教师:李炎恢

本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。

一.弹出框
弹出框即点击一个元素弹出一个包含标题和内容的容器。
//基本用法

<button class="btn btn-lg btn-danger"   type="button"   data-toggle="popover"   title="弹出框"   data-content="这是一个弹出框插件">   点击弹出/隐藏弹出框</button>

//JavaScript 初始化

$('button').popover();

弹出框插件有很多属性来配置提示的显示,具体如下:

第 16 章 弹出框和警告框插件

$('button').popover({  container : 'body',  viewport : {    selector : '#view',    padding : 10,  }}); 

通过 JavaScript 执行的方法有四个。

//显示$('button').popover('show');//隐藏$('button').popover('hide');//反转显示和隐藏$('button').popover('toggle');//隐藏并销毁$('button').popover('destroy');

Popover 插件中事件有两种。

 第 16 章 弹出框和警告框插件

//事件,其他雷同

$('button').on('show.bs.tab', function() {  alert('调用 show 方法时触发!');}); 

 

二.警告框
警告框即为点击小时的信息框。
//基本实例

<div class="alert alert-warning">                                        <button class="close" type="button" data-dismiss="alert">                            <span>&times;</span>                                           </button>                                                  <p>                                                       警告:您的浏览器不支持!                                               </p>                                                   </div>                                                    

//添加淡入淡出效果

<div class="alert alert-warning fade in">

如果用 JavaScript,可以代替 data-dismiss="alert"
//JavaScript 方法

$('.close').on('click', function() {  $('#alert').alert('close');})

Alert 插件中事件有四种。

第 16 章 弹出框和警告框插件

//事件,其他雷同

$('#alert').on('close.bs.alert', function() {  alert('当 close 方法被触发时调用!');}); 




原标题:第 16 章 弹出框和警告框插件

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

lazada类目表:https://www.goluckyvip.com/tag/84809.html
刘鹤赴美磋商:https://www.goluckyvip.com/tag/8481.html
lazada前台:https://www.goluckyvip.com/tag/84810.html
lazada押金:https://www.goluckyvip.com/tag/84811.html
lazada 印尼:https://www.goluckyvip.com/tag/84812.html
lazada上货助手:https://www.goluckyvip.com/tag/84813.html
旅游景点的打油诗 旅游景点的打油诗怎么写:https://www.vstour.cn/a/366180.html
2024深圳龙岗区文化馆免费音乐培训课程安排+报名方式:https://www.vstour.cn/a/366181.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流