JavaScript库 - nice-select

nice-select是一款基于jQuery的插件，可以改进HTML的select元素，增加美观的样式和动画效果。经常被用在网页表单中的下拉选择框中。

安装

可以通过直接下载源代码或使用npm安装进行使用。

直接下载

可以从Github中下载源代码，把dist目录下的jquery.nice-select.min.css和jquery.nice-select.min.js文件引入到HTML中即可。

<link rel="stylesheet" href="path/to/your/jquery.nice-select.min.css">
<script src="path/to/your/jquery.nice-select.min.js"></script>

npm 安装

使用npm安装，然后引入即可

npm install jquery-nice-select --save

import 'jquery-nice-select/css/nice-select.css';
import 'jquery-nice-select/js/jquery.nice-select.min.js';

使用

要使用nice-select，你只需一个HTML Select标签和少量的jQuery代码即可。

<select class="nice-select">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

$('.nice-select').niceSelect(); 

样式可自定义，选择器可以通过options和classes进行配置。此外，nice-select还具有可选项，如open和close事件和update方法。

$('.nice-select').niceSelect({
  onChange: function(value) {
    console.log(value); 
  }
});

特征

• 轻量级
• 可配置的选择器
• 自定义样式
• 可选的开放和关闭事件
• 可选的回调函数
• 可选的 update 方法

示例

你可以在这里查看具有更多选项和beautiful样式的演示。