十六、弹出框和警告框插件
学习内容
- 弹出框插件
- 弹出框插件属性
- 两个tooltip没有的属性
- 弹出框插件四个方法(show, hide, toggle, destroy)和四个事件(show, shown, hide, hidden)
- 警告框插件
- 警告框关闭时的淡入淡出效果
- JavaScript方式关闭警告框
● 弹出框插件(Popover)
1.popover和tooltip很类似,区别在于tooltip弹出标题,popover弹出标题和内容
2.popover和tooltip一样,html内声明data-toggle="popover"
意义不大,js中声明$('button').popover()
即可
3.data-content
属性用于显示内容
<label title="标题:这是一个弹出框" data-content="内容:详细描述" for="" class="form-control">我是一个label</label>
<script>
//默认属性声明
//$('label').popover();
//自定义属性声明
$('label').popover({
trigger:'hover',
placement:'top',
});
</script>
弹出框插件属性
属性基本上和tooltip一致,有两个不同点,一个是
data-placement
默认值为right;一个是data-trigger
默认值是click
data-animation
默认true,淡入淡出效果data-html
默认false,不允许解析成html内容data-placement
默认right,还有bottom,left,right,auto。“auto left”会尽量在左边显示,左边不行就会在右边显示。data-original-title
和title属性一样,显示提示语内容,但优先级比title低data-trigger
默认click,触发方式,其它还有hover,focus,manual。多个值用空格隔开,manual不能与其它同时设置。data-delay
默认0,显示\隐藏的延迟事件,单位毫秒(1秒=1000毫秒)。JavaScript方式可以分别设置显示和隐藏的毫秒数,如{show:500,hide:100},示例看下节data-template
自定义提示框模板
两个tooltip没有的属性
1.data-content
默认空,用来显示内容
2.data-viewport
设置外围容器的边际。比如增加一个外围容器:
<div class="vw" style="width:300px; height:300px; border:1px solid blue;">
<button class="btn btn-danger" title="标题:这是敌袭警告" data-content="内容:有日本渔船登上钓鱼岛!">警告!敌袭!</button>
</div>
<script>
$('button').popover();
</script>
<script>
$('button').popover({
//设置 `viewport` 属性
viewport:'.vw',
});
</script>
<script>
$('button').popover({
//另一种写法存在bug
viewport:{
selector:'.vw',
padding:50,
},
});
</script>
弹出框插件四个方法(show, hide, toggle, destroy)和四个事件(show, shown, hide, hidden)
同tooltip
● 警告框插件(Alert)
使用警告框插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
data-dismiss="alert"
<div class="alert alert-danger">
<span class="close" data-dismiss="alert">×</span>
<p>警告!敌袭!</p>
</div>
警告框关闭时的淡入淡出效果
.fade .in
示例:div.alert.fade.in
JavaScript方式关闭警告框
$('#id')
.alert(‘close’);
<div class="alert alert-danger">
<span class="close">×</span>
<p>警告!敌袭!</p>
</div>
<script>
$('span.close').on('click',function(){
$('.alert').alert('close');
});
</script>
事件
close.bs.alert
closen.bs.alert
<script>
$('.alert').on('close.bs.alert',function(){
alert('close');
});
</script>