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

学习要点:

1.弹出框

2.警告框

主讲教师:李炎恢

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

一.弹出框

弹出框即点击一个元素弹出一个包含标题和内容的容器。

//基本用法

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

//JavaScript 初始化

  1. $('button').popover();

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

第 16 章 弹出框和警告框插件  - 图1

  1. $('button').popover({
  2. container : 'body',
  3. viewport : {
  4. selector : '#view',
  5. padding : 10,
  6. }
  7. });

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

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

Popover 插件中事件有四种:

第 16 章 弹出框和警告框插件  - 图2

//事件,其他雷同

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

二.警告框

警告框即为点击小时的信息框。

//基本实例

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

//添加淡入淡出效果

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

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

//JavaScript 方法

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

Alert 插件中事件有两种:

第 16 章 弹出框和警告框插件  - 图3

//事件,其他雷同

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

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/50.html