插件 Bootstrap Duallistbox 中文API文档

本文目录结构

插件 Bootstrap Duallistbox 中文API文档

源码 & 下载

• Github 地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
• 源码下载： -
• 效果演示： -

Bootstrap Dual Listbox是一个响应式双列表框小部件，针对Twitter Bootstrap进行了优化。适用于所有现代浏览器和触摸设备。

查看官方网站上的演示。

用法

从发布页面下载最新标签或通过凉亭获取：

$ bower install bootstrap-duallistbox

包括jQuery和Bootstrap：

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

包含插件的代码：

<script src="dist/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">

调用插件：

$("#element").bootstrapDualListbox({
    // see next for specifications
});

产品规格

初始化参数对象

调用时，$("#element").bootstrapDualListbox()您可以使用以下零个或多个传递参数对象：

• bootstrap2Compatible，默认为false，true如果您想要与Bootstrap 2的图形兼容性，请将此设置为。
• bootstrap3Compatible，默认为false，true如果您想要与Bootstrap 3的图形兼容性，请将此设置为。
• filterTextClear，默认为’show all’，是“全部显示”按钮的文本。
• filterPlaceHolder，默认为’Filter’，是input过滤元素的元素的占位符。
• moveSelectedLabel，默认为’Move selected’，是“Move Selected”按钮的标签。
• moveAllLabel，默认为’Move all’，是“全部移动”按钮的标签。
• removeSelectedLabel，默认为’Remove selected’，是“删除所选”按钮的标签。
• removeAllLabel，默认为’Remove all’，是“全部删除”按钮的标签。
• moveOnSelect，默认为true，确定是否option在选择时移动s。此选项被强制true在Android浏览器上。
• moveOnDoubleClick，默认为true，确定是否option在双击时移动s。Android浏览器不使用此选项。
• preserveSelectionOnMove，可以’all’（用于选择目标列表中已移动的元素和已选择的元素）或’moved’（仅用于选择移动的元素）; 默认为false。
• selectedListLabel，默认为false，可以是string指定所选列表的名称。
• nonSelectedListLabel，默认为false，可以string指定非选定列表的名称。
• helperSelectNamePostfix，默认为’_helper’。所添加的select旨意具有相同的名称和原来的，用这种级联string和1（对于非选择的列表，例如element_helper1），或2（对于选择的列表中，例如element_helper2）。
• selectorMinimalHeight，默认为100，表示生成的双列表框的最小高度。
• showFilterInputs，默认为true，是否显示过滤器输入。
• nonSelectedFilter，默认为空字符串’’，使用非选定元素的过滤器初始化双列表框。仅在showFilterInputs设置为时应用此选项true。
• selectedFilter，默认为空字符串’’，使用所选元素的过滤器初始化双列表框。仅在showFilterInputs设置为时应用此选项true。
• infoText，默认为’Showing all {0}’，确定string所有选项可见时使用的格式。将其设置false为隐藏此信息。请记住插入{0}占位符。
• infoTextFiltered，默认为’<span class="label label-warning">Filtered</span> {0} from {1}’，确定在过滤某个元素时要使用的元素格式。请记住插入{0}和{1} 占位符。
• infoTextEmpty，默认为’Empty list’，确定string在列表中没有选项时使用。
• filterOnValues，默认为false，将其设置为根据s而不是HTML内容true过滤options value。
• iconsPrefix，默认为oi，将其设置为图标族使用的前缀。
• iconMove，默认为oi-arrow-thick-right，设置移动图标的类。
• iconRemove，默认为oi-arrow-thick-left，设置删除图标的类。

方法

您可以通过调用其方法来修改双列表框的行为和方面，所有方法都接受a value和a refresh选项。在value确定新的参数值，而refresh（可选，默认为false）告诉是否更新插件UI或没有。

要在双列表框实例上调用方法，请使用以下语法：

$(selector).bootstrapDualListbox(methodName, parameter);

注意：对插件进行多个链式调用时，设置refresh为true仅调用最后一个调用，以便进行唯一的UI更改; 或者，您也可以将该refresh方法称为最后一个方法。

以下是可用的方法：

• setBootstrap2Compatible(value, refresh)更改bootstrap2Compatible参数。
• setBootstrap3Compatible(value, refresh)更改bootstrap3Compatible参数。
• setFilterTextClear(value, refresh)更改filterTextClear参数。
• setFilterPlaceHolder(value, refresh)更改filterPlaceHolder参数。
• setMoveSelectedLabel(value, refresh)更改moveSelectedLabel参数。
• setMoveAllLabel(value, refresh)更改moveAllLabel参数。
• setRemoveSelectedLabel(value, refresh)更改removeSelectedLabel参数。
• setRemoveAllLabel(value, refresh)更改removeAllLabel参数。
• setMoveOnSelect(value, refresh)更改moveOnSelect参数。
• setMoveOnDoubleClick(value, refresh)更改moveOnDoubleClick参数。
• setPreserveSelectionOnMove(value, refresh)更改preserveSelectionOnMove参数。
• setSelectedListLabel(value, refresh)更改selectedListLabel参数。
• setNonSelectedListLabel(value, refresh)更改nonSelectedListLabel参数。
• setHelperSelectNamePostfix(value, refresh)更改helperSelectNamePostfix参数。
• setSelectOrMinimalHeight(value, refresh)更改selectorMinimalHeight参数。
• setShowFilterInputs(value, refresh)更改showFilterInputs参数。
• setNonSelectedFilter(value, refresh)更改nonSelectedFilter参数。
• setSelectedFilter(value, refresh)更改selectedFilter参数。
• setInfoText(value, refresh)更改infoText参数。
• setInfoTextFiltered(value, refresh)更改infoTextFiltered参数。
• setInfoTextEmpty(value, refresh)更改infoTextEmpty参数。
• setFilterOnValues(value, refresh)更改filterOnValues参数。

此外，您可以致电：

• refresh()或更新插件元素UI trigger的bootstrapDualListbox.refresh事件。
• destroy()恢复原始select元素并删除插件元素。
• getContainer() 获取容器元素。

结构体

项目的基本结构如下：

├── demo/
│   └── index.html
├── dist/
│   ├── bootstrap-duallistbox.css
│   ├── bootstrap-duallistbox.min.css
│   ├── jquery.bootstrap-duallistbox.js
│   └── jquery.bootstrap-duallistbox.min.js
├── src/
│   ├── bootstrap-duallistbox.css
│   └── jquery.bootstrap-duallistbox.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bootstrap-duallistbox.jquery.json
├── bower.json
├── Gruntfile.js
└── package.json

demo/

包含一个简单的HTML文件来演示您的插件。

DIST /

这是Grunt运行后存储生成的文件的位置。

SRC /

包含源文件，包括js和css。

.editorconfig

此文件用于统一不同编辑器和IDE的编码样式。

如果您还没有听说过这个项目，请查看editorconfig.org。

.gitignore

我们不希望Git跟踪的文件列表。

有关详细信息，请查看此Git忽略文件指南。

.jshintrc

JSHint用于检测JavaScript中的错误和潜在问题的规则列表。

如果您还没有听说过这个项目，请查看jshint.com。

.travis.yml

使用Travis进行连续积分的定义。

如果您还没有听说过这个项目，请检查travis-ci.org。

bootstrap-duallistbox.jquery.json

用于在jQuery插件注册表中发布插件的包清单文件。

有关详细信息，请查看此程序包清单指南。

Gruntfile.js

包含使用Grunt的所有自动化任务。

如果你还没有听说过这个项目，请检查gruntjs.com。

package.json

指定通过Node.JS加载的所有依赖项。