Bootstrap警告框

前边的话

  在网站中,网页总是需求和用户一起做调换与沟通。特别是当用户操作上下文为用户提供一些实用的警示框,比如说告诉用户操作成功、操作错误、提示可能警告等。在Bootstrap框架有一个单独的零件,完成类似的效能,这一个组件被称作警示框。本文将详细介绍Bootstrap警告框

 

私下认可用法

  警告框组件通过提供部分灵活的预约义新闻,为广泛的用户动作提供报告音信

  将随机文本和多个可选的闭馆按钮组合在一块儿就能结成2个警告框,.alert 类是必须要安装的,其余还提供了有与众不相同含义的陆个类(例如,.alert-success),代表不一致的警示音讯

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}

  警告框没有默许类,只有基类和修饰类。暗中认可的苹果绿警告框并不曾多少意义。所以你使用一种有含义的警告类。如今提供了成功、音信、警告和惊险

  ① 、成功警示框:告诉用户操作成功,在“alert”样式基础上平添“alert-success”样式,具体表现的是背景、边框和文件都是水泥灰;

  贰 、新闻警示框:给用户提供提示音信,在“alert”样式基础上增加“alert-info”样式,具体表现的是背景、边框和文书都是古铜黑色;

  叁 、警告警示框:提醒用户小心操作(提供警告音讯),在“alert”样式基础上加码“alert-warning”样式,具体表现的是背景、边框、文本都是浅天青;

  四 、错误警示框:提醒用户操作不当,在“alert”样式基础上平添“alert-danger”样式,具体表现的是背景、边框和文书都是浅墨奶油色

<div class="alert" role="alert">基类</div>
<div class="alert alert-success" role="alert">成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告</div>
<div class="alert alert-danger" role="alert">错误</div> 

 

可关闭

  在日常浏览网页的时候,会意识部分警戒框带有关闭按钮,用户一点击关闭按钮就能活动关闭展现的警示框(也等于让警示框隐藏不出示)。在Bootstrap框架中的警示框也不无那样的功用

  只必要在暗中同意的警示框里面添加八个停歇按钮。然后开始展览四个步骤:

  ① 、要求在着力警示框“alert”的根底上助长“alert-dismissable”样式。

  二 、在button标签中参加class=”close”类,完成警示框关闭按钮的体制。

  ③ 、要确认保证关闭按钮成分上安装了自定义属性:data-dismiss=”alert”(因为可关闭警示框须求借助Javascript来检查和测试该属性,从而决定警示框的关闭)

.alert-dismissable {
  padding-right: 35px;
}
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    恭喜您操作成功!
</div>

【外部关闭】

  若是把关闭按钮放置在警告框的表面,则须求设置data-target为’# +
警告框的id’

  这几个用法的弊端是按钮本人不恐怕关闭,因为它已经不在警告框内了

<button type="button" class="btn" data-dismiss="alert" data-target="#test">关闭</button>
<div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>

  假设想关闭警告框的还要,把按钮也从DOM中除去,假如按钮的class是’btn’,则设置data-target=”.btn’则足以把按钮也删除

<button type="button" class="btn" data-dismiss="alert" data-target="#test,.btn">关闭</button>
<div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>

 

链接

  有时或许想在警戒框中参加链接地址,用来告诉用户跳到某多个地点或新的页面。而以此时候又想让用户能一目掌握的看出来那是链接地址。在Bootstrap框架中对警示框里的链接样式做了2个高亮突显处理。为分化类其余告诫框内的链接进行了加粗处理,并且颜色对应加重

  Bootstrap框架是通过给警示框加的链接添加三个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮彰显 

.alert .alert-link {
  font-weight: bold;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger .alert-link {
  color: #843534;
}

<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-danger" role="alert">错误 <a href="#" class="alert-link">详情查看</a></div> 

 

JS触发

【方法】

$().alert(‘close’)

  关闭警告框并从 DOM 中校其除去

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button">×</button>
    恭喜您操作成功!
</div>
<script>
 $('.close').click(function(){
     $('.alert').alert('close');
 }); 
</script>

【事件】

close.bs.alert    当 close 方法被调用后立即触发此事件。
closed.bs.alert    当警告框被关闭后(也即 CSS 过渡效果完毕之后)立即触发此事件。

<div class="alert alert-success alert-dismissable fade in" data-dismiss="alert" role="alert">
    <button class="close" type="button">×</button>
    恭喜您操作成功!
</div>
<div id="intro">警告框处于打开状态</div>
<script>
$('.alert').on('closed.bs.alert', function () {
    $('#intro').html('警告框被关闭了')
})
</script>

   

JS源码

【1】IIFE

  使用即时调用函数,防止插件内代码外泄,从而形成二个闭环,并且不得不从jQuery的fn里进行扩大

+function ($) {
    //使用es5严格模式
    'use strict';
    //
}(window.jQuery);

【2】开首设置

  //定义选择器,所有符合该自定义属性的元素都可以触发下面的事件
  var dismiss = '[data-dismiss="alert"]'
  var Alert   = function (el) {
    //传入元素,如果元素内部有dismiss设置的自定义属性,则click事件会触发原型上的close方法
    $(el).on('click', dismiss, this.close)
  }
  //版本号为3.3.7
  Alert.VERSION = '3.3.7'
  //动画持续时间为150ms
  Alert.TRANSITION_DURATION = 150

【3】插件主旨代码

  Alert.prototype.close = function (e) {
    //被单击元素的jQuery对象,临时赋值,防止this污染
    var $this    = $(this)
    //获取自定义属性data-target的值
    var selector = $this.attr('data-target')
    //获取没有data-target属性
    if (!selector) {
      //则获取href属性的值
      selector = $this.attr('href')
      //IE7浏览器特殊处理
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') 
    }
    //获取jQuery对象
    var $parent = $(selector === '#' ? [] : selector)
    //阻止默认行为
    if (e) e.preventDefault()
    //如果该元素不存在
    if (!$parent.length) {
      //存在最近的样式为'.alert'的祖先元素
      $parent = $this.closest('.alert')
    }
    //删除元素前,执行close事件,可以通过自定义绑定来执行定义代码
    $parent.trigger(e = $.Event('close.bs.alert'))
    //如果回调函数中已经包含阻止默认行为的代码,则直接返回
    if (e.isDefaultPrevented()) return
    //删除元素上的in样式
    $parent.removeClass('in')

    function removeElement() {
      //触发closed事件后,删除该元素
      $parent.detach().trigger('closed.bs.alert').remove()
    }
    //如果支持动画,并且设置为fade样式
    $.support.transition && $parent.hasClass('fade') ?
      //在执行动画过渡效果后,再删除元素
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      //否则直接删除元素
      removeElement()
  }

【4】jQuery插件定义

  function Plugin(option) {
    //根据选择器,遍历所有符合规则的元素
    return this.each(function () {
      var $this = $(this)
      //获取自定义属性bs.alert的值
      var data  = $this.data('bs.alert')
      //如果值不存在,则将Alert实例设置为bs.alert值
      if (!data) $this.data('bs.alert', (data = new Alert(this)))
      //如果option传递了string,则表示要执行某个方法 
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.alert
  //保留其他库的$.fn.alert代码(如果定义的话),以便在noConflict之后可以继续使用该老代码
  $.fn.alert             = Plugin
  //重设插件构造器,可以通过该属性获取插件的真实类函数
  $.fn.alert.Constructor = Alert

【5】防争持处理

  $.fn.alert.noConflict = function () {
    //恢复以前的旧代码
    $.fn.alert = old
    //将$.fn.alert.noConflict()设置为Bootstrap的Tab插件
    return this
  }

【6】绑定触发事件

  //为声明式的HTML绑定单击事件
  //在整个document对象上,检测是否有自定义属性data-dismiss="alert"
  //如果有,则设置单击的时候,关闭指定的警告框元素
  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

 

相关文章