并提示网站菜单导航及用户登录,wordpress推荐的插件,网站建设公司商务网站项目书,上海html5网站建设前面的话 在网站中#xff0c;网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框#xff0c;比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架有一个独立的组件#xff0c;实现类似的效果#xff0c;这个组件被称…前面的话 在网站中网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架有一个独立的组件实现类似的效果这个组件被称为警示框。本文将详细介绍Bootstrap警告框 默认用法 警告框组件通过提供一些灵活的预定义消息为常见的用户动作提供反馈消息 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框
.alert 类是必须要设置的另外还提供了有特殊意义的4个类例如
.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;
} 警告框没有默认类只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您使用一种有意义的警告类。目前提供了成功、消息、警告和危险 1、成功警示框告诉用户操作成功在“alert”样式基础上追加“alert-success”样式具体呈现的是背景、边框和文本都是绿色 2、信息警示框给用户提供提示信息在“alert”样式基础上追加“alert-info”样式具体呈现的是背景、边框和文本都是浅蓝色 3、警告警示框提示用户小心操作提供警告信息在“alert”样式基础上追加“alert-warning”样式具体呈现的是背景、边框、文本都是浅黄色 4、错误警示框提示用户操作错误在“alert”样式基础上追加“alert-danger”样式具体呈现的是背景、边框和文本都是浅红色 div classalert rolealert基类/div
div classalert alert-success rolealert成功/div
div classalert alert-info rolealert信息提示/div
div classalert alert-warning rolealert警告/div
div classalert alert-danger rolealert错误/div stylewidth: 100%; height: 390px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a1.html frameborder0 width320 height240 可关闭 在平时浏览网页的时候会发现一些警示框带有关闭按钮用户一点击关闭按钮就能自动关闭显示的警示框也就是让警示框隐藏不显示。在Bootstrap框架中的警示框也具有这样的功能 只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入classclose类实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性data-dismissalert因为可关闭警示框需要借助于Javascript来检测该属性从而控制警示框的关闭 .alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
} div classalert alert-success alert-dismissable rolealert
button classclose typebutton data-dismissalert×/button
恭喜您操作成功
/div stylewidth: 100%; height: 80px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a2.html frameborder0 width320 height240
【外部关闭】 如果把关闭按钮放置在警告框的外部则需要设置data-target为# 警告框的id 这个用法的弊端是按钮本身无法关闭因为它已经不在警告框内了 button typebutton classbtn data-dismissalert data-target#test关闭/button
div idtest classalert alert-success alert-dismissable rolealert操作成功/div stylewidth: 100%; height: 110px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a3.html frameborder0 width320 height240 如果想关闭警告框的同时把按钮也从DOM中删除如果按钮的class是btn则设置data-target.btn则可以把按钮也删除 button typebutton classbtn data-dismissalert data-target#test,.btn关闭/button
div idtest classalert alert-success alert-dismissable rolealert操作成功/div stylewidth: 100%; height: 110px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a4.html frameborder0 width320 height240 链接 有时可能想在警示框中加入链接地址用来告诉用户跳到某一个地方或新的页面。而这个时候又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理并且颜色相应加深 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 classalert alert-success rolealert成功 a href# classalert-link详情查看/a/div
div classalert alert-info rolealert信息提示 a href# classalert-link详情查看/a/div
div classalert alert-warning rolealert警告 a href# classalert-link详情查看/a/div
div classalert alert-danger rolealert错误 a href# classalert-link详情查看/a/div stylewidth: 100%; height: 300px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a5.html frameborder0 width320 height240 JS触发
【方法】
$().alert(close) 关闭警告框并从 DOM 中将其删除 div classalert alert-success alert-dismissable rolealert
button classclose typebutton×/button
恭喜您操作成功
/div
script
$(.close).click(function(){
$(.alert).alert(close);
});
/script stylewidth: 100%; height: 72px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a6.html frameborder0 width320 height240
【事件】 close.bs.alert 当 close 方法被调用后立即触发此事件。
closed.bs.alert 当警告框被关闭后也即 CSS 过渡效果完毕之后立即触发此事件。 div classalert alert-success alert-dismissable fade in data-dismissalert rolealert
button classclose typebutton×/button
恭喜您操作成功
/div
div idintro警告框处于打开状态/div
script
$(.alert).on(closed.bs.alert, function () {
$(#intro).html(警告框被关闭了)
})
/script stylewidth: 100%; height: 112px; srchttps://demo.xiaohuochai.site/bootstrap/alert/a7.html frameborder0 width320 height240 JS源码
【1】IIFE 使用立即调用函数防止插件内代码外泄从而形成一个闭环并且只能从jQuery的fn里进行扩展 function ($) {
//使用es5严格模式
use strict;
//
}(window.jQuery); 【2】初始设置 //定义选择器所有符合该自定义属性的元素都可以触发下面的事件
var dismiss [data-dismissalert]
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-dismissalert
//如果有则设置单击的时候关闭指定的警告框元素
$(document).on(click.bs.alert.data-api, dismiss, Alert.prototype.close)
