可定制和动画下拉插件 - 不错的选择

可定制和动画下拉插件 - 不错的选择

版本:

浏览量:225

最后更新:2021-09-05

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

另一个 jQuery(Vanilla JavaScript)选择替换插件,通过一个 JS 调用将您的原生 html 选择框转换为可定制的 CSS3 动画下拉列表。

该插件将转换一个标准的选择框:

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

进入一个易于样式的 html 列表:

<div class="nice-select">
  <span class="current">Option 1</span>
  <ul class="list">
    <li class="option selected">Option 1</li>
    <li class="option">Option 2</li>
    <li class="option">Option 3</li>
  </ul>
</div>

也可以看看:

  • 替换原生选择框的 10 个最佳下拉插件

如何使用它:

1. 添加对nice-select.css和 的引用nice-select.js

<!-- Vanilla JS Version -->
<link href="css/nice-select2.css" rel="stylesheet" />
<script src="js/jquery.nice-select2.js"></script>
 
<!-- jQuery Version -->
<link href="css/nice-select.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/jquery.nice-select.js"></script>

2. 调用元素niceSelect()的函数select并完成。

// Vanilla JS Version
NiceSelect.bind(document.getElementById("mySelect"));
 
// jQuery Version
$('#mySelect').niceSelect();

3. 使下拉列表全宽。

<select class="wide">
  ...
</select>

4. 使下拉列表右对齐。

<select class="right">
  ...
</select>

5. 生成一个紧凑的下拉列表。

<select class="small">
  ...
</select>

6. 为每个选项设置替代文本。

<select id="mySelect">
  <option data-display="Custom Text">Option 1</option>
  ...
</select>

7. 启用实时搜索功能(仅在 nice select 2 中可用)。

NiceSelect.bind(document.getElementById("mySelect"), {
  searchable: true
});

8. API 方法。

// destroy the instance
instance.destroy();
 
// up<a href="https://www.jqueryscript.net/time-clock/">date</a> the select
instance.update();

变更日志:

2021-09-01

  • 将焦点事件同步到原始元素

2016-05-09

  • 添加更新和销毁方法

2016-02-16

  • 改进对 IE <= 10 的支持

2016-02-03

  • 调整样式

2015-12-31

  • 添加对禁用选项的支持

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。