select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。
使用方法
在页面中引入select-mania.css和select-mania.js文件。
<link rel="stylesheet" href="css/select-mania.css"> <script src="js/select-mania.js" type="text/javascript"></script>
该下拉选择框自带5种主题,使用是要引入相应的主题CSS文件。
<link href="src/themes/select-mania-theme-darkblue.css" rel="stylesheet"> <link href="src/themes/select-mania-theme-green.css" rel="stylesheet"> <link href="src/themes/select-mania-theme-orange.css" rel="stylesheet"> <link href="src/themes/select-mania-theme-red.css" rel="stylesheet"> <link href="src/themes/select-mania-theme-square.css" rel="stylesheet">
HTML结构
该插件可以将任意select选择框进行转换,你还可以为每个选项设置一个小图标。例如:
<optgroup data-icon="fa fa-share" label="Group"> <option value="1" data-icon="fa fa-facebook">Facebook</option> <option value="1" data-icon="fa fa-Twitter">Twitter</option> <option value="1" data-icon="fa fa-google-plus">Google+</option> ... </optgroup>
初始化插件
select-mania下拉选择框插件的使用非常简单,初始化方法如下:
$('target-selector').selectMania(); //带配置参数 $('target-selector').selectMania({ //配置参数 });
配置参数
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
参数:
function(search, page, data, callback) { //send back html options to select-mania callback(hmtlOptions); }
这个函数有4个参数:
search
:当前搜索框中的值。page
:请求的页码。data
:提供自定义数据。callback
:成功之后的回调函数。
执行成功之后的回调函数中的数据必须是一串HTML代码或jQuery / Dom元素。例如:
ajax: function(search, page, data, callback) { $.ajax({ type: 'POST', url: 'myAjaxScript.php', data: { search: search, page: page, custom: data.custom }, success: function(html) { callback(html); } }); }
可选配置参数
select-mania下拉选择框插件支持Optgroup
元素。
<optgroup label="Group"> <option value="1">Item</option> </optgroup>
在每个选项之前你还可以设置一个小图标。通过data-icon
属性来设置图标,插件完全支持font-awesome字体图标。
<optgroup data-icon="fa fa-user" label="Group"> <option value="1" data-icon="fa fa-user">Item</option> </optgroup>
你还可以禁用一个选项组。
<optgroup label="Group" disabled> <option value="1" disabled>Item</option> </optgroup>
任何被选择的选项都被设置一个选项值。
<option value="1" selected>Item</option>
另外还有一个全局设置参数的方法:
$.selectManiaSetup({ /* 全局配置参数 */ });
方法
select-mania下拉选择框插件的可用方法有:
init
:初始化方法。//simple call $('target-selector').selectMania({/*settings*/}); //explicit call $('target-selector').selectMania('init', {/*settings*/});
update
:在目标元素上更新插件。$('target-selector').selectMania('update');
destroy
:销毁指定的select-mania下拉选择框。$('target-selector').selectMania('destroy');
check
:这个方法只能在单一元素上使用,返回true
表示目标元素上已经进行了初始化。if($('target-selector').selectMania('check')) { // select-mania is initialized! }
get
:这个方法只能在单一元素上使用,用于获取当前选择的值。var values = $('select').selectMania('get');
set
:这个方法只能在单一元素上使用,用于为下拉选择框设置新的值。$('target-selector').selectMania('set', [ { value: '20', text: 'Value number twenty' }, { value: '60', text: 'Value number sixty' } ]);
clear
:在目标元素上情况已选择的值。$('target-selector').selectMania('clear');
自定义主题
如果你需要自定义主题,按下面来进行。
/* SELECTMANIA ELEMENT */ .select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-inner { border: 1px solid #D6D6D6; } /* SELECTED VALUES */ .select-mania-theme-[CHANGE-THE-NAME-HERE].select-mania.select-mania-multiple .select-mania-value { border: 1px solid [YOUR-COLOR]; background-color: [YOUR-COLOR]; color: white; } /* DROPDOWN */ .select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania { border: 1px solid #D6D6D6; } .select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-search-input { border: 1px solid #D6D6D6; color: #5A5A5A; } .select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-item:hover { background:[YOUR-HOVER-COLOR]; } .select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-item.select-mania-selected { background: [YOUR-COLOR]; color: white; }
select-mania下拉选择框插件的github地址为:https://github.com/pitininja/select-mania