阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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

      目录
      目录