Javascript插件

模态框

类型

基本类型

启动方式一：通过在一个起控制器作用的页面元素（例如，按钮）上设置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.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);
              })
          })

提示消息

类型

一般工具提示

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 apply a CSS fade transition to the tooltip
html boolean false Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'top' how to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if title attribute isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the tooltip to a specific element. Example: 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 apply a CSS fade transition to the tooltip
html boolean false Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right' how to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example .
trigger string 'click' how popover is triggered - click | hover | focus | manual
title string | function '' default title value if title attribute isn't present
content string | function '' default content value if data-content attribute isn't present
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the popover to a specific element. Example: container: 'body' . This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

为单个弹出框应用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()

类型

结合面板

Item 1

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

Item 2

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

Item 3

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是用来增强单选列表和多选列表的更佳选择。

多项选择和单项选择

图标选择插件

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

富文本编辑器

类型

默认模式

简单模式

变化

简单风格

拖放

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