Javascript插件
模态框 LITE
类型
基本类型
启动方式一:通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
启动方式二:只需一行JavaScript代码,即可通过id myModal调用模态框: $('#myModal').modal(options)
框架对话框触发器
在新打开的模态对话框中使用
iframe
来加载一个全新的网页。
变化
选项
aria-labelledby="myModalTitle"属性指向模态框标题。
aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。
aria-describedby='myModelBody'属性用以指向描述信息。
通过对div.modal增加data-*选项来改变模态对话框。或通过js改变$('#myModal').modal({ keyboard: false })
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | boolean/static | true |
|
keyboard | boolean | true |
|
show | boolean | true |
|
remote | path | false |
如果提供了远程url地址,就会通过 jQuery的
|
方法和事件
方法 | 例子 | 描述 |
---|---|---|
.modal(options) |
$('#myModal').modal({ keyboard: false })
|
让你指定的内容变成一个模态对话框。接受一个可选的参数object. |
.modal('toggle') |
$('#myModal').modal('toggle')
|
手动打开或隐藏一个模态对话框。 |
.modal('show') |
$('#myModal').modal('show')
|
手动打开一个模态对话框。 |
.modal('hide') |
$('#myModal').modal('hide')
|
手动隐藏一个模态对话框。 |
事件 | 使用 | 描述 |
---|---|---|
show.bs.modal |
$('#myModal').on('show.bs.modal', functi'on () { // do something… })
|
当
show
方法被调用时,此事件将被立即触发。
|
shown.bs.modal |
$('#myModal').on('shown.bs.modal', function () { // do something… })
|
当模态对话框呈现到用户面前时(会等待过渡效果执行结束)此事件被触发。 |
hide.bs.modal |
$('#myModal').on('hide.bs.modal', function () { // do something… })
|
当
hide
方法被调用时,此事件将被立即触发。
|
hidden.bs.modal |
$('#myModal').on('hidden.bs.modal', function () { // do something… })
|
当模态对话框被隐藏(而且过渡效果执行完毕)之后,此事件将被触发。 |
改变模态框大小
通过重新定义.modal-dialog宽度
.modal-dialog {width:*}
来改变模态框大小
载入效果
目前有div.modal.fade和div.modal.in效果,需要 transition.js 支持。
下拉菜单 LITE
类型
基本类型
将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。
通过是否指定data-toggle='dropdown'来开关下拉菜单。
导航条下来菜单
标签下拉菜单
按钮下拉菜单
变化
弹出方式
下拉菜单的子菜单
小标题和禁用
通过li.dropdown-header增加小标题,为li增加.disabled来禁用。
标签页 LITE
一般结合导航使用。
类型
基本类型
通过
ul.nav + div.tab-content
的方式实现。
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
变化
导航样式
ul.nav.nav-pills
,通过修改ul的.nav-*来修改导航样式,具体见导航控件。
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
载入效果
为每个.tab-pane添加.fade可以让标签页具有淡入的特效。同时第一个标签页所对应的的内容区必须也添加.in
口是心非你深情的承诺
都随着西风飘渺远走
痴人梦话我钟情的倚托
就像枯萎凋零的花朵
星火燎原我热情的眼眸
曾点亮最灿烂的天空
晴天霹雳你绝情的放手
在我最需要你的时候
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
于是爱恨交错人消瘦
怕是怕这些苦没来由
于是悲欢起落人静默
等一等这些伤会自由
口是心非你矫情的面容
都烙印在心灵的角落
无话可说我纵情的结果
就像残破光秃的山头
浑然天成我纯情的悸动
曾奔放最滚烫的节奏
不可收拾你滥情的抛空
方法和事件
方法 | 例子 | 描述 |
.tab('show')
|
$("#myTab a:last").tab('show')
|
激活标签页和内容区 |
事件 | 使用 | 描述 |
show.bs.tab | $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) | 当要激活标签页和标签内容的时候激活该事件 |
shown.bs.tab | $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) | 当标签页和标签内容载入完毕后,激活该事件 |
关于
e.target
和
e.relatedTarget
分别表示当前激活标签对象和前一个标签对象。
可遍历对象查看对象各个属性和值:
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e)
{
$.each(e.target, function(n, value)
{
if(value) alert(n + ': ' + value);
})
})
提示消息 LITE
类型
一般工具提示
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam animi ipsum repellat temporibus have a officiis voluptatibus nostrum laborum debitis quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor sint at soluta nulla omnis itaque have a illum commodi numquam enim quod architecto molestias qui eveniet et amet have a laborum quisquam quam provident esse beatae quas impedit voluptas nostrum have a aspernatur deleniti suscipit blanditiis dignissimos temporibus eligendi quae corrupti have a pariatur quo! Enim, ipsa, odio quasi laboriosam provident id nihil maxime architecto dolorum quas harum veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia quam.
参数
不同方向的提示
注意
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说 你必须自己初始化他们 。
工具提示与按钮组和输入框组联合使用时需要一些特殊设置
在
.btn-group
或
.input-group
内的元素上使用工具提示时,你需要指定
container: 'body'
选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来
为了给
disabled
或
.disabled
元素添加工具提示,将需要增加工具提示的页面元素包裹在一个
<div>
中,然后对这个
<div>
元素应用工具提示。
用法
通过JavaScript激活工具提示:
$('#example').tooltip(options)
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to
top
by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 决定是否应用淡入淡出动画。 |
html | boolean | false | 是否允许展示html标签。 |
placement | string | function | 'top' |
top | bottom | left | right | auto.
显示的位置。 |
selector | string | false | 当需要为动态DOM应用工具提示,需要手动指定选择器。 |
title | string | function | '' | 标题。 |
trigger | string | 'hover focus' | click | hover | focus | manual. 触发方式。 |
delay | number | object | 0 |
如果指定,则应用延迟。
|
container | string | false | false |
决定相对位置的父级容器。
|
对单个工具提示使用data属性
使用data属性可以为单个工具提示指定额外选项,如下所示。
标记
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
方法
$().tooltip(options)
为一组元素应用工具提示。
.tooltip('show')
展示工具提示。
js$('#element').tooltip('show')
.tooltip('hide')
隐藏工具提示。
js$('#element').tooltip('hide')
.tooltip('toggle')
展示或隐藏工具提示。
js$('#element').tooltip('toggle')
.tooltip('destroy')
隐藏并销毁工具提示。
js$('#element').tooltip('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip |
当
show
方法被调用之后,此事件将被立即触发。
|
shown.bs.tooltip | 当工具提示展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.tooltip |
当
hide
方法被调用之后,此事件被触发。
|
hidden.bs.tooltip | 当工具提示被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
弹出框 LITE
插件依赖
弹出框依赖 工具提示插件 ,因此需要先加载工具提示插件。
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说 你必须自己初始化他们 。
弹出框在按钮组和输入框组中使用时,需要额外的设置
当提示框与
.btn-group
或
.input-group
联合使用时,你需要指定
container: 'body'
选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来
为了给
disabled
或
.disabled
元素添加弹出框时,将需要增加弹出框的页面元素包裹在一个
<div>
中,然后对这个
<div>
元素应用弹出框。
类型
静态类型
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
不带箭头指示
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
动态演示
不同方向
指定html元素作为弹出内容
Popover top
Lorem ipsum dolor. | Nisi, ad, quisquam! | Eum, excepturi, placeat. |
Lorem ipsum dolor. | Explicabo, nobis, nesciunt! | Sequi, doloribus, natus. |
Lorem ipsum dolor. | Ipsum, suscipit, quibusdam? | Minus, tenetur, neque. |
用法
通过JavaScript启用弹出框:
js$('#example').popover(options)
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 是否应用淡入淡出动画。 |
html | boolean | false | 是否允许内容中包含html。 |
placement | string | function | 'right' |
top | bottom | left | right | auto.
显示位置 |
selector | string | false | 当需要给动态的DOM元素应用工具提示时,需要手动制定选择器。 |
trigger | string | 'click' | click | hover | focus | manual,决定交互方式。 |
title | string | function | '' | 标题 |
content | string | function | '' | 内容 |
delay | number | object | 0 |
是否延迟展示。
|
container | string | false | false |
决定相对位置的父级容器。 |
为单个弹出框应用data属性
对单个弹出框可以通过data属性单独指定选项,如上所示。
方法
$().popover(options)
为一组元素初始化弹出框。
.popover('show')
显示弹出框。
js$('#element').popover('show')
.popover('hide')
隐藏弹出框。
js$('#element').popover('hide')
.popover('toggle')
展示或隐藏弹出框。
js$('#element').popover('toggle')
.popover('destroy')
隐藏并销毁弹出框。
js$('#element').popover('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.popover |
当
show
方法被调用之后,此事件将被立即触发。
|
shown.bs.popover | 当弹出框展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.popover |
当
hide
方法被调用之后,此事件被触发。
|
hidden.bs.popover | 当弹出框被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
折叠 LITE
需要 transition.js 支持。
.collapse
隐藏条目,
.collapse.in
显示条目。
调用方式一:仅仅通过向页面元素添加
data-toggle="collapse"
和
data-target
就可以为其赋予控制可折叠页面元素的能力。
data-target
属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加
.collapse
。
如果你希望可折叠页面元素的默认状态是展开的,请添加
.in
。
为了给一组可折叠页面元素添加控制器,添加
data-parent="#selector"
即可
调用方式二:手动触发
$(".collapse").collapse()
类型
结合面板
结合按钮
变化
方法和事件
方法 | 例子 | 描述 |
---|---|---|
.collapse(options) |
$('#myCollapse').collapse({ toggle: false })
|
赋予页面元素可折叠功能。接受一个可选的object作为参数。 |
.collapse('toggle') |
$('#myCollapse').collapse('toggle')
|
展示或隐藏一个可折叠的页面元素。 |
.collapse('show') |
$('#myCollapse').collapse('show')
|
展示一个可折叠页面元素。 |
.collapse('hide') |
$('#myCollapse').collapse('hide')
|
隐藏一个可折叠页面元素。 |
事件 | 使用 | 描述 |
---|---|---|
show.bs.collapse |
$('#myCollapse').on('show.bs.collapse', function () { // do something… })
|
当
show
方法被调用时,此事件将被立即触发。
|
shown.bs.collapse |
$('#myCollapse').on('shown.bs.collapse', function () { // do something… })
|
当可折叠页面元素显示出来之后(同时CSS过渡效果也已执行完毕),此事件被触发。 |
hide.bs.collapse |
$('#myCollapse').on('hide.bs.collapse', function () { // do something… })
|
当
hide
方法被调用时,此事件将被立即触发。
|
hidden.bs.collapse |
$('#myCollapse').on('hidden.bs.collapse', function () { // do something… })
|
当可折叠页面元素隐藏之后(同时CSS过渡效果也已执行完毕),此事件被触发。 |
轮播
使用方法一:通过data属性可以很容易的控制轮播的定位。
data-slide
可以接受控制播放位置的
prev
或
next
关键字。另外,还可以通过
data-slide-to
传递以
0
开始的幻灯片下标。
data-ride="carousel"
属性用来标记在页面加载之后即开始启动的轮播组件。
使用方法二:通过js手动启动轮播组件:
$('.carousel').carousel()
类型
基本类型
变化
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-interval=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval | number | 5000 | 幻灯片轮换的等待时间。如果为false,轮播将不会自动开始循环。 |
pause | string | "hover" | 鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。 |
wrap | boolean | true | 轮播是否持续循环。 |
方法和事件
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到
data-
之后,例如
data-interval=""
。
方法 | 描述 |
---|---|
.carousel(options)
|
初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。 |
.carousel('cycle')
|
从左到右循环各帧。 |
.carousel('pause')
|
停止轮播。 |
.carousel(number)
|
将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 |
.carousel('pre')
|
返回上一帧。 |
.carousel('next')
|
转到下一帧。 |
Bootstrap的轮播组件暴露了两个事件用于监听。
事件类型 | 描述 |
---|---|
slide.bs.carousel |
此事件在
slide
方法被调用之后立即出发。
|
slid.bs.carousel | 当所有幻灯片播放完之后被触发。 |
$('#myCarousel').on('slide.bs.carousel', function() {// do something…})
|
日期选择
日期选择插件可以帮助用户更方便准确的选择日期和时间。
在ZUI中包含的日期选择控件基于开源项目 DateTime Picker 定制开发。
类型
日期选择
时间选择
日期+时间选择
变化
禁用输入
只允许用户选择一个日期或时间,只需要给input
加上readonly
属性。
使用输入框组
输入框组可以添加额外的按钮来操作日期选择插件。
按钮中的.icon-remove
用来移除输入的日期。.icon-th
,.icon-calendar
,.icon-time
用来激活日期选择框。
Chosen
Chosen是用来增强单选列表和多选列表的更佳选择。
多项选择和单项选择
图标选择插件
为方便选择漂亮的图标,依赖于Chosen新作了图标选择插件。
富文本编辑器
类型
默认模式
简单模式
变化
简单风格
拖放
自动触发器
利用自动触发器能够不写一行Javascript代码做很多有趣的事情。
参数
参数名 | 说明 | 可选值 |
---|---|---|
trigger |
触发器类型 |
|
selector |
子代选择器,用来过滤触发条件 | 默认为null |
events |
触发事件名 | 绑定在触发器上的事件名称,默认为'click',即点击元素时触发 |
animate |
动画类型 | 当显示或隐藏元素时执行动画的类型
|
easing |
动画缓动函数 |
|
animateSpeed |
动画执行速度 |
|
preventDefault |
是否阻止事件默认行为 |
|
cancelBubble |
是否取消事件冒泡 |
|
target |
触发后事件执行的主体 | 使用jquery对象或者jquery选择器字符串来指定,如果为null ,则指定为触发器自身 |
before |
触发事件发生之前调用 | 指定一个函数在触发事件发生之前调用,如果在此函数内返回false ,则不执行后续触发过程 |
after |
触发事件发生之后调用 | 指定一个函数在触发事件发生之后调用 |
类型
显示或隐藏元素

切换css class
