当前位置:JS特效 » 其他 » 纯js超酷select下拉框美化插件
 纯js超酷select下拉框美化插件
如果您觉得内容不错,请分享:

插件介绍

tastySelect是一款纯js超酷select下拉框美化插件。tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:74
简要教程

tastySelect是一款纯js超酷select下拉框美化插件。tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方。

使用方法

在页面中引入tastySelect.css和tastySelect.min.js文件。



                
HTML结构

如果要创建多选的下拉选择框,它的HTML结构如下:


                
初始化插件

通过tastySelect()方法来初始化该select下拉框美化插件。

tastySelect({
  defaultText: "通过 (Ctrl+Click)组合键可以选择多个选项",
});                 
                

配置参数

tastySelect下拉框插件的可用配置参数如下:

tastySelect({
  selector: 'select',
  mobileFix: true,
  mask: '%',
  maskJoin: ', ',
  defaultText: 'Select item...',
  classes : {
    outer: 'style-select',
    title: 'style-select-title',
    options: 'style-select-options',
    label: 'style-select-label',
    optgroup: 'style-select-optgroup',
    list: 'style-select-list',
    item: 'style-select-option',
    open: 'st_open',
    selected: 'st_selected',
    mobile: 'is_mobile',
  },
  attributes : {
    index: 'data-index',
    value: 'data-value',
    selectReady: 'data-tastyselect',
  },
});                  
                

tastySelect下拉框插件的github地址为:https://github.com/jekyenin/tastySelect

Top