pickout-纯JS炫酷下拉列表框美化插件 |其他|下载

简要教程

pickout.js是一款效果非常炫酷的纯JavaScript下拉列表框美化插件。该下拉列表框插件大小仅5kb，在用户点击了列表框时，会弹出类似模态窗口的下拉列表，还可以对列表中的选项进行搜索过滤。

安装

可以通过npm或bower来安装该下拉列表框插件。

npm install pickout --save
bower install pickout --save

使用方法

使用该下拉列表框插件需要在页面中引入pickout.min.css和pickout.min.js文件。

HTML结构

该下拉列表框的HTML结构使用一个带.form-group的

作为容器，里面放置标签和





    State:
           

                
                 初始化插件
                可以使用.to()方法来初始化该下拉列表框插件。
                pickout.to('.city');

/* 或者 */

pickout.to({
  el: '.city'
});
                
                如果是类选择器需要加上“.”号，如果是ID选择器需要加上“#”号。
                如果需要开启选项搜索过滤功能，可以将配置参数search设置为true。
                pickout.to({
  el: '.state',
  search: true
});                  
                
                你可以为所有的下拉列表框配置一个相同的class类，然后一次性初始化所有的下拉列表。
                pickout.to('.all');                  
                
                 自定义样式
                如果你需要自定义下拉列表的样式，可以在下面的类选择器中编写你的代码：
                .pk-input.-MySelector{
    // my customization 
}
.pk-arrow.-MySelector{
    // my customization 
}                  
                
                然后在插件初始化时作为主题的参数传入：
                pickout.to({
  el: '.city',
  theme: 'MySelector'
});                  
                
                 可用主题
                有2个可用的主题：
                
                  clean（默认主题）
                  dark
                
                pickout.to({
  el: '.state',
  theme: 'dark'
});                
                
                 设置默认值
                 
    State:
           
                   
                 
                可以通过updated()方法来更新默认值。
                pickout.updated('.city');                  
                
                pickout.js下拉列表框美化插件的github地址为：https://github.com/ktquez/pickout