Bootstrap学习笔记之插件（三）
来源：互联网 发布：网络女主播经常唱的 编辑：程序博客网 时间：2024/06/06 14:00
Bootstrap插件一、模态框（Modal） data-toggle="modal"模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等 <!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //当用超链接代替button触发时，改data-target为href="#myModal"，以识别要加载的模态框目标;data-toggle用以打开modal开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> //.modal识别为模态框，.fade当切换时会淡入淡出，id与上面的data-target对应，aria-labelledby引用模态框的标题，aria-hidden为true时窗口不可见，直到被触发<div class="modal-dialog"><div class="modal-content"><div class="modal-header"> //.modal-header为头部定义样式<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> //data-dismiss用以关闭模态框×</button><h4 class="modal-title" id="myModalLabel"> //.modal-title指定其为标题模态框（Modal）标题</h4></div><div class="modal-body"> //.modal-body为主体定义样式在这里添加一些文本</div><div class="modal-footer"> //.modal-footer为底部定义样式<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div> 选项 data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 boolean 或 string 'static' 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 boolean 默认值：true data-show 当初始化时显示模态框。 boolean 默认值：true data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。 path 默认值：false<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> 方法 <script>$(function() {$('#myModal').modal({keyboard: true})}); </script> $('#identifier').modal({keyboard: false}) $('#identifier').modal('toggle') $('#identifier').modal('show') $('#identifier').modal('hide') 事件 show.bs.modal 在调用 show 方法后触发。$('#identifier').on('show.bs.modal', function () { // 执行一些动作...}) shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。$('#identifier').on('shown.bs.modal', function () { // 执行一些动作...}) hide.bs.modal 当调用 hide 实例方法时触发。$('#identifier').on('hide.bs.modal', function () { // 执行一些动作...}) hidden.bs.modal 当模态框完全对用户隐藏时触发。 $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...})二、滚动监听（Scrollspy） 通常用于多个（超出展示区域）相似结构的模块内容在同一页面上展示，通过滚动条滚动，相应的导航栏项随之变化 //data-spy指定要监听的元素， data-target指定导航组件nav元素的id或class， data-offset当计算滚动位置时，距离顶部的偏移像素，默认为number：10 <body data-spy="scroll" data-target=".navbar" data-offset="50"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button><a class="navbar-brand" href="#">WebSiteName</a></div><div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li><li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#section41">Section 4-1</a></li><li><a href="#section42">Section 4-2</a></li></ul></li></ul></div></div></div></nav><div id="section1">...</div><div id="section2">...</div><div id="section3">...</div><div id="section41">...</div><div id="section42">...</div> </body> 方法 .scrollspy('refresh') 用于添加或移除DOM元素时使用 <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">× 删除该部分</a></small></h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业（比如 JBOSS、Web Logic 等）的 J2EE 上。</p> </div><script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); }); </script> 事件 activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件。 $("#myScrollspy").on('activate.bs.scrollspy',function(){ // var currentItem = $(".nav li.active > a").text(); //$("#activeitem").html("目前您正在查看 - " + currentItem);}) 垂直滚动监听 （可参考最下面的附加导航Affix） 注意：需要将左边的胶囊标签位置固定 position: fixed;top: 20px;<body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="row"><nav id="myScrollspy" class="col-md-3"> <ul class="nav nav-pills nav-stacked"><li class="active"><a href="#sec1">Section 1</a></li><li><a href="#sec2">Section 2</a></li><li><a href="#sec3">Section 3</a></li><li><a href="#sec4">Section 4</a></li><li><a href="#sec5">Section 5</a></li> </ul></nav><div class="col-md-9"> <div id="sec1">... </div> <div id="sec2">... </div> ...</div> </div> </div></body>三、标签页（Tab） 切换时有动画效果 data-toggle="tab"或"pill" 需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 .nav .nav-tabs（水平式） .nav .nav-pills（胶囊式） 添加 .fade 到每个 .tab-pane 后面以为标签页设置淡入淡出效果，第一个标签页必须添加 .in 类，否则初始化时没有内容 <ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#home" data-toggle="tab">Home</a></li>... </ul> <div class="tab-content"><div class="tab-pane fade in active" id="home">...</div>... </div> 方法 $().tab('show') 用以激活标签页元素和内容容器 $(function () {$('#myTab li:eq(1) a').tab('show'); }); 事件 show.bs.tab 在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 shown.bs.tab 在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 <script> $(function(){ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // 获取已激活的标签页的名称 var activeTab = $(e.target).text(); // 获取前一个激活的标签页的名称 var previousTab = $(e.relatedTarget).text(); //$(".active-tab span").html(activeTab); //$(".previous-tab span").html(previousTab); }); }); </script>四、提示工具（Tooltip） data-toggle="tooltip" 注意：该插件不是纯 CSS 插件。如需使用须用 jquery 激活它 <script> $(function () { $("[data-toggle='tooltip']").tooltip(); }); </script> <a href="#" data-toggle="tooltip" title="默认的">默认的Tooltip</a> <a href="#" data-toggle="tooltip" title="左侧的" data-placement="left">左侧的Tooltip</a> <a href="#" data-toggle="tooltip" title="右侧的" data-placement="right">右侧的Tooltip</a> <a href="#" data-toggle="tooltip" title="上侧的" data-placement="top">上侧的Tooltip</a> <a href="#" data-toggle="tooltip" title="下侧的" data-placement="bottom">下侧的Tooltip</a> <button class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="向下的tooltip">底部的</button> 选项 data-animation 提示工具使用 CSS 渐变滤镜效果。boolean 默认值：true data-html 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。boolean 默认值：false data-placement 定位提示工具（即 top|bottom|left|right|auto）例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。string|function 默认值：top data-selector 如果提供了一个选择器，提示工具对象将被委派到指定的目标。string 默认值：false data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。string | function 默认值：'' data-trigger 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。string 默认值：'hover focus' data-content 如果未指定 data-content 属性，则使用默认的 content 值。string | function 默认值：'' data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：delay:{ show: 500, hide: 100 }number | object 默认值：0 data-container 向指定元素追加提示工具。实例： container: 'body'string | false 默认值：false 方法 <script> $(function () { $('.tooltip-show').tooltip('show');}); //显示元素的提示工具。 $(function () { $('.tooltip-hide').tooltip('hide');}); //隐藏元素的提示工具。 $(function () { $('.tooltip-destroy').tooltip('destroy');}); //隐藏并销毁元素的提示工具。 $(function () { $('.tooltip-toggle').tooltip('toggle');}); //切换显示/隐藏元素的提示工具。 $(function () { $(".tooltip-options a").tooltip({html : true }); //向元素集合附加提示工具句柄。 </script> 事件 show.bs.tooltip 当调用 show 实例方法时立即触发该事件。 shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。 hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 例子： $(function () { $('.tooltip-show').on('show.bs.tooltip', function () { //alert("Alert message on show"); }) 五、弹出框（Popover） data-toggle="popover" 类似上面的tooltip 需要js激活 <script> $(function () { $("[data-toggle='popover']").popover(); }); </script> <a href="#" data-toggle="popover" title="下侧的" data-content="底部的一些内容" data-placement="bottom">下侧的Popover</a> <button class="btn btn-success" data-toggle="popover" title="向下的" data-content="底部的一些内容" data-placement="bottom">底部的</button> 选项 data-animation data-html data-placement data-selector data-title data-trigger data-delay data-container 方法 $().popover(options); $().popover('toggle'); $().popover('show'); $().popover('hide'); $().popover('destroy'); 事件 show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover六、警告框（Alert） <div class="alert alert-warning fade in"> //注意此处并没有添加.alert-dismissible 添加两个类.fade & .in可在关闭时启用动画<a href="#" class="close" data-dismiss="alert">×</a> //这个关闭（按钮）较之前button生成的颜色更深一些<strong>警告！</strong>您的网络连接有问题。 </div> 方法 $('').alert(); 让所有的警告框都带有关闭功能。 $('').alert('close'); 关闭所有的警告框。 事件 close.bs.alert 当调用 close 实例方法时立即触发该事件。 closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。 七、按钮（Button） 显示加载状态信息 data-loading-text属性值为加载时显示的内容 <button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态 </button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); $(this).dequeue(); }); }); }); </script> 切换显示按压状态 data-toggle="button" <button type="button" class="btn btn-primary" data-toggle="button"> 单个切换 </button> 单选按钮/复选按钮 <div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><input type="radio" name="options"> 选项 1 //换为<input type="checkbox"></label><label class="btn btn-primary"><input type="radio" name="options"> 选项 2</label><label class="btn btn-primary"><input type="radio" name="options"> 选项 3</label> </div> 方法 （点击事件触发） $(this).button('toggle'); 切换按压状态。赋予按钮被激活的外观。可以使用 data-toggle 属性启用按钮的自动切换。 $(this).button('loading').delay(1000).queue(function() {}); 当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。 $(this).button('loading').delay(1000).queue(function() {$(this).button('reset');$(this).dequeue(); }); 重置按钮状态，加载loading文本内容恢复为最初的内容。 $(this).button('loading').delay(1000).queue(function() {$(this).button('complete'); //button需要设置自定义属性data-complete-text的值$(this).dequeue(); }); 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 八、折叠（Collapse） （参考组件十九：面板） <div class="panel-group" id="accordion"> //.panel-group多组折叠对象容器<div class="panel panel-default"> //.panel需要折叠的对象<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> //data-toggle data-parent href|data-target标题</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"> //id对应上面的href 三个类名不可少<div class="panel-body">内容</div></div></div>... </div> 选项 data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。selector 默认值：false data-toggle 切换调用可折叠元素。boolean 默认值：true 方法 $('#identifier').collapse({toggle: false}) 激活内容为可折叠元素。接受一个可选的 options 对象。 $('#identifier').collapse('toggle') 切换显示/隐藏可折叠元素。 $('#identifier').collapse('show') 显示可折叠元素。 $('#identifier').collapse('hide') 隐藏可折叠元素。 事件 show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse 九、轮播（Carousel） <div id="myCarousel" class="carousel slide" data-ride="carousel" data-slide="next" data-interval="2000"> //属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。 //使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。 //data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。<!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"> //轮播-指示器：下方的几个圆点<li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol> <!-- 轮播（Carousel）项目 --><div class="carousel-inner"> //循环的图片<div class="item active"><img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"><div class="carousel-caption">标题 1</div> //在下方的圆点上面显示标题信息（任何html都可）</div><div class="item"><img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"><div class="carousel-caption">标题 2</div></div><div class="item"><img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"><div class="carousel-caption">标题 3</div></div></div><!-- 轮播（Carousel）导航 --> //左右的导航（图标）<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> 选项 data-interval 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。number 默认值：5000 data-pause 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。string 默认值："hover" data-wrap 轮播是否连续循环。boolean 默认值：true 方法 $('#identifier').carousel({interval: 2000}) 初始化轮播为可选的 options 对象，并开始循环项目。 $('#identifier').carousel('cycle') 从左到右循环轮播项目。 $('#identifier').carousel('pause') 停止轮播循环项目。 $('#identifier').carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 $('#identifier').carousel('prev') 循环轮播到上一个项目。 $('#identifier').carousel('next') 循环轮播到下一个项目。 事件 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。 slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。 十、附加导航（Affix） 某个 <div> 固定在页面的某个位置，它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。 <body data-spy="scroll" data-target="#myScrollspy"> //结合垂直滚动监听<div class="container"> <div class="jumbotron"><h1>Bootstrap Affix</h1></div><div class="row"><div class="col-xs-3" id="myScrollspy"><ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> //只需在此处添加 data-spy="affix" data-offset-top设置偏移<li class="active"><a href="#section-1">第一部分</a></li><li><a href="#section-2">第二部分</a></li><li><a href="#section-3">第三部分</a></li><li><a href="#section-4">第四部分</a></li><li><a href="#section-5">第五部分</a></li></ul></div><div class="col-xs-9"><h2 id="section-1">第一部分</h2>...<hr><h2 id="section-2">第二部分</h2>...<hr><h2 id="section-3">第三部分</h2>...<hr><h2 id="section-4">第四部分</h2>...<hr><h2 id="section-5">第五部分</h2>...</div></div></div> </body> $('#myAffix').affix({ //可不用设置data-spy及data-offset-top，可改由js实现 offset: { top: 100, bottom: function () { return (this.bottom = $('.bs-footer').outerHeight(true)) } } }) 0 0
- Bootstrap学习笔记之插件（三）
- Bootstrap学习总结笔记（21）-- 基本插件之按钮
- Bootstrap学习总结笔记（22）-- 基本插件之折叠
- bootstrap v3学习笔记之JavaScript插件
- Bootstrap学习笔记（三）
- Bootstrap学习（三）——Bootstrap 插件
- BootStrap学习笔记三
- bootstrap学习笔记(三)
- Bootstrap学习笔记（八） Bootstrap支持的JavaScript插件
- Bootstrap学习之模态框（Modal）插件
- bootstrap学习笔记（三）--form
- Bootstrap学习笔记（三）表单
- HTML笔记（三）bootstrap之表格
- bootstrap tips 插件学习笔记
- Bootstrap学习总结笔记（16）-- 基本插件之模态对话框
- Bootstrap学习总结笔记（17）-- 基本插件之标签切换
- Bootstrap学习总结笔记（18）-- 基本插件之Tooltip提示工具
- Bootstrap学习总结笔记（19）-- 基本插件之Popover提示框
- Android 图片压缩终极解决方案，仅需一行代码。
- Fiddler抓取接口
- Docker入门概览
- activity-生命周期
- Markdown 语法学习
- Bootstrap学习笔记之插件（三）
- Spring3 集成 Hibernate4 配置
- 写一个方法对日期格式化 new Date().format("yyyy-MM-dd HH:mm:ss")
- C++ sort 对结构体进行排序
- python爬虫，selenium使用，Firefox-chrome-IE问题解决方法，selenium的基本操作
- 【转】 Java类加载全过程
- python随笔1
- jQuery 事件
- 牛人主页（主页有很多论文代码）【真的好强大】
