Bootstrap 弹出框和警告框插件
发布时间:2020-12-17 20:53:37 所属栏目:安全 来源:网络整理
导读:一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 //基本用法 button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件" 点击弹出/隐藏弹出框 /button //JavaScript 初
一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框 </button> //JavaScript 初始化 $(‘button‘).popover(); 弹出框插件有很多属性来配置提示的显示,具体如下:
$(‘button‘).popover({ container : ‘body‘,viewport : { selector : ‘#view‘,padding : 10,} }); 通过 JavaScript 执行的方法有四个。 //显示 $(‘button‘).popover(‘show‘); //隐藏 $(‘button‘).popover(‘hide‘); //反转显示和隐藏 $(‘button‘).popover(‘toggle‘); //隐藏并销毁 $(‘button‘).popover(‘destroy‘); Popover 插件中事件有两种。 //事件,其他雷同 $(‘button‘).on(‘show.bs.tab‘,function () { alert(‘调用 show 方法时触发!‘); }); 二.警告框 警告框即为点击小时的信息框。 //基本实例 <div class="alert alert-warning"> <button class="close" type="button" data-dismiss="alert"> <span>×</span> </button> <p>警告:您的浏览器不支持!</p> </div> //添加淡入淡出效果 <div class="alert alert-warning fade in"> 如果用 JavaScript,可以代替 data-dismiss="alert" //JavaScript 方法 $(‘.close‘).on(‘click‘,function () { $(‘#alert‘).alert(‘close‘); }) Alert 插件中事件有四种。 //事件,其他雷同 $(‘#alert‘).on(‘close.bs.alert‘,function () { alert(‘当 close 方法被触发时调用!‘); }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Angular – FormArray中的唯一性验证器
- shell实例-判断apache是否正常启动
- scala play 2.1.1 json功能语法将数据映射到不同的格式
- shell第一章(shell简介)
- 为什么这个Bash函数在git别名中执行两次,为什么添加`exit`修
- expect实现自动scp和ssh登录后执行命令,并向bash提供返回值
- angularjs – 使用量角器测试websockets服务器
- scala – 为什么Tuple0-22和Function0-22而不是HList
- Scala:引用嵌套类的类,它作为泛型的类型参数
- 理解angularjs中的$emit,$broadcast和$on