选择拖带 ^{(CrestApps分叉) (英语)}

一个无依赖性,香草JavaScript插件,将所选择的元素带入21世纪,带有直观多选,搜索,以及更多——为Bootstrap 5+.

关于这个叉子

这个项目是原作的叉子 快速任命/短跑选择。 。 。 .

原画 bootstrap-select 是一个出色的,经过战斗测试的插件,但它 取决于 查询 并且有一段时间没有看到积极维修。 因为 现代 Bootstrap(v5+) 放弃了对jQuery的依赖,许多项目都是 完全远离J查询 我们决定用 以下目标:

• 完全删除 j 查询依赖 - 图书馆现在写在 平地、香草爪哇脚本和船舶 无运行时间依赖关系 (其他职等) 比靴子本身.
• 支持 Bootstrap 5 并仅支持后期 更古老的靴子和查问 兼容性路径故意超出范围.
• 船舶现代分销格式 一揽子措施包括一等无害环境管理, CommunityJS,和浏览器-Global UMD从同源代码构建.
• 使用现代建筑管道 - 叉子不再依赖Grut或Less; 建筑与Rollup、Sass和目前的文件/工具堆一起生产.
• 保持选择增强功能的设置,同时优先考虑一个现代的,小的, 仅转发 API.

所需资源

• 鞋带 5+ (CSS和JS,包括其捆绑的波普).

快开始

安装方式 无数字 :

npm install @crestapps/bootstrap-select bootstrap

装上"靴子"5,然后"靴子"选择的CSS和JS. 装入选择的靴子 在 Bootstrap 的 Java 脚本之后 当使用浏览器-全局构建时.

<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- bootstrap-select -->
<link rel="stylesheet" href="dist/css/bootstrap-select.min.css">
<script src="dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) translation files -->
<script src="dist/js/i18n/defaults-*.min.js"></script>

使用 CDN 架构

软件包发布到 npm后,也可以通过 (原始内容存档于2018-09-21). jsDelivr. 在生产中优先选择清晰的软件包版本:

<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- @crestapps/bootstrap-select from jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crestapps/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/@crestapps/[email protected]/dist/js/bootstrap-select.min.js"></script>

您可以替换 @1.2.3 您想要消费的版本。 期间 发展, @latest 也行,但固定的版本比较安全 部署.

软件包格式

软件包现在从同一处装入了三款一等JavaScript输入样式 源代码 :

重要内容: 选择的靴子仍然是浏览器插件 。 无害环境管理 普通JS 构建用于浏览器捆绑或类似浏览器的运行时间 DOM,不只服务器的Node.js执行.

无害环境管理

使用软件包 import 条目或直接 .mjs 文件 :

import 'bootstrap/dist/css/bootstrap.min.css';
import '@crestapps/bootstrap-select/dist/css/bootstrap-select.css';
import Selectpicker, { Selectpicker as NamedSelectpicker } from '@crestapps/bootstrap-select';

const picker = new Selectpicker('#my-select', {
  liveSearch: true
});

console.log(Selectpicker === NamedSelectpicker); // true

无害环境管理的构建以模块为范围;确实如此 没有 添加 window.Selectpicker。 。 。 . 如果您喜欢直接导入文件, 请使用 @crestapps/bootstrap-select/dist/js/bootstrap-select.esm.mjs。 。 。 .

常见JS

使用软件包 require() 条目或直接 .cjs 文件 :

require('bootstrap');
require('@crestapps/bootstrap-select/dist/css/bootstrap-select.css');

const Selectpicker = require('@crestapps/bootstrap-select');
// or: const { Selectpicker } = require('@crestapps/bootstrap-select');

const picker = new Selectpicker('#my-select', {
  liveSearch: true
});

通用JS条目导出该类为:

• module.exports = Selectpicker
• module.exports.Selectpicker = Selectpicker
• module.exports.default = Selectpicker

与无害环境管理建设一样,共同JS构建的模块有范围,并且确实 没有 添加 window.Selectpicker。 。 。 . 如果您喜欢直接文件需要, 请使用 @crestapps/bootstrap-select/dist/js/bootstrap-select.cjs。 。 。 .

浏览器 Global / UMD

装入时 <script> 标签, UMD 架构显示一个全局 window.Selectpicker 编号 : Selectpicker数字 :

<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- @crestapps/bootstrap-select from jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crestapps/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/@crestapps/[email protected]/dist/js/bootstrap-select.min.js"></script>

<script>
  const picker = new Selectpicker('#my-select', {
    liveSearch: true
  });
</script>

使用量

通过 selectpicker 类(自动)

添加数据 selectpicker 课到您的 <select> 要素。 他们是 dOM 准备好后自动初始化——不需要JavaScript.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

现有的靴子陷阱选择使用标记 title="..." 占位符或 data-width="fit" 还支持:

<select class="selectpicker" title="Content Type" data-width="fit">
  <option>Article</option>
  <option>Blog Post</option>
</select>

选择指标

对于单项选择, 使用 show-tick 默认检查标记,或设置 data-selection-indicator="checkbox" 制作无线电式指标 自动。 在多选题上, data-selection-indicator="checkbox" 制作一个 复选框列.

<select class="selectpicker show-tick">
  <option>Article</option>
  <option selected>Blog Post</option>
</select>

<select class="selectpicker" data-selection-indicator="checkbox">
  <option>Article</option>
  <option selected>Blog Post</option>
</select>

<select class="selectpicker" multiple data-selection-indicator="checkbox">
  <option selected>Bootstrap 5</option>
  <option>Vue</option>
</select>

Via Java 脚本

初始化实例 Selectpicker 从您所选模块中选取的课 样式。 您可以通过元素或 CSS 选择字符串 :

// Initialize a single select
const picker = new Selectpicker('#my-select', {
  liveSearch: true,
  size: 8
});

// Or reuse an existing instance / create one if needed
const picker2 = Selectpicker.getOrCreateInstance(document.querySelector('#my-select'));

要同时初始化几个元素, 请绕过它们 :

document.querySelectorAll('.my-select').forEach(function (el) {
  new Selectpicker(el);
});

呼叫方法

方法直接适用于下列情况:

const picker = Selectpicker.getInstance('#my-select');

picker.val('Cheese');     // set the value
picker.refresh();         // re-render after changing the underlying <select>
picker.selectAll();       // (multiple selects)
picker.destroy();         // remove the plugin and restore the original <select>

见 方法 完整名单.

将自定义 HTML 化

data-content HTML通过靴子-选择的内置零依赖性消毒器默认进行消毒.

如果你喜欢专用的消毒器,例如 多维化,保留 sanitize: true 并提供一个 sanitizeFn。钩子接收一阵DOM节点,因此将每个已设置的节点进行消毒:

import DOMPurify from 'dompurify';

new Selectpicker('#my-select', {
  sanitize: true,
  sanitizeFn: function (domNodes) {
    domNodes.forEach(function (node) {
      node.innerHTML = DOMPurify.sanitize(node.innerHTML);
    });
  }
});

这使得库的依赖性在默认情况下保持了自由,同时让应用程序在需要时选择使用库支持的消毒器.

活动

活动作为本地活动发送 CustomEvent原文 <select> 元素(名称与原始名称完全相同) *.bs.select 事件)并可能 听到吗 addEventListener数字 :

const select = document.querySelector('#my-select');

select.addEventListener('changed.bs.select', function (e) {
  // e.detail = { clickedIndex, isSelected, previousValue }
  console.log('value changed', e.detail);
});

select.addEventListener('show.bs.select', function (e) {
  // e.detail.bsEvent is the original Bootstrap dropdown event
  console.log('opening from', e.detail.bsEvent.relatedTarget);
});

select.addEventListener('loaded.bs.select', function () { /* ... */ });

可用事件 : loaded, (中文(简体) ), rendered, (中文(简体) ), refreshed, (中文(简体) ), changed, (中文(简体) ), show, (中文(简体) ), shown, (中文(简体) ), hide, (中文(简体) ), hidden, (中文(简体) ), maxReached, (中文(简体) ), maxReachedGrp, (中文(简体) ), fetched ——每个 后缀为 .bs.select。 。 。 .

文档

完整文件托管地点: (原始内容存档于2018-10-21). publictrap-select.crestapps.com, (中文(简体) ), 包括 开始, (中文(简体) ), 实例, (中文(简体) ), 选项,以及 方法,以及 活动。 。 。 .

当地建筑

从源头与软件包合作,安装依赖和构建 dist/数字 :

# Requires Node.js 20.19 or newer for the development toolchain.
npm install
npm run build

有用的本地工作流程 :

npm run lint
npm test

关于文档站点命令和本地 Docusaurus 设置,见 docs/README.md。 。 。 .

错误和特性请求

欢迎任何人和每个人作出贡献。 请审查 提交文件的准则。 。 。 .

版权和许可证

版权(C)2012-2018年 SnapAccidents, 有限责任公司 (原始内容存档于2013-10-12). 分叉修改 版权 (C) CrestApps.

许可证根据 麻省理工学院执照。 。 。 .