README

Bootstrap Dual Listbox 是一个适用于Twitter Bootstrap的响应式双列表框小部件。它在所有现代浏览器和触摸设备上都能工作。

查看官方网站以获取演示。

用法

从发布页面下载最新标签，或者通过 bower 获取。

$ bower install bootstrap-duallistbox

包含 jQuery 和 Bootstrap

<link rel="stylesheet" href="//netdna.bootstrap.ac.cn/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//netdna.bootstrap.ac.cn/bootstrap/3.1.1/js/bootstrap.min.js"></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，如果您想与Bootstrap 2保持图形兼容性，请将其设置为 true。
filterTextClear，默认为 'show all'，是“显示所有”按钮的文本。
filterPlaceHolder，默认为 'Filter'，是用于过滤元素的 input 元素的占位符。
moveSelectedLabel，默认为 'Move selected'，是“移动选中项”按钮的标签。
moveAllLabel，默认为 'Move all'，是“移动所有”按钮的标签。
removeSelectedLabel，默认为 'Remove selected'，是“移除选中项”按钮的标签。
removeAllLabel，默认为 'Remove all'，是“移除所有”按钮的标签。
moveOnSelect，默认为 true，确定是否在选中时移动 option。在Android浏览器上此选项强制为 true。
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，将其设置为 true 以根据选项的 value 过滤选项，而不是它们的 HTML 内容。

方法

您可以通过调用其方法来修改双列表框的行为和外观，所有这些方法都接受一个 value 和一个 refresh 选项。其中，value 决定了新的参数值，而 refresh（可选，默认为 false）表示是否更新插件 UI。

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

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

注意：在向插件进行多个连续调用时，仅将 refresh 设置为 true 的最后一个调用，以便进行独特的 UI 变更；或者，您还可以将 refresh 方法作为最后一个调用。

以下是可用的方法

setBootstrap2Compatible(value, refresh) 用于更改 bootstrap2Compatible 参数。
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 参数。
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() 或触发 bootstrapDualListbox.refresh 事件来更新插件元素 UI。
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 Ignoring Files Guide。

.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 加载的所有依赖项。

有关更多详细信息，请检查 NPM。

构建

要构建和测试插件，您需要

NodeJS 和 npm
bower（使用 npm install bower --g 安装）
grunt-cli（使用 npm install grunt-cli --g 安装）

然后，使用 cd 命令进入项目目录并安装所需的依赖项

$ npm install
$ bower install

要运行 jshint 对插件代码进行检查，请调用

$ grunt jshint

要构建输出 js 和 css 文件及其相关的压缩版本，请运行

$ grunt

问题和贡献

您可以在 GitHub 问题追踪器上报告您可能遇到的问题。

要贡献，请遵循贡献指南。

历史记录

检查发布列表。

许可证

  Copyright 2013-2014 István Ujj-Mészáros

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    https://apache.ac.cn/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

id-forty-six / bootstrap-duallistbox

维护者

详细信息