当前位置:主页 > JavsScript库 > 表单 >

JavaScript中增强的下拉选择 - LC-select
栏目分类:表单   发布日期:2021-09-13   浏览次数:

LC-select 是一个无依赖的 JavaScript 库,旨在通过自定义图像、实时搜索等高级功能增强本机 select 元素。

更多功能:

  • 黑暗与光明主题。

  • 选择多个选项,就像标签输入一样。

  • 响应式和移动友好。

使用:

1. 下载并在页面上包含 LC-select 的文件。

<!-- 浅色主题 -->
<link href="themes/light.css" rel="stylesheet" />
<!-- 或黑暗主题 -->
<link href="themes/dark.css" rel="stylesheet" />
<!-- 核心 JavaScript -->
<script src="lc_select.js"></script>

2. 只需在您现有的选择元素上初始化插件并完成。

new lc_select(document.querySelector('select'), {
    // 这里的选项
});

3. 使用data-image属性将自定义图像添加到选项。

<select name="simple">
  <optgroup label="javascript" data-image="js.svg">
    <option value="vue" data-image="vue.svg">Vue.js</option>
    <option value="react" data-image="react.png">React</option>
    <option value="angular" data-image="angular.png">Angular</option>
  </optgroup>
  ...
</select>

4. 自定义选择的占位符。

<select ata-placeholder="Select A Language...">
  <optgroup label="javascript" data-image="js.svg">
    <option value="vue" data-image="vue.svg">Vue.js</option>
    <option value="react" data-image="react.png">React</option>
    <option value="angular" data-image="angular.png">Angular</option>
  </optgroup>
  ...
</select>

5. 确定是否启用实时搜索功能。默认值:true。

new lc_select(document.querySelector('select'), {
    enable_search  : true,
    min_for_search : 7, // 显示 7 个结果
});

6. 确定允许在多选中选择的最大选项数。

new lc_select(document.querySelector('select'), {
    max_opts: 6
});

7. 更多默认配置。

new lc_select(document.querySelector('select'), {
 
    // 定义包装宽度
    wrap_width: 'auto',
 
    // 额外的 CSS 类
    addit_classes: [],
 
    // 使用占位符文本
    pre_placeh_opt : false,
 
    // 自定义标签
    labels: [ 
      'search options',
      'add options',
      'Select options ..',
      '.. no matching options ..',
    ],
 
    // 回调函数
    on_change: function(new_value, target_field) {
      // do something
    }
     
});

8. API 方法。

// 重新同步
const resyncEvent = new Event('lc-select-refresh');
select.dispatchEvent(resyncEvent);
 
// 破坏
const destroyEvent = new Event('lc-select-destroy');
select.dispatchEvent(destroyEvent);

官方网站:https://github.com/LCweb-ita/LC-select

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库