jQuery自定义下拉框插件select-mania

使用方法

在页面中引入select-mania.css和select-mania.js文件。

该下拉选择框自带5种主题，使用是要引入相应的主题CSS文件。

HTML结构

该插件可以将任意select选择框进行转换，你还可以为每个选项设置一个小图标。例如：

初始化插件

select-mania下拉选择框插件的使用非常简单，初始化方法如下：         

配置参数

select-mania下拉选择框插件的可用配置参数如下：

参数	默认值	描述
width	'100%'	下拉选择框的宽度。必须是有效的CSS长度值。可以在select元素上通过data-width属性来使用。
size	'medium'	下拉选择框的尺寸。可选值有：'tiny', 'small', 'medium', 'large'。可以在select元素上通过data-size属性来使用。
themes	[]	主题名称的数组。主题的名称可以在select-mania-theme-[主题名称].css找到。你也可以自己创建一个主题。
scrollContainer	null	select下拉框可滚动的容器的选择器或元素。
placeholder	'Select an item'	占位符文本。可以在select元素上通过data-placeholder属性来使用。
removable	false	设置为true时可以删除已选择的选项。可以在select元素上通过data-removable属性来使用。
empty	false	设置为true时将强制在初始化时情况选项。可以在select元素上通过data-empty属性来使用。
search	false	设置为true时将显示搜索框，并允许进行选项搜索。可以在select元素上通过data-search属性来使用。
ajax	false	插件可以在选项向下滚动时通过ajax来调用数据，并执行ajax查询。关于ajax参数，请看后面的详细解释。
data	{}	该参数作为ajax的参数使用。

ajax参数：为了使用ajax参数，你必须向下面这样设置ajax参数：

这个函数有4个参数：

• search：当前搜索框中的值。

• page：请求的页码。

• data：提供自定义数据。

• callback：成功之后的回调函数。

执行成功之后的回调函数中的数据必须是一串HTML代码或jQuery / Dom元素。例如：

可选配置参数

select-mania下拉选择框插件支持Optgroup元素。

在每个选项之前你还可以设置一个小图标。通过data-icon属性来设置图标，插件完全支持font-awesome字体图标。

你还可以禁用一个选项组。

任何被选择的选项都被设置一个选项值。

另外还有一个全局设置参数的方法：

方法

select-mania下拉选择框插件的可用方法有：

init：初始化方法。

update：在目标元素上更新插件。

destroy：销毁指定的select-mania下拉选择框。

check：这个方法只能在单一元素上使用，返回true表示目标元素上已经进行了初始化。

get：这个方法只能在单一元素上使用，用于获取当前选择的值。

set：这个方法只能在单一元素上使用，用于为下拉选择框设置新的值。

clear：在目标元素上情况已选择的值。

自定义主题

如果你需要自定义主题，按下面来进行。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com