插件 Bootstrap Duallistbox 中文API文档

🌙
手机阅读
本文目录结构

插件 Bootstrap Duallistbox 中文API文档

源码 & 下载

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>