纯js超酷下拉框插件tastySelect

所属分类:输入-选择框

 28736  349  查看评论 (3)
分享到微信朋友圈
X
纯js超酷下拉框插件tastySelect ie兼容10

tastySelect

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

使用方法

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

<link href="css/tastySelect.css" rel="stylesheet" type="text/css">
<script src="js/tastySelect.min.js"></script>

HTML结构

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

<select name="" id="tastySelect" multiple>
  <optgroup label="JavaScript">
    <option value="jQuery">jQuery</option>
    <option value="React">ReactJS</option>
    <option value="Angular">AngularJS</option>
  </optgroup>
  <optgroup label="HTML">
    <option value="HTML5">HTML 5</option>
    <option value="XML">XML</option>
    <option value="XHTML">XHTML</option>
  </optgroup>
  <option value="css">CSS/SCSS/LESS</option>
  <option value="more">More Options Here</option>
</select>

初始化插件

通过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',
  },
});


相关插件-选择框

vue2.0实现全选,全不选。

当单个选中所有时,全选自动变成全选状态;当全选后,取消其中一个,全选状态改变。
  选择框
 34446  361

jQuery下拉框美化插件

jQuery自定义select下拉框美化插件
  选择框
 42371  361

省市县三级联动加载地图

可以本地控制插件、地区三级级联查询、地区联动地图的插件,在线搜索
  选择框
 38281  452

jQuery省市区三级联动插件(可自定义样式)

PC端省市区三级联动插件,可自定义样式,支持两种数据初始化方式,最新的省市县的json数据,带有详细的使用说明
  选择框
 48209  492

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    憧憬未来 0
    2019/6/24 17:17:07
    可以动态加载选项吗
    回复
    旧同桌 ?? 0
    2018/5/30 10:39:08
    飞流不断流 0
    2018/4/4 19:50:19
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复