AngularJs的UI组件ui-Bootstrap分享(九)——Alert
alert指令会在页面上显示一条提示消息,效果是这样:
代码为:
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: '出错消息' },
{ type: 'success', msg: '成功消息' },
{ type: 'info', msg: '提示消息' },
{ type: 'warning', msg: '警告信息' }
]; $scope.addAlert = function () {
$scope.alerts.push({ msg: '这是一条消息!' });
}; $scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
$scope.addTplAlert = function () { }
}); </script>
<script type="text/ng-template" id="alert.html">
<div class="alert" style="background-color:#fa39c3;color:white" role="alert">
<div ng-transclude></div>
</div>
</script> </head>
<body>
<div ng-controller="AlertDemoCtrl">
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
<hr />
<uib-alert template-url="alert.html">一个使用自定义模板的警告框!</uib-alert>
</div>
</body>
</html>
alert指令可以使用的属性有:
属性名 | 默认值 | 备注 |
close | 提示消息关闭时所触发的函数。如果有这个属性,提示消息的右侧会添加一个关闭按钮 | |
dismiss-on-timeout | none | 在有close属性的前提下,设置一个自动关闭提示消息的时间(毫秒) |
template-url | uib/template/alert/alert.html | |
type | warning | 提示消息的类型。可配置的值有:danger,warning,info,success |
目录:
AngularJs的UI组件ui-Bootstrap分享(一)
AngularJs的UI组件ui-Bootstrap分享(二)——Collapse
AngularJs的UI组件ui-Bootstrap分享(三)——Accordion
AngularJs的UI组件ui-Bootstrap分享(四)——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享(五)——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享(九)——Alert
AngularJs的UI组件ui-Bootstrap分享(十)——Model
AngularJs的UI组件ui-Bootstrap分享(十一)——Typeahead
AngularJs的UI组件ui-Bootstrap分享(十二)——Rating
AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar
AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel
AngularJs的UI组件ui-Bootstrap分享(九)——Alert的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- 挂号平台首页开发(UI组件部分)
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- AngularJs的UI组件ui-Bootstrap分享(一)
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
- AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
- AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
- AngularJs的UI组件ui-Bootstrap分享(十二)——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
随机推荐
- AngulerJS小知识点二
AngularJS与其他JavaScript框架最主要的区别在于,控制器并不合适用来执行DOM操作.格式化或数据操作,以及除存储数据模型以外的状态维护操作.他只是视图和$scope之间的桥梁. 过滤器 ...
- jQuery.last() 函数
last() 函数详解 函数 获取当前对象的最后一个元素 语法 $selector.last() 返回值 返回值为一个对象 实例说明 代码 <!DOCTYPE html><html ...
- Wiki设置
在Wiki安装完成后,就wiki会提示下载LocalSettings.php文件,这是wiki的设置文件,当我们要对wiki进行设置的时候,就需要用到这个文件. 下面对常用的操作设置做简要讲解: —— ...
- Js Map 实现
/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...
- 从resfful API设计到加密算法
众所周知,SOAP 是基于XML的webservice协议,传的数据都是xml格式的,而当下resftul设计比较火,因为快效率高,但是安全性就不及SOAP, SOAP定义了xml-security的 ...
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- 浅谈android binder机制
binder机制 是谷歌优化在android上更适合终端的IPC(多进程通信方式),满足系统对通信方式,传输性能和安全性的要求. 特性: 1. 用驱动程序来推进进程间的通信.2. 通过共享内存来提高性 ...
- ASP.NET 控件前缀命名规范
标准控件 1 btn Button 2 chk CheckBox 3 ckl CheckedListBox 4 cmb ComboBox 5 dtp DateTimePicker 6 lb ...
- 对HTML5校验 自定义验证信息
在HTML5中,表单可以定义一个属性required来触发默认的校验机制,比如: <input type="text" required /> 弹出的错误提示默认为英文 ...
- 小小border用处多
1.实现梯形 利用边框我们可以得到梯形,首先我们给一个div添加边框,当给边框设置四个不同的颜色时,我们可以得到这样的样式,可以看到这里上边框是一个梯形,那么如果我们给其他边框设置颜色为透明(tran ...