bootstrap的 jQuery 插件

最新推荐文章于 2024-02-25 14:11:44 发布

ANKG

最新推荐文章于 2024-02-25 14:11:44 发布

阅读量4k

点赞数 4

分类专栏： Bootstrap 前端框架 Jquery 文章标签： bootstrap Jquery插件

本文链接：https://blog.csdn.net/zhangank/article/details/94599190

版权

Jquery 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

前端框架

5 篇文章 0 订阅

订阅专栏

Bootstrap

2 篇文章 0 订阅

订阅专栏

一、介绍

1、Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。

使用：

data属性---通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式；例如：data-toggle="modal"

//如果需要用到选定元素、还用到链接（在浏览器不启用 JavaScript 时有用），就使用 data-target 属性代替 href="#"，让href="#"为具体链接。

JS---所有 Bootstrap 插件提供纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。例如：

$(".btn.danger").button("toggle").addClass("fat")

2、站点引用 Bootstrap 插件的方式有两种：

单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。

不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。 所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

二、插件

1、Bootstrap 过渡效果（Transition）插件

Bootstrap 的 Transition 插件可以实现过渡效果，Transition 动画比较平滑，使用起来比较方便和灵活，并且对资源的消耗比较少。

过渡效果（Transition）插件提供了简单的过渡效果。

如果想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。

提示：transitionEnd 事件是在 CSS 过渡动画结束之后自动触发的一个事件，这个事件的回调函数可以完成对发生动画的 DOM 元素进行清理的工作。

2、Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

用法

通过 data 属性：

<button

data-target="#myModal" ，指定要切换的特定的模态框（带有 id="myModal"），或者 href="#identifier" ；

data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口；

data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口；>

</button> //控制器元素（比如按钮或者链接）

<div class="modal fade" id="myModal"

data-show="false"：初始化不显示模态框；

data-backdrop="false"：点击模态框外面不在关闭；

data-keyboard="false"：按ESC不能退出；

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string 'static' 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	data-show	当初始化时显示模态框。

通过 JavaScript：

使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

$('#identifier').modal(options)

方法	描述	实例
Options: .modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	`$('#identifier').modal({keyboard: false})`
Toggle: .modal('toggle')	手动切换模态框。只能切换一次	`$('#identifier').modal('toggle')`
Show: .modal('show')	手动打开模态框。	`$('#identifier').modal('show')`
Hide: .modal('hide')	手动隐藏模态框。	`$('#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 () { // 执行一些动作...})`

3、Bootstrap 下拉菜单（Dropdown）插件

使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

用法

通过 data 属性：

data-toggle="dropdown"：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

通过 js：只能点一次，，

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
      }); 
</script>

4、Bootstrap 滚动监听（Scrollspy）插件

自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。《通过点内容反应在标题》

用法

通过 data 属性：

data-spy="scroll"：向您想要监听（比如监听用户在看哪一段，需要给段落元素加监听）的元素（通常是 body）添加 data-spy="scroll",用于监听那个nav元素而做出反应。

data-target=".navbar-example"：添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。

为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs">
      ...
    </ul>
  </div>
  ...
</body>

<div data-spy="scroll" data-target="#navbar-example" 
data-offset="0"     
style="height:200px;overflow:auto; position: relative;">

通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$('body').scrollspy({ target: '.navbar-example' })

5、Bootstrap 提示工具（Tooltip）插件

Bootstrap 提示工具（Tooltip）插件工具可以通过鼠标移动到选定的特定的元素上时，显示出相关的提示语。

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

通过 data 属性：（仍需要与JQuery连用）

data-toggle="tooltip" ：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果。
html	boolean 默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\|function 默认值：top	data-placement	规定如何定位提示工具（即 top\|bottom\|left\|right\|auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string \| function 默认值：''	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：'hover focus'	data-trigger	定义如何触发提示工具： click\| hover \| focus \| manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content	string \| function 默认值：''	data-content	如果未指定 data-content 属性，则使用默认的 content 值。
delay	number \| object 默认值：0	data-delay	延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： `delay:{ show: 500, hide: 100 }`
container	string \| false 默认值：false	data-container	向指定元素追加提示工具。实例： container: 'body'

通过 JavaScript：

通过 JavaScript 触发单个具体或者所有提示工具（tooltip）：
```
$('#identifier').tooltip(options)
```

可以为每个提示元素设置自己的显示方式：

 <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>

也可以统一显示，默认效果：

<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：
$(function () { $("[data-toggle='tooltip']").tooltip(); });

方法	描述	实例
Options: .tooltip(options)	向元素集合附加提示工具句柄。	`$().tooltip(options)`
Toggle: .tooltip('toggle')	切换显示/隐藏元素的提示工具。	`$('#element').tooltip('toggle')`
Show: .tooltip('show')	显示元素的提示工具。	`$('#element').tooltip('show')`
Hide: .tooltip('hide')	隐藏元素的提示工具。	`$('#element').tooltip('hide')`
Destroy: .tooltip('destroy')	隐藏并销毁元素的提示工具。	`$('#element').tooltip('destroy')`

6、Bootstrap 标签页（Tab）插件

结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。《通过点链接显示内容》

用法

您可以通过以下两种方式启用标签页：

通过 data 属性：

<ul class="nav nav-tabs">
   <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>

data-toggle="tab"：添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。并添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式；

data-toggle="pill"：添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。并添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

data-target="#myModal" ，标签页需要用一个 data-target指定要切换的特定的模态框（带有 id="myModal"），或者 href="#identifier" （一个指向 DOM 中容器节点的 href。如果还需要用到链接（在浏览器不启用 JavaScript 时有用），就使用 data-target 属性代替 href="#"，让href="#"为具体链接。）

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="svn">...</div>
  <div class="tab-pane fade" id="ios">...</div>
  <div class="tab-pane fade" id="java">...</div></div>

通过 JavaScript：

您可以使用 Javscript 来启用标签页，如下所示：

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')})

下面的实例演示了以不同的方式来激活各个标签页：

// 通过名称选取标签页$('#myTab a[href="#profile"]').tab('show')
 // 选取第一个标签页$('#myTab a:first').tab('show') 
// 选取最后一个标签页$('#myTab a:last').tab('show') 
// 选取第三个标签页（从 0 开始索引）$('#myTab li:eq(2) a').tab('show')

例子：启动id='myTab'的<ul>中所有标签，并初始化先显示id='ejb'的内容：

7、Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

通过 data 属性：

data-toggle="popover"：向一个锚（不好用,用“工具提示（Tooltip）”）/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

 <button type="button" class="btn btn-default popover-show"        
title="Popover title" data-container="body"        
data-toggle="popover" data-placement="left"        
data-content="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>

<a href="#" data-toggle="popover" title="Example popover">
   请悬停在我的上面
</a>     //测试不好用。。。。

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript），若不用这个，也可以用JS挨个启动（见‘通过JavaScript’）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	向弹出框应用 CSS 褪色过渡效果。
html	boolean 默认值：false	data-html	向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\|function 默认值：top	data-placement	规定如何定位弹出框（即 top\|bottom\|left\|right\|auto）。当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title	string \| function 默认值：''	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：'hover focus'	data-trigger	定义如何触发弹出框： click\| hover \| focus \| manual。您可以传递多个触发器，每个触发器之间用空格分隔。
delay	number \| object 默认值：0	data-delay	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： `delay: { show: 500, hide: 100 }`
container	string \| false 默认值：false	data-container	向指定元素追加弹出框。实例： container: 'body'

通过 JavaScript：

通过 JavaScript 启用弹出框（popover）：

$('#identifier').popover(options)

<script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('#btn1').popover();});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
     $(function () { $(".popover-options a").popover({html : true });});
   </script>

方法	描述	实例
Options: .popover(options)	向元素集合附加弹出框句柄。	`$().popover(options)`
Toggle: .popover('toggle')	切换显示/隐藏元素的弹出框。	`$('#element').popover('toggle')`
Show: .popover('show')	显示元素的弹出框。	`$('#element').popover('show')`
Hide: .popover('hide')	隐藏元素的弹出框。	`$('#element').popover('hide')`
Destroy: .popover('destroy')	隐藏并销毁元素的弹出框。	`$('#element').popover('destroy')`

事件	描述	实例
show.bs.popover	当调用 show 实例方法时立即触发该事件。	`$('#mypopover').on('show.bs.popover', function () { // 执行一些动作... })`
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	`$('#mypopover').on('shown.bs.popover', function () { // 执行一些动作... })`
hide.bs.popover	当调用 hide 实例方法时立即触发该事件。	`$('#mypopover').on('hide.bs.popover', function () { // 执行一些动作... })`
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	`$('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作... })`

8、Bootstrap 警告框

Bootstrap 警告框是一个独立的组件，当用户操作上下文时为用户提供一些有效的信息警示框。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

用法

您可以有以下两种方式启用警告框的可取消（dismissal）功能：

通过 data 属性：

data-dismiss="alert"：

通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
   &times;</a>

如需在关闭时启用动画效果，请确保添加了 .fade 和 .in class—— <div class="alert alert-warning fade in">

通过 JavaScript：

通过 JavaScript 添加可取消功能：

方法	描述	实例
.alert('close')	该方法让所有的警告框都带有关闭功能。	`$('#identifier').alert('close');`
.alert('close')	关闭所有的警告框。	`$('.class').alert('close');`

<!--点击单个可消失/一次只消失一个 -->
<script>
$(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
    });
});
</script>

<!-- 点击消失一类-->
<script>
$(function(){
    $(".close").click(function(){
        $(".alert").alert('close');
    });
});
</script>

事件	描述	实例
close.bs.alert	当调用 close 实例方法时立即触发该事件。	`$('#myalert').bind('close.bs.alert', function () { // 执行一些动作...})`
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	`$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作...})`

9、Bootstrap 按钮（Button）插件

通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

用法：

通过 data 属性：

data-loading-text="Loading..."：向按钮添加加载状态（与Jquery连用）；

<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');
         });        
      });
   });  
</script>

data-toggle="button"：激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然）；

<button type="button" class="btn btn-primary" 
   data-toggle="button"> 单个切换</button>

data-toggle="buttons"：添加单选按钮组、复选框组的切换；

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option1"> 单选 1   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option2"> 单选 2   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> 单选 3   </label></div>

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 1   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 2   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 3   </label></div>

通过 JavaScript：

方法	描述	实例
button('toggle')	切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。	`$().button('toggle')`
.button('loading') .button('complete')	当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 、data-complete-text属性的值。	`$().button('loading') $().button('complete');`
.button('reset')	重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。	`$().button('reset')`
.button(string)	该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。	`$().button(string)`

10、Bootstrap 折叠（Collapse）插件

让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

通过 data 属性：

data-toggle="collapse"：添加到您想要展开或折叠的组件的链接上；

href 或 data-target="#collapseTwo"：添加到父组件，它的值是子组件的 id；

data-parent="#accordion"：把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上；

<div class="panel-group" id="accordion"> 

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          点击我进行展开，再次点击我进行折叠。第 2 部分        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.      
      </div>
    </div>
  </div>
</div>

通过 JavaScript：

通过 JavaScript 激活 collapse 方法，如下所示：需要与data-toggle="collapse"连用。

$('.collapse').collapse()

<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

方法	描述	实例
Options: .collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	`$('#identifier').collapse({ toggle: false})`
Toggle: .collapse('toggle')	切换显示/隐藏可折叠元素。	`$('#identifier').collapse('toggle')`
Show: .collapse('show')	显示可折叠元素。	`$('#identifier').collapse('show')`
Hide: .collapse('hide')	隐藏可折叠元素。	`$('#identifier').collapse('hide')`

事件	描述	实例
show.bs.collapse	在调用 show 方法后触发该事件。	`$('#identifier').on('show.bs.collapse', function () { // 执行一些动作...})`
shown.bs.collapse	当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	`$('#identifier').on('shown.bs.collapse', function () { // 执行一些动作...})`
hide.bs.collapse	当调用 hide 实例方法时立即触发该事件。	`$('#identifier').on('hide.bs.collapse', function () { // 执行一些动作...})`
hidden.bs.collapse	当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	`$('#identifier').on('hidden.bs.collapse', function () { // 执行一些动作...})`

<body>
<div class="panel-group" id="accordion">
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseexample">
               点击我进行展开，再次点击我进行折叠。--shown 事件 </a>
         </h4>
      </div>
      <div id="collapseexample" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. 
            Ad vegan excepteur butcher vice lomo.         </div>
      </div>
   </div></div><script type="text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('嘿，当您展开时会提示本警告');})
   });
</script> 
</body>

11、Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

用法

通过 data 属性：

属性 data-slide：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；

 <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>

属性data-slide-to： 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数；

 <!-- 轮播（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>

属性data-ride="carousel" ：属性用于标记轮播在页面加载时就开始动画播放；（不使用这个属性，默认不自动轮播）

<body><div id="myCarousel" class="carousel slide" data-ride="carousel" >

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

通过 JavaScript：

<script>
   $(function(){
      // 初始化轮播
      $(".start-slide").click(function(){
         $("#myCarousel").carousel('cycle');
      });
      // 停止轮播
      $(".pause-slide").click(function(){
         $("#myCarousel").carousel('pause');
      });
      // 循环轮播到上一个项目
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
      // 循环轮播到下一个项目
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
      // 循环轮播到某个特定的帧 
      $(".slide-one").click(function(){
         $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
         $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
         $("#myCarousel").carousel(2);
      });
   });</script>

方法	描述	实例
.carousel(options)	初始化轮播为可选的 options 对象，并开始循环项目。	`$('#identifier').carousel({ interval: 2000})`
.carousel('cycle')	从左到右循环轮播项目。	`$('#identifier').carousel('cycle')`
.carousel('pause')	停止轮播循环项目。	`$('#identifier')..carousel('pause')`
.carousel(number)	循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。	`$('#identifier').carousel(number)`
.carousel('prev')	循环轮播到上一个项目。	`$('#identifier').carousel('prev')`
.carousel('next')	循环轮播到下一个项目。	`$('#identifier').carousel('next')`

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。	`$('#identifier').on('slide.bs.carousel', function () { // 执行一些动作...})`
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。	`$('#identifier').on('slid.bs.carousel', function () { // 执行一些动作...})`

12、Bootstrap 附加导航（Affix）插件

附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。

用法

通过 data 属性：

data-spy="affix" ：如需向元素添加附加导航（Affix）行为，只需要向需要固定的元素添加 data-spy="affix" 即可。

data-offset-top="125"：定义固定的位置，始终让top=‘125’；

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <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>

选项名称	类型/默认值	Data 属性名称	描述
offset	number \| function \| object 默认值：10	data-offset	当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。

通过 JavaScript：

通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = 
            $('.bs-footer').outerHeight(true))
         }
      }})

<script type="text/javascript">
$(document).ready(function(){
    $("#myNav").affix({
        offset: { 
            top: 125 
     	}
    });});
</script>
</head>
<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" id="myNav">
                <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>
            <p>Lorem ips.</p>
        </div>
    </div>
</div>
</body>

ANKG

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的 jQuery 插件

一、介绍1、Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。使用：data属性---通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式；例如：data-toggle="modal"//如果需要用到选定元素、还用到...
复制链接

扫一扫

专栏目录