zoukankan      html  css  js  c++  java
  • (十五)弹出框和警告框插件

    一.弹出框

    • 弹出框即点击一个元素弹出一个包含标题和内容的容器。 

    1、基本实例

    <body style="margin: 200px;">
    <button class="btn btn-info" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>
    
    <script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
    <script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    //初始化
    $('button').popover(); </script> </body>

    2、可配置的属性

     

    •  data-viewport的用法,如下
    <head>
        <title>boostrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css">
        <style>
            a:focus {
                outline: none;
            }
    
            #view {
                width: 300px;
                height: 100px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body style="margin: 200px;">
    
    <div id="view">
        <button class="btn btn-info" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>
    </div>
    <script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
    <script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('button').popover({
            container: 'body',
            viewport: {
                selector: '#view',
                padding: 60,
            }
        });
    </script>
    </body>

     3、方法

     通过 JavaScript 执行的方法有四个。 

    //显示 
    $('button').popover('show');
    //隐藏 
    $('button').popover('hide');
    //反转显示和隐藏 $('button').popover('toggle'); //隐藏并销毁 $('button').popover('destroy');

     4、事件

    • Popover 插件中事件有两种。

    //事件,其他雷同
     $('button').on('show.bs.tab', function () {
     alert('调用 show 方法时触发!'); 
    });

     二.警告框

    •  警告框即为点击小时的信息框。 

     1、基本实例

    <div class="alert alert-warning">
        <button class="close" type="button" data-dismiss="alert"><span>&times;</span></button>
        <p>警告:您的浏览器不支持!</p>
    </div>

    • 添加淡入淡出效果 
    <div class="alert alert-warning fade in">
    • 如果用 JavaScript,可以代替 data-dismiss="alert" 
    //JavaScript 方法
     $('.close').on('click', function () { 
    $('#alert').alert('close'); 
    })

     2、Alert 插件中事件有四种

     

    //事件,其他雷同
     $('#alert').on('close.bs.alert', function () { 
    alert('当 close 方法被触发时调用!');
     });
  • 相关阅读:
    平面几何-9 (海边直播目标2017全国初中数学竞赛班第14周作业题)
    数学奥林匹克问题解答:平面几何-8
    数学奥林匹克问题解答:平面几何-7
    lazyload懒加载插件
    Vue的生命周期
    用Vue来实现音乐播放器(九):歌单数据接口分析
    axios的详细用法以及后端接口代理
    用Vue来实现音乐播放器(八):自动轮播图啊
    Vue实现音乐播放器(七):轮播图组件(二)
    Vue实现音乐播放器(六):jsonp的应用+抓取轮播图数据
  • 原文地址:https://www.cnblogs.com/shyroke/p/9191887.html
Copyright © 2011-2022 走看看