【Bootstrap学习笔记】10.弹出框和警告框插件

十六、弹出框和警告框插件

学习内容

• 弹出框插件
• 弹出框插件属性
• 两个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">&times;</span>
    <p>警告！敌袭！</p>
</div>

警告框关闭时的淡入淡出效果

.fade .in 示例：div.alert.fade.in

JavaScript方式关闭警告框

$('#id').alert(‘close’);

<div class="alert alert-danger">
    <span class="close">&times;</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>