来自 计算机前端 2019-12-28 09:41 的文章
当前位置: 美高梅4858官方网站 > 计算机前端 > 正文

【美高梅4858官方网站】[Bootstrap]7天深入Bootstrap(5)JavaScript插件,bootstrapjavascript

[Bootstrap]7天深入Bootstrap(5)JavaScript插件,bootstrapjavascript

在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition)、模态弹窗(Modal)、下拉菜单(Dropdown)、滚动侦测(Scrollspy)、选项卡(Tab)、提示 框(Tooltip)、弹出框(Popover)、警告框(Alert)、按钮(Button)、折叠(Collapse)、旋转轮播(Carousel)、定位浮标(Affix)。

 

由于各种加班,身心疲惫...

 

 

动画过渡

源文件:transition.js

使用的动画过渡效果全部使用了 CSS3的语法,所以IE6、IE7、IE8是不能用动画过渡效果。

 

默认带过渡效果的

  • 模态弹窗(Modal)的滑动和渐变效果;
  • 选项卡(Tab)的渐变效果;
  • 警告框(Alert)的渐变效果;
  • 旋转轮播(Carousel)的滑动效果。

 

源码

js源码

美高梅4858官方网站 1 function transitionEnd() { var el = document.createElement('bootstrap') var transEndEventNames = { WebkitTransition: 'webkitTransitionEnd', MozTransition: 'transitionend', OTransition: 'oTransitionEnd otransitionend', transition: 'transitionend' } for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } } return false // explicit for ie8 ( ._.) } transition.js部分源码

通过以上代码判断是否支持动画过渡效果。

CSS源码

美高梅4858官方网站 2.fade { opacity: 0; /*100%透明*/ -webkit-transition: opacity .15s linear; /*透明度,匀速变化0.15秒*/ transition: opacity .15s linear; } .fade.in { /*应用in样式,表示全部打开*/ opacity: 1; /*完全不透明*/ } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; /*减速运行*/ -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); /*向下移动25%的距离,从而产生向下的 动画视觉*/ -ms-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { /*页面完整显示时,回归到原始位置*/ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } fade css

 

模态弹窗

源文件:modal.js

模态弹窗(也叫popup,Bootstrap里称为Modal)是绝大部分交互式网站都需要的一种功能,一般有以下几种用法:

  • 提示信息、警告信息、大文本等;
  • 确认提示(多按钮);
  • 显示表单元素(一般使用ajax操作等功能);
  • 其他需要特殊显示的信息(如单击缩略图时放大图片)。

 

使用

弹窗组件使用了3层 div容器元素,其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗 的头(header)、内容(body)、尾(footer)3个部分,分别应用了3个样式:modal-header、modal-body、modal-footer。

使用data-target

美高梅4858官方网站 3<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">启动模态框</a> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">Modal Title</div> <div class="modal-body"> This is body. </div> <div class="modal-footer"> <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a> <a href="#" class="btn btn-success">保存</a> </div> </div> </div> </div> modal

 

js会控制在弹出modal之前,会加一个.modal-backdrop 用来设为灰色背景。

 

下拉菜单

源文件:dropdown.js

一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现。

 

实现原理:

  • 在网页加载的时候,对所有带有datatoggle="dropdown"样式的元素进行事件绑定。
  • 用户单击带有data-toggle="dropdown"样式的链接或按钮时,触发JavaScript事件代码。
  • Javascript事件代码在父容器(本例是:<li class="dropdown">)上加一个.open样式。
  • 默认隐藏的.dropdown-menu菜单在外部有了.open样式后,即可显示出来,从而达到预期的效果。

 

使用:

  • 菜单样式和菜单项保持一致(即按照第4节的要求编写)。
  • 被单击的链接或者按钮上需要应用data-toggle="dropdown"样式,以便在初始化的时候JavaScript可以监控单击事件

 

使用data-target

美高梅4858官方网站 4 <a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">启动下拉框</a> <div class="dropdown" id="d"> <a href="#" class="btn btn-default" data-toggle="dropdown">启动下拉框</a> <ul class="dropdown-menu"> <li><a>菜单1</a></li> <li><a>菜单2</a></li> </ul> </div> dropdown

 

滚动侦测

源文件:scrollspy.js

滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航 条中相应的导航项

 

使用:

  • 设置滚动容器,即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性。
  • 设置菜单链接容器,该容器的id(或样式)和data-target 属性所对应的选择符应一致。
  • 在菜单容器内,必须有.nav样式的元素,并且在其内部有 li元素,li内包含的a元素才是可以侦测高亮的菜单链接,即符 合.nav li > a这种选择符的条件。

 

body上用data-spy

美高梅4858官方网站 5<body data-target="#selector" data-spy="scroll"> <div id="selector"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="#one">one</a></li> <li class=""><a href="#two">two</a></li> <li class="divider"></li> <li class=""><a href="#three">three</a></li> </ul> </li> </ul> </nav> </div> <div style="overflow: auto"> <h4 id="fat">@fat</h4> <p>具体内容</p> <h4 id="mdo">@mdo</h4><p>具体内容</p> <h4 id="one">one</h4><p>具体内容</p> <h4 id="two">two</h4><p>具体内容</p> <h4 id="three">three</h4><p>具体内容</p> </div> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/bootstrap.js"></script> </body> data-spy

 

 

注意:

子菜单虽然会高亮,但不会打开,为了展示效果,需要手 动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用

 

选项卡

源文件:tab.js

就像我们平时使用的Windows操作系统里的选项卡设置一样,单击一个选项,下面就显示对应的选项卡面板

 

使用:

  • 选项卡导航和选项卡面板要同时有(但不一定要放在一 起)。
  • 导航链接里要设置data-toggle="tab",并且还要设置data-target="选择符"(或href="选择符"),以便单击的时候能找到该选择符所对应的tab-pane面板。
  • tab-pane要放在tab-content里面,要有id(或者CSS样式) 并与data-target="选择符"(或href="选择符")一致

 

美高梅4858官方网站 6 <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">home</a> </li> <li><a href="#concact" data-toggle="tab">concact</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <h3>Home</h3> </div> <div class="tab-pane" id="concact"> <h3>concact</h3> </div> </div> nav-tabs

 

 

提示框

源文件:tooltip.js

鼠标移动到特定的元素上时,显示相关的提示语。类似于abbr的title功能,不过效果更加漂亮实用。

 

使用

  • 指定的data-toggle="tooltip"属性
  • 然后再定义要显示的内容,可以在title也可以用data-original-title
  • js初始化.$('[data-toggle="tooltip"]').tooltip();

美高梅4858官方网站 7<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/bootstrap.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script> tooltip

 

弹出框

源文件:popover.js

弹出框其实就是一种特殊的提示框,相比来说只是多了一个title标题而已

 

使用

(弹出框插件的用法和提示框组件几乎一模一样),唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化,也和提示框插件一样,需要手动初始化

  • 指定的data-toggle="popover"属性
  • 然后再定义要显示的标题,可以在title也可以用data-original-title
  • 定义内容,可以在content也可以data-content
  • js初始化.$('[data-toggle=popover]').popover();

美高梅4858官方网站 8 <a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a> popover

 

警告框

源文件:alert.js

就是在警告框组件的基础上,提供了 单击x号关闭警告框的功能

 

使用

美高梅4858官方网站 9 <div class="alert alert-danger"> <h3>警告标题</h3> <hr /> <p>警告内容警告内容</p> <p> <button class="btn btn-default" data-dismiss="alert">关闭</button> </p> </div> alert

 

默认情况下,如果不设置data-target属性,则会关闭x号按钮元素所在的父元素容器,即外部的div元素。只需要保证设置了data-dismiss="alert"即可.

 

按钮

源文件:button.js

按钮插件提供了一组可以控制按钮多种状态的功能,比如,一个按钮有禁用状态、正在加载状态、正常状态等

 

使用

禁用状态在这里不再赘述。

正在加载和加载完成控制与显示

美高梅4858官方网站 10 <a id="aa" href="#" class="btn btn-default" data-loading-text="正在加载..." data-complete-text="已完成">提交</a> $('#aa').dblclick(function() { $('#aa').button('loading'); setTimeout(function () { $('#aa').button('complete'); }, 2000); }); $('#aa').click(function() { $('#aa').button('reset'); }); btn

 

 

折叠

源文件:collapse.js

当单击一个触发元素时,在另外一个可折叠区域进行显示(或隐藏),再次单击时可以反转显示状态。(经典的手风琴风格)

 

使用

    <!--  默认显示折叠区域-->
    <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a>
    <div id="demo" class="collapse in">折叠区域...</div>

   <!--  默认隐藏折叠区域-->
    <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button>
    <div id="demo" class="collapse ">折叠区域...</div>

 

 

轮播

源文件:carousel.js

旋转轮播(Carousel)这个插件有很多种译法,有人叫轮播,有人叫传送带

  <div data-ride="carousel" class="carousel slide" id="carousel-container"> 
   <!-- 图片容器 --> 
   <div class="carousel-inner"> 
    <div class="item">
     <img alt="第一张图" src="A" />
    </div> 
    <div class="item active">
     <img alt="第二张图" src="B" /> 
    </div> 
    <div class="item">
     <img alt="第三张图" src="C" /> 
    </div> 
   </div> 
   <!-- 圆圈指示符 --> 
   <ol class="carousel-indicators"> 
    <li data-slide-to="0" data-target="#carousel-container"></li> 
    <li data-slide-to="1" data-target="#carousel-container"></li> 
    <li data-slide-to="2" data-target="#carousel-container" class="active"></li> 
   </ol> 
   <!-- 左右控制按钮 --> 
   <a data-slide="prev" href="#carousel-container" class="left carouselcontrol">  </a> 
   <a data-slide="next" href="#carousel-container" class="right carouselcontrol">  </a> 
  </div>

带有data-ride="carousel"的div就是轮播插件的容器,容器id为carousel-container,稍后会用到。

还有两个样式,其中carousel样式做样式容器,而slide样式和fade类似,用来定义轮播图片的时候是否有特效.

 

针对图片,轮播插件还提供了一个字幕说明样式(carousel-caption),紧接着img元素定义即可。示例如下

<div class="item active"> 
   <img src="..." alt="..." /> 
   <div class="carousel-caption"> 
    <h3>标题</h3> 
    <p>描述...</p> 
   </div> 
 </div>

 

定位浮标

源文件:affix.js

 

Affix的效果就像其官方网站左边的导航链接一样。

<!—或者分开设置offset -- >

<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >导航内容 </div>

<!—合并设置offset -- >

<div data-spy="affix" data-offset="60" >导航内容</div>

 

data-offset-top表示一个完整的新网页,从顶部向下拖动滚动条(也就是网页向上滚动)这个像素以后,

而data-offset-bottom则表示距离最底部还有多少距离(本例60像素)以后,就要开始继续滚动了.

 

在bs3.X中, 提供了12种JavaScript插件,分别是:动画过渡(Transition)、模态弹窗(Mo...

javascript组件

 

(1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件。

bootstrap框架里的轮播图,他有自己的js文件。

JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js)。

建议使用压缩版的 JavaScript 文件

bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。

 

(2)组件的 data 属性

data-toggle:指的是什么事件触发

data-target :  绑定其效果的对象

(3)插件之间的依赖关系

导入bootstrap.min.js 之前 要导入jquery.js

 

一.模态框 modal.js  -----  以弹出对话框的形式出现 。

 

点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

 

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

     模态按钮

</button>

 

<!-- Modal -->   fade的过渡效果是加在madal中的,不是加在button上!

 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 

 <!-- 决定模态框的大小和位置 ,通过添加modal-lg类改变大小-->

 

  <div class="modal-dialog modal-lg">

 

    <!-- 模态内容部分 -->

 

    <div class="modal-content">

 

      <!-- (1)header -->

 

      <div class="modal-header">

         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>

         <h4 class="modal-title" id="myModalLabel">表单提交</h4>

       </div>

       <!-- (2)内容 -->

 

      <div class="modal-body">

 

          <input type="text" class ="form-control">

 

      </div>

 

      <!-- (3)尾部 -->

 

      <div class="modal-footer">

 

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

 

        <button type="button" class="btn btn-primary">Save changes</button>

 

      </div>

 

    </div>

 

  </div>

 

</div>

 

 

 

 

增强模态框的可访问性

 

务必为 .modal 添加 role="dialog" 属性,aria-labelledby="myModalLabel" 属性用于只想模态框的标题栏,aria-hidden="true" 用于通知辅助性工具略过模态框的 DOM元素。

 

另外,你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

 

可选尺寸模态框提供了两个可选尺寸(modal-lg/modal-sm),通过为 .modal-dialog 增加一个样式调整类实现。

 

 

 

 

 

二.下拉菜单---dropdown.js

 

<!-- 小的下拉按钮 -->

<div class="dropdown">

   <!-- (1)点击按钮-->

  <button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-success btn-lg">

    按钮

   <span class="caret"></span>

   </button>

   <!-- (2)菜单目录 -->

  <!-- <ul class="dropdown-menu" >

     <li><a href="#">百度一下</a></li>

 

  </ul> -->

 

  <div class="dropdown-menu">adnajdhajkd</div>

 

</div>

 

<!-- 自己来写一个 -->

<!-- 这是我总结的超简单写法 -->

<div class="dropdown">

    <button class= "btn btn-danger" data-toggle="dropdown">按钮</button>

 

   <div class="dropdown-menu" role ="menu">这是面板</div>

 

</div>

 

 

 

滚动监听--- scrollspy.js

 

     1.给想要滑动的区块设置 data-spy="scroll"

 

     2.给设置data-spy=“scroll”的区块设置  相对定位

 

 

 

<!-- 系统提供的源代码 -->

<!-- <body data-spy="scroll" data-target=".navbar-example">

  ...

  <div class="navbar-example">

    <ul class="nav nav-tabs" role="tablist">

      ...

    </ul>

  </div>

  ...

 

</body> -->

 

 

 

<!-- 自己写 -->

 

<!-- (2)做一个简单的导航 -->

<div class="navbar-example">

     <!-- 这是一个导航 -->

    <ul class="nav nav-tabs" role="tablist">

       <li role="presentation" class="active"><a href="#ios">ios</a></li>

       <li role="presentation"><a href="#html">html</a></li>

       <li role="presentation"><a href="#php">php</a></li>

 

    </ul>

 

</div>

 

<!-- (1)这是滑动监听空间 -->

<!-- 核心是:监听控件里的滑动到一个锚点,然后修改这个锚点的active -->

<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">

   <!-- (3)设置id对象让与导航栏里的标签对应起来,导致标签可以定位行(锚点特性),滑动监听到某个位置,回设导航栏上的相对应a标签的active -->

 

  <h3 id ="ios">IOS</h3>

 

  <p>...</p>*n

 

  <h3 id ="html">HTML</h3>

 

    <p>...</p>*n

 

  <h3 id ="php">PHP后台</h3>

 

    <p>...</p>*n

 

 

 

三.标签页 Togglable tabs--- tab.js

 

 

 

 

 <!-- <ul class="nav nav-tabs" role = "tablist">

        <li role="presentation" class="active"><a href="#ios" role="tab" data-toggle="tab">Home</a></li>

        <li role="presentation" role="tab" ><a href="#android" data-toggle="tab">Profile</a></li>

 

        <li role="presentation" role="tab" ><a href="#html" data-toggle="tab">Messages</a></li>

 

      </ul> -->

 

 <!-- 2.给他设置功能面板 -->

 

 <!-- Tab panes -->

 <!-- <div class="tab-content">

         <div role="tabpanel" class="tab-pane active" id="ios">这是ios面板</div>

         <div role="tabpanel" class="tab-pane" id="android">这是安卓面板</div>

 

         <div role="tabpanel" class="tab-pane" id="html">这是HTML面板</div>

 

     </div> -->

 

 < !-- 精简版 -->

 

<!-- 1、

 

(1)给a标签设置 data-toggle ="tab"

 

 (2) 给a设置对应的锚点id

 

     -->

 

<a href="#ios" class="btn btn-danger" data-toggle="tab">iOS</a>

<a href="#android" class="btn btn-danger" data-toggle="tab">安卓</a>

<a href="#html" class="btn btn-danger" data-toggle="tab">HTML</a>

 

<!-- 2.给他设置功能面板 -->

 

<!-- Tab panes -->

 

<div class="tab-content">

   <p id="ios" class="tab-pane active" >这是ios面板</p>

本文由美高梅4858官方网站发布于计算机前端,转载请注明出处:【美高梅4858官方网站】[Bootstrap]7天深入Bootstrap(5)JavaScript插件,bootstrapjavascript

关键词: