Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

7,145

Bootstrap:JS插件学习

  • 2014-01-03
  • 暂无评论

过度效果:transition.js

只需要简单的引入,是对css过度效果的模拟,也被用来检测当前浏览器对css过渡效果是否支持

模态框:modal.js

通过设定:
  • data-toggle="modal"设定模态操作
  • data-target="选择器"设定对应操作的模态DOM
  • href="选择器"即可
可访问性:
  • role="dialog"
  • aria-labelledby="id"对话框标题
  • aria-describedby="id"对话框描述信息
  • aria-hidden="true"忽略该DOM元素
js调用:
$('选择器').modal(option|string);
option:
  • backdrop:背景遮罩层
    • true:显示背景遮罩层
    • false:关闭背景遮罩层
  • static:显示北京遮罩层,并且点击层不关闭模态对话框
  • keyboard:用esc关闭模态框
    • true:启用
    • false:关闭
  • show:初始化后显示模态框
    • true:启用
    • false:暂不显示
  • remote:读取异步页面数据
    • false:不读取
  • string:
    • toggle:启动或者关闭模态框
    • show:启动模态框
    • hide:关闭模态框
事件:
  • show.bs.modal:启用模态框前
  • shown.bs.modal:启用模态框后
  • hide.bs.modal:关闭模态框前
  • hidden.bs.modal:关闭模态框后

下拉菜单:dropdown.js

(可以为所有东西添加下拉菜单:导航条,标签页,胶囊式按钮)

HTML:
  • 在需要显示下拉菜单的元素后添加
通过设定:
  • data-toggle="dropdown"设定下拉框操作
  • data-target="#"用来保证连接的可访问性,替代href="#"
可访问性:
  • role="menu"
js调用:
$('选择器').dropdown(string);
string:
  • toggle:打开或者关闭下拉菜单
事件:
  • show.bs.dropdown:启用下拉菜单前
  • shown.bs.dropdown:启用下拉菜单后
  • hide.bs.dropdown:关闭下拉菜单前
  • hidden.bs.dropdown:关闭下拉菜单后

滚动监听:scrollspy.js

通过设定:
  • data-spy="scroll"添加监听功能
  • data-target="选择器"为Bootstrap中.nav组件的父元素
  • 导航内的链接#xxx,页面必须存在与该锚点相同id的DOM元素
js调用:
$('选择器').scrollspy(option|string);
option:
  • target:监听所对应的对象
  • offset:从上滚动的偏移量,可以设置在data-offset
  • string:
    • refresh:每当页面中增加删除页面元素时,都需要调用该操作
事件:
  • activate.bs.scrollspy:当滚动监听到某个元素为active时

标签页:tab.js

HTML:
  • 为ul添加.nav .nav-tabs即可赋予Bootstrap的标签页样式
  • 为ul添加.nav .nav-pills即可赋予Bootstrap的胶囊式标签页样式
  • 切换的内容包裹在<div class="content"></div>
  • 每个内容添加.tab-pane
  • 添加.fade开启淡入特效
  • 添加.in让初始化时具有淡入特效
通过设定:
  • data-toggle="tab"为该元素绑定标签功能
  • data-toggle="pill"为该元素绑定标签功能
  • 导航内的连接为#xxx,必须存在与该锚点相同id的DOM元素,并且在tab-content内
js调用:
$('选择器').tab(string);
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
string:
  • show:激活单独标签页
事件:
  • show.bs.tab:激活单独标签页前
  • shown.bs.tab:激活单独标签页后

工具提示:tooltip.js

(data-api需要单独初始化)

注:

  1. btn-group或input-group内的元素,需要添加container:'body'
  2. disabled元素需要包裹在<div>中,然后对该div使用提示
js调用:
$('选择器').tooltip(option|string);
option:
  • animation:开启过度动画
    • true:开启
    • false:关闭
  • html:添加html提示,false会调用jQuery的text方法添加内容(如果担心XSS攻击使用text)
    • true:开启
    • false:关闭
  • placement:提示位置
  • top,bottom,left,right:定位
  • auto:动态设置:auto left
  • selector:选择器
    • false:为当前元素
  • selector:以该元素为对象显示tooltip
  • title:设置title,如果默认title属性没有设置则调用该值
  • trigger:触发事件,可以设置多个触发事件,用空格连接
    • click|hover|focus|manual:该事件触发tooltip显示
  • delay:显示和隐藏的延迟时间,默认是0
  • container:将tooltip添加到该元素内
    • false:当前元素
  • string:
    • toggle:启动或者关闭提示
    • show:启动提示
    • hide:关闭提示
    • destroy:关闭并销毁提示

事件:

  • show.bs.tooltip:在显示提示前
  • shown.bs.tooltip:在显示提示后
  • hide.bs.tooltip:在关闭提示前
  • hide.bs.tooltip:在关闭提示后

弹出框:popover.js

(data-api需要单独初始化)

依赖:依赖于tooltip.js插件
注:
  1. btn-group或input-group内的元素,需要添加container:'body'
  2. disabled元素需要包裹<div>在中,然后对该div使用提示
js调用:
$('选择器').popover(option|string);
option:
  • animation:开启过度动画
    • true:开启
    • false:关闭
  • html:添加html提示,false会调用jQuery的text方法添加内容(如果担心XSS攻击使用text)
    • true:开启
    • false:关闭
  • placement:提示位置
    • top,bottom,left,right:定位
  • auto:动态设置:auto left
  • selector:选择器
    • false:为当前元素
  • selector:以该元素为对象显示tooltip
  • title:设置title,如果默认title属性没有设置则调用该值
  • trigger:触发事件,可以设置多个触发事件,用空格连接
    • click|hover|focus|manual:该事件触发tooltip显示
  • delay:显示和隐藏的延迟时间,默认是0
  • container:将tooltip添加到该元素内
    • false:当前元素
  • string:
    • toggle:启动或者关闭提示
    • show:启动提示
    • hide:关闭提示
    • destroy:关闭并销毁提示
事件:
  • show.bs.popover:在显示弹出前
  • shown.bs. popover :在显示弹出后
  • hide.bs. popover :在关闭弹出前
  • hide.bs. popover :在关闭弹出后

警告框:alert.js

HTML:
  • 为警告框添加动画效果
  • 添加.fade开启淡入特效
  • 添加.in让初始化时具有淡入特效
通过设定:
  • data-dismiss="alert"为警告框添加关闭功能
js调用:
$('选择器').alert(string);
  • 为所有警告框添加关闭功能
string:
  • close:关闭警告框
事件:
  • close.bs.alert:关闭警告框前
  • closed.bs.alert:关闭警告框后

按钮:button.js

(完善按钮的状态控制)

注:

  • 添加autocomplete="off"解决火狐的按钮自动禁用的状态
通过设定:
  • 加载状态:data-loading-text='加载文字',按钮设置为禁用状态,并将文字切换为加载文字
  • 状态切换:data-toggle="button",按钮可以通过点击切换状态
对于单选和多选控件:
  • 将其包裹在<div class="btn-group" data-toggle="buttons"></div>中
  • 并对将input包裹在<label class="btn btn-primary"></label>
js调用:
$('选择器').button(string);
string:
  • toggle:开启或者关闭按钮状态
  • loading:将按钮设定为加载状态
  • reset:重置按钮状态
  • string:重置按钮状态,并设定按钮文本为传入值

折叠:collapse.js

(对支持则跌功能的组件,添加样式和灵活的支持:accordions和导航)

依赖:依赖于transition.js

通过设定:
  • data-toggle="collapse"开启折叠页面元素的能力
  • data-target="选择器"
  • href="选择器"也可
  • 为可折叠的页面元素添加collapse
  • data-parent="选择器",实现切换折叠效果,赋予统一的父元素
js调用:
$('选择器').collapse(option|string);
option:
  • parent:实现切换折叠效果,赋予统一的父元素
  • toggle:是否开启折叠效果
    • true:开启
    • false:不开启
  • string:
    • toggle:切换折叠状态
    • show:展开该元素
    • hide:隐藏该元素

事件:

  • show.bs.collapse:折叠显示前
  • shown.bs.collapse:折叠显示后
  • hide.bs.collapse:折叠隐藏前
  • hidden.bs.collapse:折叠隐藏后

轮播:carousel.js

注:
  • IE8/9不支持过度动画效果
HTML:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item"><img alt="" /></div>
</div>
</div>
</div>
<div class="carousel-caption"></div>

通过设定:

  • data-ride="carousel":启动轮播功能
  • data-target="选择器"设定操作轮播的对象
  • href=
左右控件:
  • data-slide="prev"绑定左切换
  • data-slide="next"绑定右切换
单项切换:
  • dataslide-to="int"从0开始,绑定每个元素
  • active:当前激活样式
js调用:
$('选择器').carousel(option|string);
option:
  • interval:轮换等待事件,默认:5000(ms)
    • false:不自动开始循环
  • pause:暂停的触发事件
  • hover:鼠标停留则暂停,离开则启动
  • wrap:是否持续循环
    • true:开启
    • false:关闭
  • string:
    • cycle:从左到右循环
    • pause:暂停轮播
    • number:指定到对应帧,从0开始
      • prev:返回到上一帧
      • next:转到下一帧
事件:
  • slide.bs.carousel:切换前调用
  • slid.bs.carousel:播放完成后调用

页面定位:affix.js

通过设定:
  • data-spy="affix"开启affix
  • data-offset-top="200"定位浮动
注:
  • 需要设定affix,affix-top,affix-bottom3种状态的样式,插件不设定
  • affix是正常时的样式,fixed定位
  • affix-top是初始状态的样式
  • affix-bottom是停止时的样式,absolute定位
js调用:
$('选择器').affix(option);
option:
  • offset:{top:,bottom:}


back up ↑

无觅相关文章插件,快速提升流量