README

一个无需依赖的 JavaScript 插件，用于以简洁的标记和性能为重点来美化 <select> 元素。

注意：对于使用 Vue.js 框架构建的项目，vue-blob-select 分支可能更适合。

特性

blob-select 具有与标准 <select>、<option> 和 <optgroup> 属性的相同特性，包括

<select multiple=multiple>
<select disabled=disabled>
<optgroup disabled=disabled>
<option disabled=disabled>

blob-select 还提供对以下功能的支持

占位符
搜索
排序

要求

blob-select 是用纯 JavaScript 编写的，不依赖于任何第三方框架。

它与所有主流现代网络浏览器兼容，包括 ~~那个永远不会死的浏览器~~ IE 11。

此插件确实使用了某些 ES6 标记，如 let 和 const。如果您的项目需要支持旧浏览器，您需要首先使用像 Babel 这样的工具将 blobselect.min.js 转换为 ES5，然后向访客提供该副本。

使用

安装

下载 dist/blobselect.min.js 并将其添加到您的项目文件夹中，并在页面上包含它。

<script src="/path/to/blobselect.min.js"></script>

除了主要脚本外，您还需要一些 CSS 样式。您可以从 dist/css/ 中插入默认样式表，或者查看 src/scss/ 中的源代码来自定义样式。

配置

blob-select 包含了一些对标准 select 浏览器对象的精选功能增强，但并不试图引入人类或动物所能想到的每一个特性。这些设置可以通过以下三种方式之一为每个元素定义

<!--
  Pass all options in JSON format via a data-blobselect
  attribute. More specific attributes (see below), if
  present, take priority.
-->
<select data-blobselect='{"foo" : "bar", …}'></select>

<!--
  Pass individual options via kabob-case data attributes.
  For example, set "orderType" via
  data-blobselect-order-type="…".
-->
<select data-blobselect-foo="bar"></select>

<!--
  Alternatively, you can set elements in Javascript when
  calling the constructor.
-->
<script>
    document.getElementById('my-select').blobSelect({
        foo : "bar",
        …
    });
</script>

以下设置可用

初始化

blob-select 将自动初始化包含 data-blobselect* 属性的任何 <select> 元素，在 DOMContentLoaded 上。或者，您可以按照以下方式在任意时刻手动初始化一个元素

// Regular ol' JS.
document.getElementById('my-select').blobSelect.init({…});

// jQuery example.
$('#my-select')[0].blobSelect.init({…});

销毁

要使您的页面恢复到其自然状态，只需运行

document.getElementById('my-select').blobSelect.destroy();

重绘

blob-select 将自动监听 change 事件，但某些 JavaScript 框架可能会在没有触发事件的情况下写入更改。这里有两种解决方案

监视:

将 watch 运行时属性设置在字段上。这将向混合添加 setInterval() 触发器，每 X 毫秒检查一次 DOM 的更改（并在必要时重建）。

<!-- Will look for changes every half-second. -->
<select data-blobselect-watch="500">…</select>

element.blobSelect.buildData():

在更改落地后调用 .buildData() 方法。

// Place this after secret, non-event-firing changes have run.
document.getElementById('my-select').blobSelect.buildData();

样式

blob-select 力求尽可能无烦恼。其标记是最小的（见下文），它不强制执行讨厌的内联样式、JavaScript 动画或复杂的嵌套 > 嵌套 > 嵌套元素。前端开发人员可以自由地通过优雅的 CSS 巧克力技艺来定义一切。

HTML 结构如下

<!--
  .blobselect: The main container.

    &.is-multiple: If the <select> is [multiple].

    &.is-open: The dropdown is open.

    &.is-opening: The dropdown is opening. This is a quick
    transitional class that exists solely to allow you to
    do things like animate from display:none.

    &.is-disabled: The <select> is disabled.

  Note: Do not add any of these classes manually.
-->
<div class="blobselect">

    <!--
      .blobselect-selections: Selection(s) container.
    -->
    <div class="blobselect-selections">
    
        <!--
          .blobselect-selection: A single section.

            &.is-placeholder: The "selected" item is a
            placeholder.

          Note: [multiple] selects can have more than one
          .blobselect-selection.
        -->
        <div class="blobselect-selection" data-value="apples" data-label="Apples">Apples</div>
    </div>
    
    <!-- The original <select> is now here. -->
    <select name="foobar" id="foobar" class="foobar">…</select>

    <!--
      .blobselect-button: This is a superfluous element to
      help you draw something like a button. The example
      CSS uses :after to make a triangle.

      Note: Click events are bound to the entire
      .blobselect container, so if you don't need this, you
      can display:none it to get it out of your hair.
    -->
    <div class="blobselect-button"></div>

    <!--
      .blobselect-items: The styleable dropdown.
    -->
    <div class="blobselect-items">
    
        <!--
          .blobselect-item-search: A search field to filter
          visible items. This is only present when the
          option { search: true } is set.

          Note: So as not to interfere with <form> data,
          this is a contentEditable <div>. Of course it can
          and/or should be styled to *look* like a regular
          text <input>, but this way no data will be sent
          back to the server. Neat, huh?
        -->
        <div class="blobselect-item-search" type="text" contenteditable="true"></div>

        <!--
          .blobselect-item: A single option.
            
            &.is-active: This option is selected.
            
            &.is-placeholder: This is just a placeholder.
            
            &.is-disabled: The <option> or its <optgroup>
            are disabled.
            
            &.is-focused: The <option> has focus. This is
            intended to aid with keyboard-based navigation.
            
            &.has-group: This <option> is part of an
            <optgroup>.
            
            &.is-match: A search/filter matches this
            <option>.
            
            &.is-not-match: A search/filter does not match
            this <option>. Generally you would want to use
            this to display:none unwanted items.

          NOTE: When a search/filter is applied, partial
          matches are wrapped in <mark> tags. You can style
          that with e.g. .blobselect-item > mark { … }
        -->
        <div class="blobselect-item" data-value="option value" data-label="Option Label">Option Label</div>
        
        <!--
          .blobselect-item-group: An <optgroup> label.
          
            &.is-disabled: The <optgroup> is disabled.
        -->
        <div class="blobselect-item-group">Fruit</div>
    </div>
</div>

SCSS 源文件夹包括一些示例样式，应该提供起点和/或灵感。 :)

许可

本作品是免费的。您可以在“做什么都行公共许可证”第2版下重新分发或修改它。

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

blobfolio / blob-select

维护者

详细信息

README

目录

特性

要求

使用

安装

配置

初始化

销毁

重绘

样式

许可

捐赠