pickout 纯JS下拉列表框美化插件

文集库 名人语录 2020-05-13 14:37:13 0
pickout.js 是一款效果非常炫酷的纯 JavaScript 下拉列表框美化插件。该下拉列表框插件大小仅 5kb,在用户点击了列表框时,会弹出类似模态窗口的下拉列表,还可以对列表中的选项进行搜索过滤。 使用方法 使用该下拉列表框插件需要在页面中引入 pickout.min.css 和 pickout.min.js 文件。 HTML 结构 该下拉列表框的 HTML 结构使用一个带.form-group 的
作为容器,里面放置标签
初始化插件 可以使用.to()方法来初始化该下拉列表框插件。 pickout.to('.city'); pickout.to({ el: '.city' }); 如果是类选择器需要加上“.”号,如果是 ID 选择器需要加上“#”号。如果需要开启选项搜索过滤功能,可以将配置参数 search 设置为 true。 pickout.to({ el: '.state', search: true }); 你可以为所有的下拉列表框配置一个相同的 class 类,然后一次性初始化所有的下拉列表。 自定义样式 如果你需要自定义下拉列表的样式,可以在下面的类选择器中编写你的代码: .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' }); 设置默认值
可以通过 updated()方法来更新默认值。 pickout.updated('.city'); 服务范围 2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务 3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次) 售后时间 周一至周五(法定节假日除外) 10:00-22:00
版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

下一篇 :返回列表

分享:

扫一扫在手机阅读、分享本文