900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html5 下拉框 美化 纯js超酷select下拉框美化插件

html5 下拉框 美化 纯js超酷select下拉框美化插件

时间:2019-04-22 15:28:05

相关推荐

html5 下拉框 美化 纯js超酷select下拉框美化插件

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

使用方法

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

HTML结构

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

jQuery

ReactJS

AngularJS

HTML 5

XML

XHTML

CSS/SCSS/LESS

More Options Here

初始化插件

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

},

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。