在页面中引入select-mania.css和select-mania.js文件。
<link rel="stylesheet" href="css/select-mania.css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/select-mania.js"></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; } /* DOWN */ .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;