类型

基本类型

启动方式一:通过在一个起控制器作用的页面元素(例如,按钮)上设置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

true 时,添加一个背景元素,且点击外部区域将其关闭。

false 时,不会添加背景元素,且点击外部区域不会关闭。

static 时,添加一个背景元素,且点击外部区域不会关闭。

keyboard boolean true

true 时,按esc键关闭模态框。

false 时,按esc不会关闭模态框。

show boolean true

true 时,初始化时即显示模态对话框。

true 时,初始化时不显示模态对话框。

remote path false

如果提供了远程url地址,就会通过 jQuery的 load 方法加载内容并注入到 .modal-body 中。如果你使用的是data属性api,你还可以使用 href 标签指定远程数据源。

方法和事件

方法 例子 描述
.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 支持。

一般结合导航使用。

类型

基本类型

通过 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.targete.relatedTarget 分别表示当前激活标签对象和前一个标签对象。

可遍历对象查看对象各个属性和值:

          $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e)
          {
              $.each(e.target, function(n, value)
              {
                  if(value) alert(n + ': ' + value);
              })
          })

类型

一般工具提示

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

如果指定,则应用延迟。

delay: { show: 500, hide: 100 }

container string | false false

决定相对位置的父级容器。 container: 'body'

对单个工具提示使用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…
    })

插件依赖

弹出框依赖 工具提示插件 ,因此需要先加载工具提示插件。

选择性加入的功能

出于性能方面的考虑,工具提示和弹框组件的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

是否延迟展示。

delay: { show: 500, hide: 100 }

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…
})

需要 transition.js 支持。

.collapse 隐藏条目, .collapse.in 显示条目。

调用方式一:仅仅通过向页面元素添加 data-toggle="collapse"data-target 就可以为其赋予控制可折叠页面元素的能力。 data-target 属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 .collapse 。 如果你希望可折叠页面元素的默认状态是展开的,请添加 .in 。 为了给一组可折叠页面元素添加控制器,添加 data-parent="#selector" 即可

调用方式二:手动触发 $(".collapse").collapse()

类型

结合面板

The content of Item1. .panel-collapse .collapse .fade

The content of Item2. .panel-collapse .collapse .in 默认显示。

The content of item3. .panel-collapse .collapse

结合按钮

Ho la la hu la la, hu la hu la.

变化

方法和事件

方法 例子 描述
.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过渡效果也已执行完毕),此事件被触发。

日期选择插件可以帮助用户更方便准确的选择日期和时间。

在ZUI中包含的日期选择控件基于开源项目 DateTime Picker 定制开发。

类型

日期选择

时间选择

日期+时间选择

变化

禁用输入

只允许用户选择一个日期或时间,只需要给input加上readonly属性。

使用输入框组

输入框组可以添加额外的按钮来操作日期选择插件。

按钮中的.icon-remove用来移除输入的日期。.icon-th,.icon-calendar,.icon-time用来激活日期选择框。

Chosen是用来增强单选列表和多选列表的更佳选择。

多项选择和单项选择

图标选择插件

为方便选择漂亮的图标,依赖于Chosen新作了图标选择插件。

类型

默认模式

简单模式

变化

简单风格

开始吧
拖到这里
拖到这里
拖到这里

利用自动触发器能够不写一行Javascript代码做很多有趣的事情。

参数

参数名 说明 可选值
trigger 触发器类型
  • "toggle"(默认值) 切换显示或隐藏状态
  • "show" 显示
  • "hide" 隐藏
  • "toggleClass" 增加或隐藏css class
  • "addClass" 增加css class
  • "removeClass"移除css class
  • function(){/*自定义执行的操作*/} 执行给定函数
selector 子代选择器,用来过滤触发条件 默认为null
events 触发事件名 绑定在触发器上的事件名称,默认为'click',即点击元素时触发
animate 动画类型 当显示或隐藏元素时执行动画的类型
  • "slide"(默认)
  • "fade"
  • "normal"
easing 动画缓动函数
  • "linear"(默认)
  • "swing"
animateSpeed 动画执行速度
  • "normal"(默认)
  • "slow"
  • "fast"
  • 400 指定数字,表示动画执行可用的时间
preventDefault 是否阻止事件默认行为
  • true(默认)
  • false
cancelBubble 是否取消事件冒泡
  • true(默认)
  • false
target 触发后事件执行的主体 使用jquery对象或者jquery选择器字符串来指定,如果为null,则指定为触发器自身
before 触发事件发生之前调用 指定一个函数在触发事件发生之前调用,如果在此函数内返回false,则不执行后续触发过程
after 触发事件发生之后调用 指定一个函数在触发事件发生之后调用

类型

显示或隐藏元素

切换css class

综合例子