说明 #

YFjs 组件库融合了丰富的第三方组件，并根据实际使用情况对这些组件进行了一些调整及部分功能性的增强、Bug修复等。

该文档页面下的所有组件在使用时都需要手动引入。

在阅览文档时，组件库会提示配置项或参数是 PlainObject 类型。那么：

Bootstrap风格组件 ( 16 ) #

以下 Bootstrap 的原有组件基于 v3.3.4 版本进行了调整，有的添加了更多的功能，所以不再与 Bootstrap 中的内容保持版本同步。其他第三方 Bootstrap 风格的组件会注明当前采用的版本，并尽量保持内容的同步更新。

模态框 bs/modal #

ID: bs/modal

在 Bootstrap 3 的模态框插件 基础上进行了功能增强，支持自动生成模态框元素并弹出；支持非模态设置；支援加载远程内容；支持警告框(alert)、询问框(confirm)、加载框(loading)、提示框(info)等多种形式的模态框。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入模态框插件依赖。

define(['bs/modal'], function(Modal) {
    // Now you can use Modal plugin via Modal variable.
});

当然，也可以直接引入使用。

require(['bs/modal'], function(Modal) {
    // Now you can also use Modal plugin via Modal variable.
});

示例 #

模态框示例效果可以前往 模态框示例 页面查看。

通用框 #

直接使用 Modal.show() 方法即可快速弹出一个模态框。

Modal.show({
    title: 'Dialog Title',
    message: 'Dialog Content',
    onshown: function(dialog) {
        // init dialog content
    },
    buttons: [{
        label: "取消",
        action: function(dialog) {
            dialog.close();
        }
    }, {
        label: "确定",
        cssClass: "btn-primary",
        action: function(dialog) {
            // do something
            dialog.close();
        }
    }]
});

加载远程内容 #

使用 remote 配置项可以加载远程内容。

Modal.show({
    remote: 'remote.html'
});

如果在请求远程内容需要传递参数等一些额外的内容，可以像使用 ajax 那样设置 remote 配置项。

Modal.show({
    remote: {
        url: 'remote.html',
        data: {param: '111'}
    }
});

另外，remote 配置项还支持设置为 Promise 或 Deferred 对象。

Modal.show({
    remote: function(dialog) {
        var def = $.Deferred();
        setTimeout(function() {
            def.resolve("Dialog content from promise.");
        }, 300);
        return def.promise(); // OR return def;
    }
});

配置项 #

通用形式的模态框可以使用以下配置项：

type #

String

模态框类型。可选为

• Modal.TYPE_DEFAULT：默认样式弹出框。

• Modal.TYPE_INFO：应用 Bootstrap 下 info 分类样式的弹出框。

• Modal.TYPE_PRIMARY：应用 Bootstrap 下 primary 分类样式的弹出框。

• Modal.TYPE_SUCCESS：应用 Bootstrap 下 success 分类样式的弹出框。

• Modal.TYPE_WARNING：应用 Bootstrap 下 warning 分类样式的弹出框。

• Modal.TYPE_ERROR：应用 Bootstrap 下 danger 分类样式的弹出框。

• 默认为 Dialog.TYPE_PRIMARY。

另可设为任意字符串，自定义样式类型。

title #

String

模态框标题。

message #

String | Function

模态框内容。

remote #

PlainObject | Promise | Function

模态框远程内容。可为Ajax配置项、Promise对象或返回相应类型值的方法。

nl2br #

Boolean

是否将内容中的换行符自动转化为换行标签 <br>。默认为 false。

buttons #

Array[Object]

模态框按钮设置。数组类型，可设置任意多的按钮。每项可设置配置项如下：

• id: 按钮的 ID。可以通过模态框对象的 .getButton() 方法获取指定 ID 的按钮的jQuery元素对象。

• icon: 按钮的图标样式 class。默认为 null。

• label: 按钮的文本内容。

• cssClass: 按钮的样式 class。

• autospin: 设置点击按钮后是否自动显示加载中的转圈动画，布尔类型，在设置 icon 时生效。可以通过按钮的jQuery元素对象的 .stopSpin() 方法停止动画效果。

• hotkey: 按钮热键(全小写)。应设为相应的 keyCode (如回车的 keyCode 为13，字符A的 keyCode 为65)。

• clickTimeout: 按钮的防抖处理间隔时间（单位 ms）。模态框属性 BUTTON_CLICK_TIMEOUT 设置了全局的防抖处理间隔时间（默认为 1s）。防抖处理即 “按钮在较短的间隔时间内只会响应一次点击/热键事件”。

• action: 按钮被点击或触发热键后的回调方法。传入模态框对象参数。若返回 Ajax 请求对象或一个 Promise 对象，则按钮将在上述异步过程开始时自动禁用按钮，在异步过程响应后自动启用按钮。

data #

Object

模态框绑定数据。可以通过模态框对象的 .getData() 方法获取指定数据（未传入参数则返回所有数据）。

onshow #

Function

模态框弹出之前（尚未执行切入动画）触发回调。传入模态框对象参数。

onshown #

Function

模态框弹出之后（已执行切入动画且内容已显示）触发回调。传入模态框对象参数。

onhide #

Function

模态框关闭之前（尚未执行切出动画）触发回调。传入模态框对象参数。

onhidden #

Function

模态框消失之后（已执行完切出动画且元素已从文档中移除）触发回调。传入模态框对象参数。

onloaded #

Function

存在 remote 配置项时生效，等同于 onshown 配置项。传入模态框对象参数。

backdrop #

Boolean | Array

模态效果。设为 false 及其等效值时不显示模态效果。另可设为数组，类似于[模态背景色, 模态背景透明度]，如 ['#fff', 0.5]。默认为 'static'（显示默认模态效果）。

position #

String | Array

模态框初始位置。可设为字符串 "左位置 上位置" 或数组 [左位置, 上位置]，规则如下：

• 左位置 可设为 left|center|right 三者之一，上位置 可设为 top|center|bottom 三者之一。左位置和上位置顺序可任意

• 左位置 和 上位置 亦可设为百分比字符串值（如"15%"）、px/em单位字符串值(如"200px"或"200em")、数字（如200，单位默认为px）

• 若 左位置 和 上位置 值相等，则可简写为 "[左&上位置]"，如 "center center" 或 ["center","center"] 可简写为 "center" 或 ["center"]，"200 200px" 可简写为 ["200"] 或者 ["200px"] 等

• 默认值为 'center'（居中）

size #

Number | String | PlainObject

模态框大小。若为数字(字符串)或px、(r)em、%结尾的字符串，将直接作为弹出框宽度进行设置；否则，将作为模态框的 class 样式。另支持设为对象，允许配置项为：

• width: 弹出框的宽度。数字(字符串)或px、(r)em、%结尾的字符串

• height: 弹出框的高度。数字(字符串)或px、(r)em、%结尾的字符串

• minWidth: 弹出框的最小宽度，常配合 width:'auto' 使用。数字(字符串)或px、(r)em、%结尾的字符串

• maxWidth: 弹出框的最大宽度。数字(字符串)或px、(r)em、%结尾的字符串

• minHeight: 弹出框的最小高度，常配合 height:'auto' 使用。数字(字符串)或px、(r)em、%结尾的字符串

• maxHeight: 弹出框的最大高度。数字(字符串)或px、(r)em、%结尾的字符串

• 默认为 Modal.SIZE_NORMAL（默认 class 样式）

cssClass #

String

模态框的 class 样式。

closable #

Boolean

是否显示模态框的"关闭"图标按钮并允许自动关闭模态框。默认为 true。

closeByBackdrop #

Boolean

是否允许点击模态效果背景时关闭弹出框（存在模态效果时生效），closable 设为 true 时生效。backdrop 设为数组值或 "static" 时默认为 false,

closeByKeyboard #

Boolean

是否响应键盘的 Esc 键关闭模态框，closable 设为 true 时生效。默认为 true。

draggable #

Function

是否允许拖拽。默认为 false（不允许拖拽）。

警告框 #

使用 Modal.alert() 方法可以弹出一个警告形式的模态框。

Modal.alert('Hi Apple!', function() {
    // after closed.
});

另外，可以使用更多的配置项来丰富警告模态框。

Modal.alert({
    title: 'WARNING',
    message: 'Warning! No Banana!',
    icon: false,
    type: Modal.TYPE_WARNING,
    closable: true,
    draggable: true,
    buttonLabel: 'Roar! Why!',
    callback: function(result) {
        alert('Result is: ' + result);
    }
});

配置项 #

警告形式的模态框可以使用以下配置项：

type #

同通用框的 type 配置项。

警告模态框类型。默认为 Modal.TYPE_PRIMARY。

title #

同通用框的 title 配置项。

警告模态框标题。默认为 '警告提示'。

message #

同通用框的 message 配置项。

警告模态框内容。

icon #

Boolean | String

警告模态框内容图标。布尔或字符串类型。设为 false 时不显示图标，设为字符串时，将作为图标的额外 class 样式，可以通过 .modal-icon-alert.xxx 选择器更改图标样式。默认为 true。

closable #

同通用框的 closable 配置项。

是否显示警告模态框的"关闭"图标按钮。默认为 false 。

draggable #

同通用框的 draggable 配置项。

是否允许拖拽。默认为 false (不允许拖拽)。

buttonLabel #

String

警告模态框按钮文本内容。默认为 '确定'。

callback #

Function

警告模态框关闭后的回调方法。如果是通过点击 "确定" 按钮关闭了警告框，传入的参数 result 为 true，否则，为 false。

询问框 #

使用 Modal.confirm() 方法可以弹出一个询问形式的模态框。

Modal.confirm('Hi Apple, are you sure?', function(bsure) {
    if (bsure) {
        // 点击了"确定"按钮
    } else {
        // 点击了"取消"按钮
    }
});

另外，可以使用更多的配置项来丰富询问模态框。

Modal.confirm({
    title: 'WARNING',
    message: 'Warning! Drop your banana?',
    type: Modal.TYPE_WARNING,
    closable: false,
    draggable: true,
    btnCancelLabel: 'Do not drop it!',
    btnOKLabel: 'Drop it!',
    btnOKClass: 'btn-warning',
    callback: function(bsure) {
        if (bsure) {
            // 点击了"确定"按钮
        } else {
            // 点击了"取消"按钮
        }
    }
});

配置项 #

询问形式的模态框可以使用以下配置项：

type #

同通用框的 type 配置项。

询问模态框类型。默认为 Modal.TYPE_PRIMARY。

title #

同通用框的 title 配置项。

询问模态框标题。默认为 '确认提示'。

message #

同通用框的 message 配置项。

询问模态框内容。

icon #

Boolean | String

询问模态框内容图标。布尔或字符串类型。设为 false 时不显示图标，设为字符串时，将作为图标的额外 class 样式，可以通过 .modal-icon-confirm.xxx 选择器更改图标样式。默认为 true。

closable #

同通用框的 closable 配置项。

是否显示询问模态框的"关闭"图标按钮。默认为 true 。

draggable #

同通用框的 draggable 配置项。

是否允许拖拽。默认为 false (不允许拖拽)。

btnCancelLabel #

String

询问模态框"取消"按钮文本内容。默认为 '取消'。

btnOKLabel #

String

询问模态框"确定"按钮文本内容。默认为 '确定'。

btnOKClass #

String

询问模态框"确定"按钮 class 样式。默认为 null。

callback #

Function

询问模态框关闭后的回调方法。如果是通过点击 "确定" 按钮关闭了询问框，传入的参数 bsure 为 true，否则，为 false。

加载框 #

使用 Modal.loading() 方法可以弹出一个加载效果的模态框。

Modal.loading('5秒后手动关闭', function() {
    // Loading done.
});
// 手动关闭加载效果模态框
setTimeout(function() {
    Modal.loading('remove');
}, 5000);

也可以使用传入配置项的方式。

Modal.loading({
    message: '5秒后手动关闭',
    delay: 80,
    onhidden: function() {
        // Loading done.
    }
});
// 手动关闭加载效果模态框
setTimeout(function() {
    Modal.loading('remove');
}, 5000);

配置项 #

加载效果的模态框可以使用以下配置项：

message #

同通用框的 message 配置项。

加载效果模态框的文本内容。默认为 null。

size #

Number | String

加载效果图标的大小。默认为 32(px)。

minin #

Number

加载效果模态框最小显示时间。若销毁时刻距显示时刻的时间间隔小于这个值，则自动延时至最小时间间隔。默认为 300(ms)。

loader #

String | PlainObject

加载效果设置。若为图像地址，则使用指定图像作为加载效果；为其他有效值时，作为加载效果容器的 class 样式。默认为 null，使用默认的 loader 插件。

beginFrame #

Number

为默认加载效果时生效，等同于 loader 插件的 data-frame 属性配置项。默认为 1。

delay #

Number

为默认加载效果时生效，等同于 loader 插件的 data-delay 属性配置项。默认为 150。

onshow #

同通用框的 onshow 配置项。

加载效果模态框显示之前调用回调。传入模态框对象参数。

onhidden #

同通用框的 onhidden 配置项。

加载效果模态框关闭之后调用回调。传入模态框对象参数。

过程框 #

使用 Modal.processing() 方法可以弹出一个表示处理过程的模态框。

var processor = Modal.processing('正在处理...');

处理过程的模态框需要自行手动关闭，并且可以根据处理结果的不同调用不同效果形式的关闭方法。

// 显示警告处理结果（延迟模拟处理过程）
setTimeout(function() {
    processor.warning('处理进程尚未开启.');
}, 5000);

// 显示失败处理结果（延迟模拟处理过程）
setTimeout(function() {
    processor.error('处理失败！');
}, 5000);

// 显示成功处理结果（延迟模拟处理过程）
setTimeout(function() {
    processor.success('处理成功！');
}, 5000);

配置项 #

过程形式的模态框可以使用以下配置项：

message #

同通用框的 message 配置项。

过程模态框的内容。默认为 'Processing...'。

nl2br #

同通用框的 nl2br 配置项。

是否将内容中的换行符自动转化为换行标签 <br>。默认为 false。

size #

同通用框的 size 配置项。

默认为：{width: 'auto', minWidth: '20em', maxWidth: '40em'}。

backdrop #

同通用框的 backdrop 配置项。

默认为 false。

position #

同通用框的 position 配置项。

默认为 'right top',

timeout #

Number

过程模态框触发结束方法后的显示停留时间。单位 ms。可选配置项为：

• success: 触发 success 结束方法后的显示停留时间。

• error: 触发 error 结束方法后的显示停留时间。

• warning: 触发 warning 结束方法后的显示停留时间。

• default: 触发所有结束方法后的显示停留时间。

• 默认为 {default: 3500}。

icons #

PlainObject

过程模态框内图标设置。可选配置项为：

• processing: 处理过程中的图标设置。设为图像时，以该图像作为图标；设为其他有效值时，作为图标容器的 class 样式。默认为 null。

• success: 触发 success 结束方法后的图标设置。图标容器的 class 样式。默认为 "fa fa-check-circle"。

• error: 触发 error 结束方法后的图标设置。图标容器的 class 样式。默认为 "fa fa-bug"。

• warning: 触发 warning 结束方法后的图标设置。图标容器的 class 样式。默认为 "fa fa-exclamation-triangle"。

提示框 #

提示形式的模态框有四种形式：信息提示框、警告提示框、错误提示框、成功提示框。四种形式的提示框除了调用方法名不同外，具有相同的参数和方法。

信息提示框 #

使用 Modal.info() 方法可以弹出信息提示框。

Modal.info('自定义提示信息');

可以传入回调参数在提示框关闭后做后续处理。

Modal.info('自定义提示信息', function() {
    // info modal closed!
});

可以使用传入配置项的方式为提示框添加更多功能。

Modal.info({
    message: '自定义提示信息',
    position: 'right 50',
    onhidden: function() {
        // info modal closed!
    }
});

警告提示框 #

使用 Modal.warning() 方法可以弹出警告提示框。

Modal.warning('自定义警告信息');

错误提示框 #

使用 Modal.error() 方法可以弹出错误提示框。

Modal.error('自定义错误信息');

成功提示框 #

使用 Modal.success() 方法可以弹出成功提示框。

Modal.success('自定义成功信息');

配置项 #

提示形式的模态框可以使用以下配置项：

message #

同通用框的 message 配置项。

提示框的文本内容。信息提示框默认为 'Info.'；警告提示框默认为 'Warning!'；错误提示框默认为 'Error!'；成功提示框默认为 'Success!'。

nl2br #

同通用框的 nl2br 配置项。

是否将内容中的换行符自动转化为换行标签 <br>。默认为 false。

size #

同通用框的 size 配置项。

默认为：{width: 'auto', minWidth: '20em', maxWidth: '40em'}

backdrop #

同通用框的 backdrop 配置项。

默认为 false。

position #

同通用框的 position 配置项。

默认为 'right top',

timeout #

Number

提示框的显示停留时间。单位 ms。默认为 3500。

icon #

String

提示框内图标设置。图标容器的 class 样式。信息提示框默认为 'fa fa-info-circle'；警告提示框默认为 'fa fa-exclamation-triangle'；错误提示框默认为 'fa fa-bug'；成功提示框默认为 'fa fa-check-circle'。

实例方法 #

模态框的配置项方法都会传入模态框的对象实例参数，另 show()、alert() 等方法也会返回模态框对象实例。模态框对象实例可以使用以下方法操作模态框：

getGlobalOpenedDialogs() #

获取所有正在显示的模态框实例。

getModal() #

获取模态框的最上层容器元素的 jQuery 对象。

getModalDialog() #

获取模态框外层容器元素的 jQuery 对象。

getModalContent() #

获取模态框内容容器元素的 jQuery 对象。

getModalHeader() #

获取模态框头部容器元素的 jQuery 对象。

getModalBody() #

获取模态框主体容器元素的 jQuery 对象。

getModalFooter() #

获取模态框底部容器元素的 jQuery 对象。

setData() #

设置模态框实例的绑定数据。

可依次传入以下参数：

1. key：必选。String 类型。

2. value：必选。Object 类型。

getData() #

获取模态框实例的绑定数据。

可依次传入以下参数：

1. key：必选。String 类型。

getId() #

获取模态框实例的 ID。

getType() #

获取模态框的类型。

setType() #

设置模态框的类型。

可依次传入以下参数：

1. type：必选。同配置项 type。

testType() #

检测模态框的类型是否是指定类型。

可依次传入以下参数：

1. type：String 类型。支持以其开头的模糊匹配。

getSize() #

获取模态框的尺寸。

setSize() #

设置模态框的尺寸。

可依次传入以下参数：

1. size：必选。同配置项 size。

2. adjustPosition：可选。Boolean 类型，是否自动调整模态框位置。

getCssClass() #

获取模态框的样式 class。

setCssClass() #

设置模态框的样式 class。

可依次传入以下参数：

1. cssClass：必选。同配置项 cssClass。

getTitle() #

获取模态框的标题。

setTitle() #

设置模态框的标题。

可依次传入以下参数：

1. title：必选。同配置项 title。

getMessage() #

获取模态框内容字符串。

setMessage() #

设置模态框内容。

可依次传入以下参数：

1. message：必选。同配置项 message。

getPosition() #

获取模态框的当前位置。数组，第 0 项为左位置，第 1 项为上位置。

setPosition() #

设置模态框位置。

可依次传入以下参数：

1. leftPos：可选。可设为 'left' 或 'center' 或 'right'。另可设为百分比字符串值（如"15%"）、px/em单位字符串值(如"200px"或"200em")、数字（如200，单位默认为px）。

2. topPos：可选。可设为 'top' 或 'center' 或 'bottom'。另可设为百分比字符串值（如"15%"）、px/em单位字符串值(如"200px"或"200em")、数字（如200，单位默认为px）。

不传入参数时根据初始配置重设位置。

isClosable() #

判断模态框是否可响应关闭事件进行关闭。

setClosable() #

设置模态框是否可响应关闭事件进行关闭。

可依次传入以下参数：

1. closable: Boolean 类型。

canCloseByBackdrop() #

判断模态框是否可响应点击遮罩层事件进行关闭。

setCloseByBackdrop() #

设置模态框是否可响应点击遮罩层事件进行关闭。

可依次传入以下参数：

1. closeByBackdrop: Boolean 类型。

canCloseByKeyboard() #

判断模态框是否可响应按下键盘的 Esc 键事件进行关闭。

setCloseByBackdrop() #

设置模态框是否可响应按下键盘的 Esc 键事件进行关闭。

可依次传入以下参数：

1. closeByKeyboard: Boolean 类型。

isAnimate() #

判断模态框打开时是否显示动画效果。

setAnimate() #

设置模态框打开时是否显示动画效果。

可依次传入以下参数：

1. animate: Boolean 类型。

getSpinicon() #

获取模态框按钮上的加载效果样式 class。

setSpinicon() #

设置模态框按钮上的加载效果样式 class。

可依次传入以下参数：

1. spinicon: String 类型。

getButtons() #

获取模态框底部按钮的配置项数组。

setButtons() #

设置模态框底部的按钮。

可依次传入以下参数：

1. buttons: 必选。同配置项 buttons

getButton() #

获取模态框底部按钮的 jQuery 对象。

可依次传入以下参数：

1. id: String 类型。按钮的ID。

getButtonSize() #

获取模态框底部按钮的尺寸。

enableButtons() #

设置模态框底部按钮是否响应点击/热键事件

可依次传入以下参数：

1. enable: Boolean 类型。

enableButton() #

设置模态框内部（包含底部）指定按钮响应点击/热键事件。

可依次传入以下参数：

1. selector: 元素选择器。如 id 为 '#id'，class 为 '.className' 等。

disableButton() #

设置模态框内部（包含底部）指定按钮不响应点击/热键事件。

可依次传入以下参数：

1. selector: 元素选择器。如 id 为 '#id'，class 为 '.className' 等。

onShow() #

设置模态框 onshow 事件回调。

可依次传入以下参数：

1. onshow: 同配置项 onshow。

onShown() #

设置模态框 onshown 事件回调。

可依次传入以下参数：

1. onshown: 同配置项 onshown。

onHide() #

设置模态框 onhide 事件回调。

可依次传入以下参数：

1. onhide: 同配置项 onhide。

onHidden() #

设置模态框 onhidden 事件回调。

可依次传入以下参数：

1. onhidden: 同配置项 onhidden。

isRealized() #

判断模态框是否已实例化完毕。

isOpened() #

判断模态框是否正在显示。

close() #

关闭模态框。

dispose() #

销毁模态框，不响应 onhide 和 onhidden 回调。

静态方法 #

.configDefaultOptions() #

设置模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.closeAll() #

关闭所有模态框。

.show() #

打开一个通用模态框

.alert() #

打开一个警告模态框。

.alert.configDefaultOptions() #

设置警告模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.confirm() #

打开一个询问模态框。

.confirm.configDefaultOptions() #

设置询问模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.loading() #

打开一个加载效果模态框。

.loading.configDefaultOptions() #

设置加载效果模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.processing() #

打开一个过程模态框。

.processing.configDefaultOptions() #

设置过程模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.info() #

打开一个信息提示模态框。

.info.configDefaultOptions() #

设置信息提示模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.warning() #

打开一个警告提示模态框。

.warning.configDefaultOptions() #

设置警告提示模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.error() #

打开一个错误提示模态框。

.error.configDefaultOptions() #

设置错误提示模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

.success() #

打开一个成功提示模态框。

.success.configDefaultOptions() #

设置成功提示模态框全局配置项。

可依次传入以下参数：

1. options: PlainObject 类型。参考 配置项。

标签页 bs/tab #

ID: bs/tab

即 Bootstrap 3 的标签页插件。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入标签页插件依赖。

define(['bs/tab'], function() {
    // Now you can use Tab plugin via .tab() method.
});

当然，也可以直接引入使用。

require(['bs/tab'], function() {
    // Now you can also use Tab plugin via .tab() method.
});

示例 #

示例效果可以前往 标签页示例 页面查看。

用法 #

通过 JavaScript 激活标签页（每个标签页都需要单独激活）：

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

可以通过以下几种方式激活指定的标签页：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

标记 #

另外，也可以通过为元素添加属性标记（data-toggle="tab" 或 data-toggle="pill"）的方式在不使用 JavaScript 的情况下激活标签页导航。

• data-toggle="tab" 适用于一般的 标签页 导航，即上层 ul 标签含有样式 class nav 和 nav-tabs。
• data-toggle="pill" 适用于 胶囊式标签页 导航，即上层 ul 标签含有样式 class nav 和 nav-pills。

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>

淡入效果 #

如果想让每一个标签页内容显示淡入的动画效果，需要为每一个标签页内容容器 .tab-pane 添加 class 样式 .fade。默认显示的标签页内容的容器层需要添加 class 样式 .in 以显示内容。

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

方法 #

$().tab #

激活一个标签页元素和内容容器。标签页元素必须至少拥有属性 data-target 或 href 用以关联 DOM 中的一个内容容器。在上面的例子中，所有的标签页元素是含有属性 data-toggle="tab" 的 <a> 元素。

.tab('show') #

选择指定的标签页并显示其关联的内容容器。其他标签页以及之前选择的标签页都将取消选择并且它们关联的内容容器都将自动隐藏。在当前内容容器真正显示之出来前返回（即在事件 shown.bs.tab 发生之前）。

$('#someTab').tab('show')

事件 #

显示一个标签页时，以下事件会按顺序依次触发：

1. hide.bs.tab (在当前已激活的标签页元素上触发)
2. show.bs.tab (在将要显示的标签页元素上触发)
3. hidden.bs.tab (在上一个激活的标签页元素上触发，即同触发 hide.bs.tab 事件的元素)
4. shown.bs.tab (在新激活且刚显示出来内容的标签页元素上触发，即同触发 show.bs.tab 事件的元素)

如果开始没有标签页被激活选中，事件 hide.bs.tab 和 hidden.bs.tab 不会触发。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

工具提示 bs/tooltip #

ID: bs/tooltip

即 Bootstrap 3 的工具提示插件。

为一个元素添加工具提示，覆盖 title 属性效果。

工具提示的内容长度是零的话将不会被显示出来。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入工具提示插件依赖。

define(['bs/tooltip'], function() {
    // Now you can use Tooltip plugin via .tooltip() method.
});

当然，也可以直接引入使用。

require(['bs/tooltip'], function() {
    // Now you can also use Tooltip plugin via .tooltip() method.
});

示例 #

示例效果可以前往 工具提示示例 页面查看。

用法 #

工具提示插件根据指定的标记自动生成提示内容，并在触发事件发生后显示在默认提示位置。

通过 JavaScript 触发工具提示：

$('#example').tooltip(options)

标记 #

在希望显示工具提示的元素上添加属性 data-toggle 和 title。插件根据标记自动生成提示是相当简单的，有时它也需要一个位置设置（默认是 top）。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

配置项 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-animation=""。

方法 #

$().tooltip(options) #

为一个元素添加工具提示功能。

.tooltip('show') #

显示一个元素的工具提示框。在工具提示框确实显示出来之前即返回调用元素（即在 shown.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的工具提示调用。提示内容为空时将不显示。

$('#element').tooltip('show')

.tooltip('hide') #

隐藏一个元素的工具提示框。在工具提示框确实隐藏之前即返回调用元素（即在 hidden.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的工具提示调用。

$('#element').tooltip('hide')

.tooltip('toggle') #

切换一个元素的工具提示框的显示和隐藏。在工具提示框确实显示或隐藏之前即返回调用元素（即在 shown.bs.tooltip 或 hidden.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的工具提示调用。

$('#element').tooltip('toggle')

.tooltip('destroy') #

隐藏并销毁一个元素的工具提示框。工具提示将从关联元素（在创建时传入的 selector 配置项）上取消事件绑定。

$('#element').tooltip('destroy')

事件 #

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

弹出框 bs/popover #

ID: bs/popover

即 Bootstrap 3 的弹出框插件。

为任意元素添加一小块浮层，就像 iPad 上一样，用于存放非主要信息。

弹出框的标题和内容的长度都是零的话将永远不会被显示出来。

组件库中对弹出框位置进行了功能增强，支持左上角、右上角、左下角、右下角定位。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入弹出框插件依赖。

define(['bs/popover'], function() {
    // Now you can use Popover plugin via .popover() method.
});

当然，也可以直接引入使用。

require(['bs/popover'], function() {
    // Now you can also use Popover plugin via .popover() method.
});

示例 #

示例效果可以前往 弹出框示例 页面查看。

用法 #

通过 JavaScript 代码启动弹出框：

$('#example').popover(options)

$(function () {
  $('[data-toggle="popover"]').popover()
})

配置项 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-animation=""。

方法 #

$().popover(options) #

为一个元素添加弹出框功能。

.popover('show') #

显示一个元素的弹出框。在弹出框确实显示出来之前即返回调用元素（即在 shown.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的弹出框调用。标题和内容均为空时将不显示。

$('#element').popover('show')

.popover('hide') #

隐藏一个元素的弹出框。在弹出框确实隐藏之前即返回调用元素（即在 hidden.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的弹出框调用。

$('#element').popover('hide')

.popover('toggle') #

切换一个元素的弹出框的显示隐藏和。在弹出框确实显示或隐藏之前即返回调用元素（即在 shown.bs.tooltip 或 hidden.bs.tooltip 事件触发之前）。这由 "manual" 触发方式的弹出框调用。

.popover('destroy') #

隐藏并销毁一个元素的弹出框。弹出框将从关联元素（在创建时传入的 selector 配置项）上取消事件绑定。

事件 #

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

警告框 bs/alert #

ID: bs/alert

即 Bootstrap 3 的警告框插件。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入警告框插件依赖。

define(['bs/alert'], function() {
    // Now you can use Alert plugin via .alert() method.
});

当然，也可以直接引入使用。

require(['bs/alert'], function() {
    // Now you can also use Alert plugin via .alert() method.
});

示例 #

示例效果可以前往 警告框示例 页面查看。

用法 #

为关闭按钮添加 data-dismiss="alert" 属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从 DOM 中删除。

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

为了让警告框在关闭时表现出动画效果，请确保为其添加了 .fade 和 .in 类。

方法 #

$().alert() #

让警告框监听具有 data-dismiss="alert" 属性的后裔元素的点击（click）事件。（如果是通过 data 属性进行的初始化则无需使用）

$().alert('close') #

关闭警告框并从 DOM 中将其删除。如果警告框被赋予了 .fade 和 .in 类，那么，警告框在淡出之后才会被删除。

事件 #

Bootstrap 的警告框插件对外暴露了一些可以被监听的事件。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

按钮 bs/button #

ID: bs/button

即 Bootstrap 3 的按钮插件。

按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件，例如工具条。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入按钮插件依赖。

define(['bs/button'], function() {
    // Now you can use Button plugin via .button() method.
});

当然，也可以直接引入使用。

require(['bs/button'], function() {
    // Now you can also use Button plugin via .button() method.
});

示例 #

示例效果可以前往 按钮示例 页面查看。

状态 #

通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态。

从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

单独按钮切换 #

为单独按钮添加属性 data-toggle="button" 以激活状态切换。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框 / 单选按钮 #

为一个包含复选框或单选按钮的按钮组 .btn-group 添加属性 data-toggle="buttons"，可以激活它们的选中状态的自动切换。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

方法 #

$().button('toggle') #

切换按钮状态。改变为按钮之前已经激活的样式。

$().button('reset') #

重置按钮状态 - 将按钮上的文本还原回原始的内容。此为异步方法，此方法在内容被重置完成之前即返回。

$().button(string) #

以其他任意字符串定义按钮的状态文本。

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

折叠插件 bs/collapse #

ID: bs/collapse

即 Bootstrap 3 的 Collapse 插件。

一个灵活的使用极少数的类切换元素隐藏和显示动画效果的插件。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入 Collapse 插件依赖。

define(['bs/collapse'], function() {
    // Now you can use Collapse plugin via .collapse() method.
});

当然，也可以直接引入使用。

require(['bs/collapse'], function() {
    // Now you can also use Collapse plugin via .collapse() method.
});

示例 #

示例效果可以前往 Collapse 示例 页面查看。

用法 #

Collapse 插件使用极少的样式类实现处理更多的折叠效果：

• .collapse 类用以隐藏内容。
• .collapse.in 类用以显示内容。
• .collapsing 类在过渡动画开始时添加，过渡动画结束后移除。

通过 data 属性 #

仅仅为元素添加属性 data-toggle="collapse" 和 data-target 即可自动为元素赋予折叠效果。属性 data-target 可以设置为一个 CSS 选择器用以指定要折叠的内容元素。请确定已经为折叠元素添加了样式 class collapse。如果想要折叠元素默认是打开的，需要为其添加样式 class in。

为一组元素添加折叠效果时，需要为触发折叠事件的元素添加属性 data-parent="#selector"。具体可参考 Collapse 示例 中的相应效果。

通过 JavaScript #

手动触发：

$('.collapse').collapse()

配置项 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-parent=""。

方法 #

.collapse(options) #

激活内容的自动折叠效果，接受一个可选的任意对象参数。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle') #

切换可折叠元素的显示和隐藏。在折叠元素确实显示或隐藏之前即返回调用元素（即在事件 shown.bs.collapse 和 hidden.bs.collapse 触发之前）。

.collapse('show') #

显示一个可折叠元素。在折叠元素确实显示出来之前即返回调用元素（即在事件 shown.bs.collapse 触发之前）。

.collapse('hide') #

隐藏一个可折叠元素。在折叠元素确实隐藏起来之前即返回调用元素（即在事件 hidden.bs.collapse 触发之前）。

事件 #

折叠插件在样式 class 改变时会自动触发一些事件，通过监听这些事件可以实现自己的一些处理。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

轮播插件 bs/carousel #

ID: bs/carousel

即 Bootstrap 3 的 Carousel 插件。

一个循环展示多个元素的幻灯效果的组件，类似于旋转木马。不支持多个组件嵌套。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入 Carousel 插件依赖。

define(['bs/carousel'], function() {
    // Now you can use Carousel plugin via .carousel() method.
});

当然，也可以直接引入使用。

require(['bs/carousel'], function() {
    // Now you can also use Carousel plugin via .carousel() method.
});

示例 #

示例效果可以前往 Carousel 示例 页面查看。

用法 #

多个轮播组件 #

轮播组件需要使用一个最外层容器（拥有样式类 .carousel）的 id 来保证轮播控件的正常运作。当添加多个轮播组件时，如果更改了组件容器的 id，需要保证其下控件的关联关系也要随之更新。

通过 data 属性 #

使用 data 属性可以很方便地控制轮播组件的位置。属性 data-slide 可以设为 prev 或 next，它们用以改变轮播组件的当前滚动位置。或者，设置属性 data-slide-to 为原本的滚动索引，如 data-slide-to="2"，将直接切换到滚动位置，索引从 0 开始。

属性 data-ride="carousel" 用以标记滚动组件在页面加载后即以动画效果开始运作。这种方式不能和（多余且不必要）明确使用 JavaScript 初始化同一个轮播组件同时混用。

通过 JavaScript #

手动调用轮播组件：

$('.carousel').carousel()

配置项 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-interval=""。

方法 #

.carousel(options) #

使用一个 object 参数初始化轮播组件，并且开始循环播放。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle') #

从左至右循环播放轮播组件。

.carousel('pause') #

暂停轮播组件的循环播放。

.carousel(number) #

循环到指定的轮播项（从 0 开始，类似一个数组）。

.carousel('prev') #

循环到下一个轮播项。

.carousel('next') #

循环到上一个轮播项。

事件 #

轮播组件在样式 class 改变时会自动触发一些事件，通过监听这些事件可以实现自己的一些处理。

所有事件对象都拥有以下额外添加的属性：

• direction: 轮播组件的滚动方向（可以是 "left" 或 "right"）。
• relatedTarget: 正在显示的滚动项的 DOM 元素对象。

所有的轮播组件事件都在轮播元素上触发（即在元素 <div class="carousel"> 上）。

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

圆形时钟 bs/clockpicker #

ID: bs/clockpicker

一个基于 Bootstrap 风格的时钟样式的时间选择器。

支持所有主流浏览器。在 IE9+ 之上显示效果更佳，在 IE8 上可用。兼容手机端。

当前版本 v0.0.7。组件原官方地址 On GitHub，以及原文档地址 On GitHub Pages。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入圆形时钟组件依赖。

define(['bs/clockpicker'], function() {
    // Now you can use Clockpicker plugin via .clockpicker() method.
});

当然，也可以直接引入使用。

require(['bs/clockpicker'], function() {
    // Now you can also use Clockpicker plugin via .clockpicker() method.
});

示例 #

示例效果可以前往 圆形时钟示例 页面查看。

用法 #

通常情况下，可以通过 Bootstrap 的 输入框组 组成时钟日期的 DOM 结构：

<div class="input-group clockpicker"> 
  <input type="text" class="form-control" value="09:30"> 
  <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-time"></span> 
  </span> 
</div>

然后，通过 JavaScript 初始化时钟实例：

$('.clockpicker').clockpicker();

当然，时钟的 DOM 结构可以是任意的、简单的输入框元素，在 示例 中可以查看相应的案例。

配置 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-placement=""。

通过 data 属性 #

<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"> 
  <input type="text" class="form-control" value="13:14"> 
  <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-time"></span> 
  </span> 
</div>

通过 JavaScript #

$('.clockpicker').clockpicker({ 
  placement: 'left', 
  align: 'top', 
  autoclose: true
});

配置项 #

方法 #

.clockpicker('show') #

显示时钟组件。

.clockpicker('hide') #

隐藏时钟组件。

.clockpicker('remove') #

销毁时钟组件（移除监听事件）。

.clockpicker('toggleView') #

可传入第二个参数 'hours' 或 'minutes'。切换到小时或分钟视图。

日期选择 bs/datetimepicker #

ID: bs/datetimepicker

一个弹出日期时间选择框的组件。

当前版本 v2.4.4。组件原官方地址 On GitHub，以及 原文档地址。原文档中内容是基于 Bootstrap 2 的写法，建议查看本站的相关文档。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入日期选择框组件依赖。

define(['bs/datetimepicker'], function() {
    // Now you can use Datetimepicker plugin via .datetimepicker() method.
});

当然，也可以直接引入使用。

require(['bs/datetimepicker'], function() {
    // Now you can also use Datetimepicker plugin via .datetimepicker() method.
});

示例 #

示例效果可以前往 日期选择框示例 页面查看。

用法 #

日期选择组件需要通过 JavaScript 激活。

$('#datetimepicker').datetimepicker();

通过属性标记 #

组件默认 DOM 结构：

<div class="input-group date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
  <input class="form-control" type="text" value="" readonly="readonly"> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>

带有重置按钮的默认 DOM 结构：

<div class="input-group date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
  <input class="form-control" type="text" value="" readonly="readonly">
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-remove"></i> 
  </span> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>

通过 JavaScript #

$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});

配置项 #

所有可以设为 Date 类型的参数都可以传入一个 Date 对象；或者如配置项 format 可以设为一个格式化字符串；或者一个与当天相关的间隔时间，比如 '-1d', '+6m +1y' 等拥有合法单位（'d' (day), 'w' (week), 'm' (month), 或 'y' (year)）的字符串。

自然，你也可以设置一个 ISO-8601 格式的日期时间。以下是一些合法常用的日期格式：

• yyyy-mm-dd
• yyyy-mm-dd hh:ii
• yyyy-mm-ddThh:ii
• yyyy-mm-dd hh:ii:ss
• yyyy-mm-ddThh:ii:ssZ

format #

String

默认值：'mm/dd/yyyy'

对应 data 属性：data-date-format

日期格式，包含 p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy。

• p : 小写的子午线时间 ('am' 或 'pm') - 依赖于本地化文件
• P : 大写的子午线时间 ('AM' or 'PM') - 依赖于本地化文件
• s : 秒数，不以 0 开头秒数
• ss : 两位数字的秒数，不足 10 时以 0 开头
• i : 分钟数，不以 0 开头
• ii : 两位数字的分钟数，不足 10 以 0 开头
• h : 小时数，不以 0 开头 - 24小时制
• hh : 两位数字的小时数，不足 10 以 0 开头 - 24小时制
• H : 小时数，不以 0 开头 - 12小时制
• HH : 两位数字的小时数，不足 10 以 0 开头 - 12小时制
• d : 月内的天数，不以 0 开头
• dd : 两位数字的月内的天数，不足 10 以 0 开头
• m : 当前月数，不以 0 开头
• mm : 两位数字的当前月数，不足 10 以 0 开头
• M : 当前月的英文缩写字符串，三个字符
• MM : 当前月的英文全称字符串，比如 January 或 March
• yy : 两位数字的年数
• yyyy : 全部数字的年数，4个数字

weekStart #

Integer

默认值：0

对应 data 属性：data-date-weekstart

每周的开始天数。可选 0 (星期天) 到 6 (星期六)。

startDate #

Date

默认值：当前时间

对应 data 属性：data-date-startdate

最早可以被选择的日期时间。之前的日期时间不可以选择。

endDate #

Date

默认值：当前月的最后一天

对应 data 属性：data-date-enddate

最晚可以被选择的日期时间。之后的日期时间不可以选择。

daysOfWeekDisabled #

String | Array

默认值：[]

对应 data 属性：data-date-days-of-week-disabled

每周被禁用选择的天数。可选 0 (星期天) 到 6 (星期六)。多个值时可以以英文逗号间隔，或是一个数组。比如 '0,6' 或 [0, 6]。

autoclose #

Boolean

默认值：false

对应 data 属性：data-date-autoclose

当选择完日期时间后是否自动关闭日期时间选择框。

startView #

Number | String

默认值：2, 'month'

对应 data 属性：data-start-view

当日期时间选择框打开后应该默认显示的视图面板。可选为：

1. 0 或 'hour' 用以显示 小时 视图面板
2. 1 or 'day' 用以显示 天 视图面板
3. 2 or 'month' 用以显示 月 视图面板（默认）
4. 3 or 'year' 用以显示选择 12 个月的视图面板
5. 4 or 'decade' 用以显示前后 10 年的视图面板。常用于生日选择框

minView #

Number | String

默认值：0, 'hour'

对应 data 属性：data-min-view

日期组件最低可以选择的视图面板。

maxView #

Number | String

默认值：4, 'decade'

对应 data 属性：data-max-view

日期组件最高可以选择的视图面板。

clearBtn #

Boolean

默认值：false

对应 data 属性：data-date-clear-btn

如果设为 true，会在日期选择框底部显示 "Clear" 按钮以清空当前选择。同时，当 autoclose 设为 true 时日期选择框将自动关闭。

todayBtn #

Boolean | "linked"

默认值：false

对应 data 属性：data-date-today-btn

如果设为 true 或 "linked"，会在日期选择框底部显示 "Today" 按钮以选择当天日期。如果设为 true，"Today" 按钮将只在日期视图面板中显示；如果设为 "linked"，"Today" 按钮将在所有视图面板中显示。

todayHighlight #

Boolean

默认值：false

对应 data 属性：data-date-today-highlight

如果设为 true，将高亮显示当前日期。

keyboardNavigation #

Boolean

默认值：true

对应 data 属性：data-date-keyboard-navigation

设置是否允许键盘的上下左右按键选择日期。

language #

String

默认值：zh-CN

对应 data 属性：data-date-language

设置显示月和天等的语言。这些也会显示在输入框内。其他可选的值如 'zh-TW' (中国台湾), 'en' (英语), 'de' (德语), 'br' (巴西语), 和 'es' (西班牙语) 等（参看下面的 I18N）。如果设置了一个未知语言，将默认使用英语。

forceParse #

Boolean

默认值：true

对应 data 属性：data-date-force-parse

是否在关闭选择框时强制转换输入框的值。即，当用户在输入框内设置一个非法的日期时，日期选择组件将根据 format 配置项校验输入框内的值并强制转换为新值。

bootcssVer #

Number

覆盖默认 Bootstrap 版本的自动检测结果并指定当前采用的 Bootstrap 版本（如 2 或 3）。

组件库的基本样式使用的是 Bootstrap 3。

minuteStep #

Number

默认值：5

对应 data 属性：data-minute-step

小时视图面板下的显示分钟的间隔数。

pickerReferer : deprecated #

String

默认值：'default'（另外可选值：'input'）

放置日期选择框元素的关联元素。如果想要把日期选择框放仅仅放在输入框区域下，可设为 input。

pickerPosition #

String

默认值：'bottom-right' (另外可选值：'bottom-left')

对应 data 属性：data-picker-position

日期选择框的显示位置。使用这个配置项可以将日期选择框放在输入框之下。

viewSelect #

Number | String

默认值：同 minView (可选值为：'decade', 'year', 'month', 'day', 'hour')

对应 data 属性：data-view-select

使用这个配置项可以选择从哪个视图面板开始选择日期。默认情况是最后一个，然而你可以选择第一个，以便每次点击时都会更新日期。

showMeridian #

Boolean

默认值：false

对应 data 属性：data-show-meridian

该配置项用以设置显示 day 和 hour 视图面板为子午线时间视图。

initialDate #

Date | String

默认值：new Date()

对应 data 属性：data-date

设置日期选择框默认显示的日期时间。默认是当前时间。另外可以设置为昨天或今天午夜时分。

zIndex #

Number

默认值：undefined

对应 data 属性：data-z-index

日期选择插件会自动计算并设置选择框在 DOM 树中更高的 zIndex 值。自行设置该值可避免默认处理。

timezone #

String

默认值: 客户端当前时区的缩写名称

设置视图面板显示时间的时区。要注意的是该配置项必须要与 Z 格式化字符结合使用。比如：

$('#date-end').datetimepicker({ 
  format: 'yyyy-mm-dd hh:ii P Z', 
  timezone: 'GMT' 
});

onRenderYear #

该事件在日期选择框中的年份内容渲染出来后触发。需要返回一个添加到元素上的样式类数组。可以返回 ['disabled'] 以禁用选择到年。

$('#date').datetimepicker({ 
  onRenderYear: function(date) { 
    // Disable picking dates from any year apart from 2015/2016 
    if (date.getFullYear() < 2015 || date.getFullYear() > 2016) 
      return ['disabled'];
  }
});

onRenderMonth #

该事件在日期选择框中的月份内容渲染出来后触发。需要返回一个添加到元素上的样式类数组。可以返回 ['disabled'] 以禁用选择到月。

$('#date').datetimepicker({ 
    onRenderMonth: function(date) { 
      //Disable every other month in the year 2016 
      if (date.getUTCMonth() % 2 === 0 && date.getUTCFullYear() === 2016)
        return ['disabled'];
    } 
});

onRenderDay #

该事件在日期选择框中的天数内容渲染出来后触发。需要返回一个添加到元素上的样式类数组。可以返回 ['disabled'] 以禁用选择到天。

$('#date').datetimepicker({ 
  onRenderDay: function(date) { 
    //Disable dates 18-24 of every month 
    if (date.getDate() >= 18 && date.getDate() <= 24) 
      return ['disabled']; 
  } 
});

onRenderHour #

该事件在日期选择框中的小时内容渲染出来后触发。需要返回一个添加到元素上的样式类数组。可以返回 ['disabled'] 以禁用选择到小时。

$('#date').datetimepicker({ 
  onRenderHour: function(hour) { 
    //Disable any time between 12:00 and 13:59 
    if (date.getUTCHours() === 12 || date.getUTCHours() === 13) 
      return ['disabled']; 
  } 
});

onRenderMinute #

该事件在日期选择框中的分钟内容渲染出来后触发。需要返回一个添加到元素上的样式类数组。可以返回 ['disabled'] 以禁用选择到分钟。

$('#date').datetimepicker({ 
  onRenderMinute: function(minute) { 
    // Disable all times between 30 past and 20 to every hour for workdays 
    if (date.getDay() !== 0 && date.getDay() !== 6 && date.getUTCMinutes() >= 30 && date.getUTCMinutes() <= 40) 
      return ['disabled']; 
  } 
});

fontAwesome #

Boolean

默认值：false

对应 data 属性：data-font-awesome

如果设为 true，将采用 Font Awesome 字体图标。

方法 #

.datetimepicker(options) #

初始化一个日期选择组件。

remove #

参数: 无

移除日期选择组件。将移除绑定事件，内部绑定对象以及添加到页面上的 DOM 元素。

$('#datetimepicker').datetimepicker('remove');

show #

参数: 无

显示日期选择框。

$('#datetimepicker').datetimepicker('show');

hide #

参数: 无

隐藏日期选择框。

$('#datetimepicker').datetimepicker('hide');

update #

参数:

• currentDate (Date)

用指定日期更新日期选择组件。

$('#datetimepicker').datetimepicker('update', new Date());

省略 currentDate 参数时，默认用输入框值更新日期选择组件。

$('#datetimepicker').datetimepicker('update');

setStartDate #

参数:

• startDate (String)

设置日期选择组件的最小限制选择时间。

$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

省略 startDate 参数（或设置一个无效值）以重设最小限制。

$('#datetimepicker').datetimepicker('setStartDate');
$('#datetimepicker').datetimepicker('setStartDate', null);

setEndDate #

参数:

• endDate (String)

设置日期选择组件的最大限制选择时间。

$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');

省略 endDate 参数（或设置一个无效值）以重设最大限制。

$('#datetimepicker').datetimepicker('setEndDate');
$('#datetimepicker').datetimepicker('setEndDate', null);

setDaysOfWeekDisabled #

参数:

• daysOfWeekDisabled (String|Array)

设置每周应该禁用的天。

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);

省略 daysOfWeekDisabled 参数（或设置一个无效值）以重设禁用限制。

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);

setMinutesDisabled #

参数:

• minutesDisabled (String|Array)

设置应该禁用的分钟。

$('#datetimepicker').datetimepicker('setMinutesDisabled', [25,59]);

省略 minutesDisabled 参数（或设置一个无效值）以重设禁用限制。

$('#datetimepicker').datetimepicker('setMinutesDisabled');
$('#datetimepicker').datetimepicker('setMinutesDisabled', null);

setHoursDisabled #

参数:

• hoursDisabled (String|Array)

设置应该禁用的小时。

$('#datetimepicker').datetimepicker('setHoursDisabled', [12,19]);

省略 hoursDisabled 参数（或设置一个无效值）以重设禁用限制。

$('#datetimepicker').datetimepicker('setHoursDisabled');
$('#datetimepicker').datetimepicker('setHoursDisabled', null);

setInitialDate #

参数:

• initialDate (String)

为日期选择组件设置一个新的初始化时间。

$('#datetimepicker').datetimepicker('setInitialDate', "2012-12-31");

getInitialDate #

获取日期选择组件的初始化时间。

$('#datetimepicker').datetimepicker('getInitialDate');

事件 #

日期选择组件暴露了几个事件以处理日期。

show #

日期选择框显示后触发。

hide #

日期选择框隐藏后触发。

changeDate #

日期改变后触发。

$('#date-end')
  .datetimepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < date-start-display.valueOf()){
        ....
    }
  });

changeYear #

year 视图面板从 decade 视图面板改变时触发。

changeMonth #

month 视图面板从 year 视图面板改变时触发。

outOfRange #

当通过 setDate 或 setUTCDate 方法选择一个在 startDate 之前或在 endDate 之后的时间时触发。

next:* / prev:* #

点击 next 或 previous 箭头时触发。在所有不同视图面板（'year', 'month', 'day', 'hour'）中都支持。比如在月份面板中会触发回调操作 'next:month' 或 'prev:month'。

键盘支持 #

日期选择组件包含一些键盘事件支持：

上下左右方向键 #

在显示面板时，左/右键将向后/前移动一天，上/下键将向后/前移动一周。

当按下 shift 键时，上/左键将向后移动一个月，下/右键将向前移动一个月。

当按下 ctrl 键时，上/左键将向后移动一年，下/右键将向前移动一年。

同时按下 shift 和 ctrl 键时等同于只按下 ctrl 键 - 这意味着，这样并不会同时改变月份和年份，只会改变年份。

escape键 #

当按下 escape 键时，会切换选择框的显示和隐藏。这样便于用户手动输入时间。

enter键 #

在显示面板时，按下 enter 键会隐藏选择框面板。如果面板已经是隐藏着的，enter 键将响应它的默认操作 - 自动提交表单等。

鼠标支持 #

为了使日期选择框更方便地显示每块日期时间的内容，插件提供了对鼠标滚轮事件的支持。比如在某年视图面板上，向上滚动鼠标滚轮会切换到十年年段视图面板，向下滚动滚轮会切换到分钟视图面板。

依赖 #

要支持此功能，需要引入 jQuery 的鼠标滚轮事件插件。组件库已默认加入了该插件。

配置项 #

wheelViewModeNavigation #

Boolean

默认值：false

对应 data 属性：data-view-mode-wheel-navigation

设置是否支持使用鼠标滚轮切换不同的视图面板。

wheelViewModeNavigationInverseDirection #

Boolean

默认值：false

对应 data 属性：data-view-mode-wheel-navigation-inverse-dir

是否反转鼠标滚轮滚动方向。默认向上滚动是切换到十年年段视图面板。

wheelViewModeNavigationDelay #

Integer

默认值：100

对应 data 属性：data-view-mode-wheel-navigation-delay

设置对鼠标滚轮事件响应的延迟时间。控制在两个不同的视图面板之间的切换速度。单位是毫秒。

关于 viewSelect 配置项 #

当启用此功能时 viewSelect 配置项建议设为 4，以便能更方便地在各个视图面板中更新任意值。

I18N #

日期选择组件默认提供了国际化语言设置。默认为中国大陆（zh-CN），其他的有效值组件库已经合并到了组件文件中。通过 $.fn.datetimepicker.dates 可以查看所有可用国际化配置。同时，也可以在调用 .datetimepicker() 之前自定义国际化配置，例如：

$.fn.datetimepicker.dates['en'] = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    today: "Today"
};

从右到左显示的语言可以包含属性值 rtl: true，以让日历格式显示更友好。

组件库资源文件默认是以 UTF-8 的编码格式打包，如果你在浏览器上查看面板内容为乱码，请确认资源库的请求内容编码是否为 UTF-8。

日期范围选择 bs/daterangepicker #

ID: bs/daterangepicker

一款基于 Bootstrap 风格的双日历时间段选择控件。

当前版本 v2.1.15。组件原官方地址 On GitHub，以及 原文档地址。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入日期范围选择组件依赖。

define(['bs/daterangepicker'], function() {
    // Now you can use Daterangepicker plugin via .daterangepicker() method.
});

当然，也可以直接引入使用。

require(['bs/daterangepicker'], function() {
    // Now you can also use Daterangepicker plugin via .daterangepicker() method.
});

示例 #

示例效果可以前往 日期范围选择示例 页面查看。

用法 #

日期范围选择组件需要通过 JavaScript 初始化，如：

$('input[name="daterange"]').daterangepicker();

更多示例效果可参看 示例页面。

配置项 #

初始化日期范围选择组件时可以传入一个对象参数：

$('input[name="daterange"]').daterangepicker({
  // options with key: value
});

对象参数中可以包含以下配置项：

startDate #

Date | Moment | String

初始化日期范围组件的开始日期。未设置时将自动解析并使用输入框的值。

endDate #

Date | Moment | String

初始化日期范围组件的结束日期。未设置时将自动解析并使用输入框的值。

minDate #

Date | Moment | String

用户可以选择的最早的日期。

maxDate #

Date | Moment | String

用户可以选择的最晚的日期。

dateLimit #

PlainObject

设置选择的开始日期到结束日期之间最大的日期间隔。可以设置能够添加到一个 Moment 对象上的任意属性（如 days, months）。例如：

$('input[name="daterange"]').daterangepicker({
  dateLimit: {
      days: 7 // 设置最大间隔 7 天
  }
});

showDropdowns #

Boolean

默认值：false

设置是否在日历选择区域上方显示选择月份和年份的下拉框。

showWeekNumbers #

Boolean

默认值：false

设置是否在日历区域每一行开头显示本地化的周数（年内的第几周）。

showISOWeekNumbers #

Boolean

默认值：false

设置是否在日历区域每一行开头显示国际化的周数（年内的第几周）。

timePicker #

Boolean

默认值：false

允许选择当前的时间，不仅仅是日期。

timePickerIncrement #

Number

默认值：1

设置时间选择框内的分钟递增显示的间隔（比如设为 30 时将仅允许选择 0 或 30 分钟）。

timePicker24Hour #

Boolean

默认值：false

设置是否使用 24 小时制，同时移除 AM/PM 选择框。

timePickerSeconds #

Boolean

默认值：false

设置是否在时间选择内显示秒数选择框。

ranges #

PlainObject

设置用户可以选择的预定义日期范围列表。每个键名是显示范围的名称，对应值是一个包含两个预定义范围的日期。例如：

$('input[name="daterange"]').daterangepicker({
    "ranges": {
        "Today": [
            "2017-05-03T07:16:46.700Z",
            "2017-05-03T07:16:46.700Z"
        ],
        "Yesterday": [
            "2017-05-02T07:16:46.701Z",
            "2017-05-02T07:16:46.701Z"
        ],
        "Last 7 Days": [
            "2017-04-27T07:16:46.701Z",
            "2017-05-03T07:16:46.701Z"
        ],
        "Last 30 Days": [
            "2017-04-04T07:16:46.701Z",
            "2017-05-03T07:16:46.701Z"
        ],
        "This Month": [
            "2017-04-30T16:00:00.000Z",
            "2017-05-31T15:59:59.999Z"
        ],
        "Last Month": [
            "2017-03-31T16:00:00.000Z",
            "2017-04-30T15:59:59.999Z"
        ]
    }
});

showCustomRangeLabel #

Boolean

默认值：true

设置当使用配置项 ranges 时，是否在预定义范围列表下面显示 "自定义范围" 项。不管当前选择的日期范围是否能够匹配预定义的日期范围列表，该配置项将始终被高亮显示。点击 "自定义范围" 项时将显示日历选择面板。

alwaysShowCalendars #

Boolean

默认值：false

通常情况下，当我们使用配置项 ranges 预定义日期范围列表时，日历选择框在点击 "自定义范围" 时才会显示。如果将该配置项设为 true，日历选择框将始终显示。

opens #

String ('left'/'right'/'center')

默认值：'right'

设置选择框相对于关联元素偏左、偏右或居中显示。组件会检查关联元素是否含有样式类 pull-right，如果有，会默认设为 'left'，选择框将靠右偏左显示。

drops #

String ('down'/'up')

默认值：'down'

设置选择框显示在关联元素的上方或下方。组件会检查关联元素是否含有样式类 dropup，如果有，会默认设为 'top'，选择框将在上方显示。

buttonClasses #

Array | String

默认值：'btn btn-sm'

将要添加到选择框中的按钮上的样式类名称。可以为字符串数组或空格间隔的字符串。

applyClass #

String

默认值：'btn-success'

将要添加到 '确定'（应用） 按钮上的样式类名称。

cancelClass #

String

默认值：'btn-default'

将要添加到 '取消'（取消） 按钮上的样式类名称。

locale #

PlainObject

允许你为按钮和标签文本定义本地化的字符串内容，自定义日期格式，或为日历改变周的第一天。例如：

$('#demo').daterangepicker({
    "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1
    },
    "startDate": "04/28/2017",
    "endDate": "05/04/2017"
});

singleDatePicker #

Boolean

默认值：false

设置替换双日历的范围选择框，只显示用以选择一个日期的单日历框。此时，回调方法里的 start 和 end 日期参数将同为选择的单个日期。

autoApply #

Boolean

默认值：false

隐藏 应用 和 取消 按钮，并在选择了日期（范围）后自动应用新日期（范围）和隐藏选择框。

linkedCalendars #

Boolean

默认值：true

当设为 true 时，两个日历选择区域会把月份选择（即 一月 和 二月）关联起来，当点击向左或向右箭头切换上或下一个月份时，两个日历选择区域的月份将同步改变。当设为 false 时，两个日历选择区域将会取消月份选择关联，并可以单个切换月份。

isInvalidDate #

Function

一个在显示两个日历内的日期前遍历每个日期的方法，可以返回 true 或 false 以指定选择的日期是否可用。

isCustomDate #

Function

一个在显示两个日历内的日期前遍历每个日期的方法，可以返回一个样式类名称字符串或数组，以应用到日历内的每个日期元素上。

autoUpdateInput #

Boolean

默认值：true

设置是否在为一个 <input> 元素初始化选择框和更新日期时自动更新输入框的值。

parentEl #

String

默认值：'body'

设置日期范围选择框将会添加到的父容器元素，可以为 jQuery 选择器。

方法 #

你可以通过使用 setStartDate 和 setEndDate 方法更新选择框内的 startDate 和 endDate。你可以通过绑定到关联元素上的数据属性使用日期范围选择框实例的方法和属性。

var drp = $('input[name="daterange"]').data('daterangepicker');

setStartDate #

参数

• startDate (Date|Moment|String)

设置日期范围选择框的当前选择日期范围的开始日期。

setEndDate #

参数

• endDate (Date|Moment|String)

设置日期范围选择框的当前选择日期范围的结束日期。

//create a new date range picker
$('input[name="daterange"]').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker
$('input[name="daterange"]').data('daterangepicker').setStartDate('03/01/2014');
$('input[name="daterange"]').data('daterangepicker').setEndDate('03/31/2014');

事件 #

你可以监听初始化选择框的元素触发的一些事件：

一些程序需要一个 "清空" 操作，代替 "取消" 操作，这可以通过设置 取消 按钮的标签文本，并监听 cancel 事件来实现：

$('input[name="daterange"]').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
  //do something, like clearing an input
  $('input[name="daterange"]').val('');
});

在初始化日期范围选择框时设置相应的回调方法是监听日期选择改变事件的最简单方式。当然，你也可以通过监听 应用 按钮的点击事件在日期改变后做一些事情：

$('input[name="daterange"]').daterangepicker();
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
  console.log(picker.startDate.format('YYYY-MM-DD'));
  console.log(picker.endDate.format('YYYY-MM-DD'));
});

开关 bs/switcher #

ID: bs/switcher

将复选框或单选按钮元素转化为开关 (ON/OFF) 形式的控件。

当前版本 v3.3.4。组件原官方地址 On GitHub，以及原文档地址 On GitHub Pages。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入开关组件依赖。

define(['bs/switcher'], function() {
    // Now you can use Switcher plugin via .switcher() method.
});

当然，也可以直接引入使用。

require(['bs/switcher'], function() {
    // Now you can also use Switcher plugin via .switcher() method.
});

示例 #

示例效果可以前往 开关组件示例 页面查看。

用法 #

开关组件需要通过 JavaScript 对复选框或单选按钮元素初始化，如：

$('input[name="switcher"]').switcher();

配置项 #

初始化开关组件时可以传入一个对象参数：

$('input[name="switcher"]').switcher({
  // options with key: value
});

对象参数中可以包含以下配置项：

state #

Boolean

默认值：由元素是否含有 checked 属性决定

开关组件的选中状态。

size #

String

默认值：'normal'

开关组件的尺寸。

可选值：'mini', 'small', 'normal', 'large'。不设置时等效于 'normal'。

另可通过元素的 data 属性 data-size 初始化。

animate #

Boolean

默认值：true

切换状态时是否显示过渡动画。

另可通过元素的 data 属性 data-animate 初始化。

disabled #

Boolean

默认值：由元素是否含有 disabled 属性决定

是否禁用开关组件。

readonly #

Boolean

默认值：由元素是否含有 readonly 属性决定

是否只允许获取开关组件的选中状态，而不允许改变。

indeterminate #

Boolean

默认值：false

是否显示为中间状态（不确定状态）。

另可通过元素的 data 属性 data-indeterminate 初始化。

inverse #

Boolean

默认值：false

是否逆向（从右向左）显示 开/关 按键。

另可通过元素的 data 属性 data-inverse 初始化。

radioAllOff #

Boolean

默认值：false

开关组件应用于一组单选按钮时是否全不选。

另可通过元素的 data 属性 data-radio-all-off 初始化。

onColor #

String

默认值：primary

设置开关组件左侧（默认）的 '开' 按键的样式。

可选值：'primary', 'info', 'success', 'warning', 'danger', 'default'。同 Bootstrap 3 的相应风格。

另可通过元素的 data 属性 data-on-color 初始化。

offColor #

String

默认值：default

设置开关组件右侧（默认）的 '关' 按键的样式。

可选值：'primary', 'info', 'success', 'warning', 'danger', 'default'。同 Bootstrap 3 的相应风格。

另可通过元素的 data 属性 data-off-color 初始化。

onText #

String

默认值：'ON'

设置开关组件左侧（默认）的 '开' 按键的文本内容。

也可设为 HTML 字符串。

另可通过元素的 data 属性 data-on-text 初始化。

offText #

String

默认值：'OFF'

设置开关组件右侧（默认）的 '关' 按键的文本内容。

也可设为 HTML 字符串。

另可通过元素的 data 属性 data-off-text 初始化。

labelText #

String

默认值：' '

设置开关组件的 '开' 和 '关' 按键中间的文本内容。

也可设为 HTML 字符串。

另可通过元素的 data 属性 data-label-text 初始化。

handleWidth #

String | Number

默认值：'auto'

设置开关组件左侧或右侧按键的宽度（设数字时单位为像素 px）。

另可通过元素的 data 属性 data-handle-width 初始化。

labelWidth #

String | Number

默认值：'auto'

设置开关组件中间部分的宽度（设数字时单位为像素 px）。

另可通过元素的 data 属性 data-label-width 初始化。

baseClass #

String

默认值：'bootstrap-switch'

设置开关组件全局的样式类的前缀。

另可通过元素的 data 属性 data-base-class 初始化。

wrapperClass #

String | Array

默认值：'wrapper'

设置开关组件最外层容器的样式类。

另可通过元素的 data 属性 data-wrapper-class 初始化。

onInit #

Function

开关组件初始化后的回调方法。

$('input[name="switcher"]').switcher({
  onInit: function(event, state) {
    // do something
  }
});

onSwitchChange #

Function

切换开关组件状态后的回调方法。如果返回 false，将恢复至之前的状态。

$('input[name="switcher"]').switcher({
  onSwitchChange: function(event, state) {
    // do something
  }
});

全局配置 #

可以通过 jQuery 的插件实例全局设置开关组件的配置项。例如

$.fn.switcher.defaults.size = 'large';
$.fn.switcher.defaults.onColor = 'success';

方法 #

配置项方法 #

在开关组件中，每个配置项都可以作为一个方法。

如果省略第二个参数，方法将返回当前配置项的值。

比如可以如下使用配置项对应的方法：

$('input[name="my-checkbox"]').switcher('state'); // get state
$('input[name="my-checkbox"]').switcher('state', true, true); // set state to true

额外的方法 #

特殊行为 #

• 方法 state 可以接收第三个参数 skip。如果设为 true，将不再触发 switchChange 事件。默认值是 false。

• 方法 toggleState 可以接收第二个参数 skip。如果设为 true，将不再触发 switchChange 事件。默认值是 false。

• 方法 wrapperClass 的第二个参数值可以设置为一个等效于 false 的值。此时，组件将还原回默认值 wrapper。

事件 #

开关组件的所有事件都含有命名空间 .bs.switcher。比如可以这样监听开关组件的事件：

$('input[name="my-checkbox"]').on('switchChange.bs.switcher', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

滑块 bs/slider #

ID: bs/slider

一个选择数字值范围的滑块组件。支持 IE9(含) 以上的现代浏览器。

当前版本 v9.8.0。组件原官方地址 On GitHub，以及原文档地址 On GitHub Pages。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入滑块组件依赖。

define(['bs/slider'], function() {
    // Now you can use Slider plugin via .slider() method.
});

当然，也可以直接引入使用。

require(['bs/slider'], function() {
    // Now you can also use Slider plugin via .slider() method.
});

示例 #

示例效果可以前往 滑块组件示例 页面查看。

用法 #

通过 jQuery 插件 #

对一个输入框元素的 jQuery 对象调用 .slider() 方法：

// Instantiate a slider
var mySlider = $("input.slider").slider();

// Call a method on the slider
var value = mySlider.slider('getValue');

// For non-getter methods, you can chain together commands
mySlider
  .slider('setValue', 5)
  .slider('setValue', 7);

通过 Slider 类 #

这种方式需要在引入组件后使用相应参数。创建 Slider 实例时传入一个输入框元素的选择器字符串参数，和一个配置项对象参数（可选）：

require(['bs/slider'], function(Slider) {
  // Instantiate a slider
  var mySlider = new Slider("input.slider", {
    // initial options object
  });

  // Call a method on the slider
  var value = mySlider.getValue();

  // For non-getter methods, you can chain together commands
  mySlider
    .setValue(5)
    .setValue(7);
});

建议通过 jQuery 插件的形式使用。

配置项 #

可以通过 data 属性或 JavaScript 传递配置项参数。对于 data 属性，需要将配置项参数名附着到 data- 后面，例如 data-min="0"。唯一的例外是 formatter 配置项 - 它是一个方法，无法通过 data- 属性的方式初始化。

id #

String

默认值：''

设置滑块组件元素的 ID。

min #

Float

默认值：0

设置滑块组件可以使用的最小值。

max #

Float

默认值：10

设置滑块组件可以使用的最大值。

step #

Float

默认值：1

设置滑块组件的增量步长。

precision #

Float

默认值：step 对应值的小数位数。

计算步长的精度（小数位数）。

orientation #

String

默认值：'horizontal'

滑块组件的排列方向。

可选值为：'vertical' 或 'horizontal'。

value #

Float | Array

默认值：5

初始值。使用 Array 形式值作为组件的滑块范围。

range #

Boolean

默认值：false

设置滑块范围是否可用。在初始化值是一个数组时可选。初始值是一个值时，默认的最大值将作为第二个范围值。

selection #

String

默认值：'before'

设置已选区域的位置。可选值为：'before', 'after' 或 'none'。在一个范围滑块例子中，已选区域为两个范围手柄之间。

tooltip #

String

默认值：'show'

设置自动在拖拽区域显示工具提示，或隐藏工具提示，或始终显示工具提示。对应可选值为：'show', 'hide', 或 'always'。

tooltip_split #

Boolean

默认值：false

设为 false 时，只显示一个工具提示。设为 true 时，为每一个滑块手柄添加工具提示。

tooltip_position #

String

默认值：null

工具提示相对于滑块组件的位置。水平排列的滑块组件的可选值为：'top', 'bottom'，默认值为 'top'；垂直排列的滑块组件的可选值为：'left', 'right'，默认值为 'right'。

handle #

String

默认值：'round'

滑块手柄的形状。可选值：'round', 'square', 'triangle' 或 'custom'。

reversed #

Boolean

默认值：false

设置是否逆向显示滑块组件。

rtl #

Boolean | String

默认值：'auto'

设置是否使用 rtl 模式。父层元素含有属性 dir="rtl" 时自动生效。

enabled #

Boolean

默认值：true

设置滑块组件初始是否是可用的。

formatter #

Function

格式化工具提示内容的回调方法。需要返回格式化后字符串文本。如果返回了一个字符串，将指定为属性 aria-valuetext 的值。

natural_arrow_keys #

Boolean

默认值：false

是否支持键盘的上下左右方向键命令。上方向键将针对于垂直排列的滑块组件向上滑动，右方向键将针对于水平排列的滑块组件向右滑动 - 不管滑块组件是否是反向的。默认情况下，上/右方向键用以增加滑块组件的值，下/左方向键用以减少滑块组件的值。

ticks #

Array

默认值：[]

定义滑块的标记值。标记值常用来指示滑块的多个范围值。该配置项将覆盖 min 和 max 配置项。

ticks_positions #

Array

默认值：[]

定义滑块标记值的百分比位置。第一个值需要设为 0，最后一个值需要设为 100。

ticks_labels #

Array

默认值：[]

定义滑块标记值的显示标签文本。可以设置 HTML 内容。

ticks_snap_bounds #

Float

默认值：0

定义标记值的自动附着范围。当滑块组件的当前值距离某个标记值在该范围之内时，滑块将自动定位到该标记值上。

ticks_tooltip #

Boolean

默认值：false

设置是否显示每个标记值的工具提示。

scale #

String

默认值：'linear'

设置刻度类型。设置为 'logarithmic' 时会使用对数刻度计算步长。

focus #

Boolean

默认值：false

设置滑块组件值改变后是否自动聚焦到适当的手柄上。

labelledby #

String | Array

默认值：null

滑块手柄的 ARIA 标签。多个范围值时可以设为数组。

rangeHighlights #

Array

默认值：[]

设置想要加亮显示的范围值的数组。例如：

[{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}]

方法 #

getValue #

参数：无

获取滑块组件的当前值。

setValue #

参数：

• newValue (Number|String|Array)
• triggerSlideEvent (Boolean)
• triggerChangeEvent (Boolean)

为滑块组件设置新值。如果指定 triggerSlideEvent 参数为 true，将会触发 'slide' 事件；如果指定 triggerChangeEvent 参数为 true，将会触发 'change' 事件。参数 newValue 可以设为一个 Number, String 或 Array 类型的值，如果设为一个 String 类型值，必须要能够转化为一个数字类型，否则会抛出错误。

getElement #

参数：无

获取滑块组件的 div 元素。

destroy #

参数：无

完全清除滑块组件元素并销毁实例。

disable #

参数：无

禁用滑块组件。

enable #

参数：无

启用滑块组件。

toggle #

参数：无

切换滑块组件的禁用和启用状态。

isEnabled #

参数：无

返回滑块组件是否可用（可用返回 true，不可用返回 false）。

setAttribute #

参数：

• attribute (String)
• value (Object)

更新滑块组件的配置项属性值。

getAttribute #

参数：

• attribute (String)

获取滑块组件的配置项属性的值。

refresh #

参数：无

刷新当前滑块组件。

on #

参数：

• eventType (String)
• callback (Function)

为滑块组件添加事件监听。当事件 eventType 发生时，回调方法 callback 将执行。

off #

参数：

• eventType (String)
• callback (Function)

移除滑块组件的事件监听。从事件 eventType 上移除回调方法 callback。

relayout #

参数：无

重新渲染滑块组件（已初始化过）。常用于滑块组件隐藏并重新显示时。

事件 #

分页 bs/paging #

ID: bs/paging

一款基于 Bootstrap 3 风格的分页插件，提供了一系列参数以支持丰富的定制功能。

当前版本 v1.0.2。

引入依赖 #

在使用之前，需要在自己的模块依赖项中加入分页插件依赖。

define(['bs/paging'], function() {
    // Now you can use Paging plugin via .paging() method.
});

当然，也可以直接引入使用。

require(['bs/paging'], function() {
    // Now you can also use Paging plugin via .paging() method.
});

示例 #

示例效果可以前往 分页插件示例 页面查看。

用法 #

分页插件渲染时需要一个用于放置分页 DOM 内容的元素容器，通过对该元素容器的 jQuery 对象调用插件方法 .paging()，即可渲染分页内容。

配置项 totalCount 是必须的，为 0 时将不显示分页内容。

$('#page-wrapper').paging({
    totalCount: 10
});

配置项 #

分页插件支持更多其他用以定制内容的配置项。

size #

String

默认值：'normal'

分页页码显示尺寸。可选值为 sizeMap 中预定义的键（默认为 'large', 'small'）。

sizeMap #

PlainObject

默认值：

{
    'large': "pagination-lg",
    'small': "pagination-sm"
}

改变该配置项后可配合样式表自定义其他的尺寸类型。

alignment #

String

默认值：'left'

分页内容的水平对齐方式。另外可选值：'center', 'right'。

containerClass #

String

默认值：""

分页内容容器的样式类。可自定义类名并配合样式表实现自制分页样式。

itemContainerClass #

Function

默认值：

function (type, page, current) {
    return (page === current) ? "active" : "";
}

可更改该配置项以实现自定义页码容器的样式类。

itemContentClass #

Function

默认值：

function (type, page, current) {
    return "";
}

可更改该配置项以实现自定义页码链接的样式类。

currentPage #

Number

默认值：1

设置当前显示页码。

numberOfPages #

Number

默认值：5

设置每页显示条目数。

totalCount #

Number

默认值：0

初始化总条目数。

pageUrl #

Function

默认值：

function (type, page, current) {
    return null;
}

自定义页码链接。可通过修改该配置项以指定点击页码按钮时跳转页面。

onPageClicked #

Function

默认值：null

定义点击页码按钮后的回调方法。可结合此配置项自行实现异步内容的渲染。

onPageChanged #

Function

默认值：null

定义页码改变后的回调方法。

shouldShowPage #

Function

默认值：

function (type, page, current) {
    var result = true;
    switch (type) {
        case "first":
            result = (current !== 1);
            break;
        case "prev":
            result = (current !== 1);
            break;
        case "next":
            result = (current !== this.totalPages);
            break;
        case "last":
            result = (current !== this.totalPages);
            break;
        case "page":
            result = true;
            break;
    }
    return result;
}

定义每个页码按钮的显示与否的处理逻辑。

tooltip #

Boolean

默认值：false

设置是否以 工具提示 的形式显示页码按钮的标题提示信息。

tooltipOptions #

PlainObject

默认值：

{
    animation: true,
    html: true,
    placement: 'top',
    selector: false,
    title: "",
    container: false
}