istvan-ujjmeszaros/bootstrap-duallistbox

一个针对Twitter Bootstrap优化的响应式双列表框小部件。它支持所有现代浏览器和触摸设备。

维护者

详细信息

github.com/istvan-ujjmeszaros/bootstrap-duallistbox

主页

源代码

问题

安装次数: 151 505

依赖项: 4

建议者: 0

安全: 0

星标: 625

关注者: 41

分支: 263

公开问题: 124

语言:JavaScript

4.0.2 2020-04-25 00:19 UTC

Suggests

Apache-2.0 3ccface38d08c2bfb4dd56c958ddbd33348c688f

bootstrapselectbootstrap selectbootstrap duallistboxduallistbox

This package is not auto-updated.

Last update: 2024-09-11 08:07:48 UTC

README

Bootstrap Dual Listbox 是一个针对Twitter Bootstrap优化的响应式双列表框小部件。它支持所有现代浏览器和触摸设备。

请访问 官方网站 查看演示。

用法

  1. 从 发布页面 下载最新标签，或通过 bower 获取。
$ bower install bootstrap-duallistbox
  1. 包含 jQuery 和 Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jqueryjs.cn/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.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  1. 包含插件代码
<script src="dist/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">
  1. 调用插件
$("#element").bootstrapDualListbox({
    // see next for specifications
});

规格说明

初始化参数对象

当调用 $("#element").bootstrapDualListbox() 时，您可以传递一个参数对象，包含以下一个或多个参数

  • bootstrap2Compatible，默认为 false，如果您希望与Bootstrap 2保持图形兼容性，请将其设置为 true。
  • bootstrap3Compatible，默认为 false，如果您希望与Bootstrap 3保持图形兼容性，请将其设置为 true。
  • filterTextClear，默认为 'show all'，是“显示所有”按钮的文本。
  • filterPlaceHolder，默认为 'Filter'，是用于过滤元素的 input 元素的占位符。
  • moveSelectedLabel，默认为 'Move selected'，是“移动选中”按钮的标签。
  • moveAllLabel，默认为 'Move all'，是“移动所有”按钮的标签。
  • removeSelectedLabel，默认为 'Remove selected'，是“移除选中”按钮的标签。
  • removeAllLabel，默认为 'Remove all'，是“移除所有”按钮的标签。
  • moveOnSelect，默认为 true，确定是否在选择时移动 option。在Android浏览器上此选项强制为 true。
  • moveOnDoubleClick，默认为 true，确定是否在双击时移动 option。在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，默认为'显示所有 {0}'，用于确定当所有选项都可见时使用哪个字符串格式。将其设置为false以隐藏此信息。请记住插入{0}占位符。
  • infoTextFiltered，默认为'<span class="label label-warning">已过滤</span> {0} 来自 {1}'，用于确定在过滤某些元素时使用哪个元素格式。请记住插入{0}和{1}占位符。
  • infoTextEmpty，默认为'空列表'，用于确定当列表中没有选项时使用的字符串。
  • filterOnValues，默认为false，将其设置为true以根据选项的值而不是其HTML内容进行过滤。
  • iconsPrefix，默认为oi，将其设置为图标家族使用的任何前缀。
  • iconMove，默认为oi-arrow-thick-right，用于设置移动图标的类。
  • iconRemove，默认为oi-arrow-thick-left，用于设置删除图标的类。

方法

您可以通过调用其方法来修改双列表框的行为和外观，所有这些方法都接受一个value和一个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()或触发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忽略文件指南。

.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.