一、概述
在web项目中很多地方用到下拉框,原生的下拉框比较丑陋,之前的文章中介绍过一款用来美化下拉框的插件可以参考:
手把手教你--jquery chosen插件的使用和API(html下拉框美化)。
有时业务需要下拉框内容是分组显示,如显示部门名称和部门下人员名称,则需要使用<select> 、<optgroup>、<option>同时使用来达到效果,代码如下:
<select class="select">
<optgroup label="技术部">
<option value="1">王小二</option>
<option value="2">刘大拿</option>
<option value="3">齐东强</option>
<option value="4">三麻子</option>
</optgroup>
<optgroup label="人事部">
<option value="5">齐德龙</option>
<option value="6">赵大帅</option>
<option value="7">五毛子</option>
<option value="8">小二黑</option>
</optgroup>
</select>
效果:
但是效果和功能比较单一,今天给大家介绍一款好看功能灵活的插件名字是select-mania。
select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。
可以去其官网查看API和使用,下载使用地址:https://github.com/pitininja/select-mania
使用后的效果如下:
可以换主题颜色,还有其他功能可以参考API。
二、使用
1.从官网上下载所需文件。
2.引入css/js到页面,多个主题,我只引入了一个:
<link href="css/select-mania.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/select-mania.min.js"></script>
3.页面内容:
<body>
<select class="select">
<optgroup label="技术部">
<option value="1">王小二</option>
<option value="2">刘大拿</option>
<option value="3">齐东强</option>
<option value="4">三麻子</option>
</optgroup>
<optgroup label="人事部">
<option value="5">齐德龙</option>
<option value="6">赵大帅</option>
<option value="7">五毛子</option>
<option value="8">小二黑</option>
</optgroup>
</select>
</body>
4.调用插件,第二个方法是自己加的是用来点击“部门“显示、隐藏员工的方法,其他的属性参考API:
<script type="text/javascript">
$('.select').selectMania({
size: 'small', // 尺寸(小)
themes: ['darkblue'], //主题
placeholder: '请选择...',//默认文字
removable: true,//是否可清除
search: true,//是否可搜索
});
// 以下内容是自己加的 点击部门展开/隐藏部门下员
$('.select-mania-group-title').on('click',function(){
$(this).next().toggle();
});
</script>
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉分组插件</title>
<link href="css/select-mania.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/select-mania.min.js"></script>
</head>
<body>
<select class="select">
<optgroup label="技术部">
<option value="1">王小二</option>
<option value="2">刘大拿</option>
<option value="3">齐东强</option>
<option value="4">三麻子</option>
</optgroup>
<optgroup label="人事部">
<option value="5">齐德龙</option>
<option value="6">赵大帅</option>
<option value="7">五毛子</option>
<option value="8">小二黑</option>
</optgroup>
</select>
</body>
<script type="text/javascript">
$('.select').selectMania({
size: 'small', // 尺寸(小)
themes: ['darkblue'], //主题
placeholder: '请选择...',//默认文字
removable: true,//是否可清除
search: true,//是否可搜索
});
// 以下内容是自己加的 点击部门展开/隐藏部门下员
$('.select-mania-group-title').on('click',function(){
$(this).next().toggle();
});
</script>
</html>
配置参数
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: "查询搜索的地址",
data: {
search: search,
page: page,
param: 自定义参数
},
success: function(html) {
// html是<option>标签的集合
// 如<option value="1">王小二</option>
callback(html);
}
});
}
方法
select-mania下拉选择框插件的可用方法有:
init
:初始化方法。
//simple call
$("target-selector").selectMania({__regexoperators___/*settings*/});
//explicit call
$("target-selector").selectMania("init", {__regexoperators___/*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");
// 也可以这样取值
$('select').val();
set
:这个方法只能在单一元素上使用,用于为下拉选择框设置新的值。
$("target-selector").selectMania("set", [
{
value: "20",
text: "Value number twenty"
},
{
value: "60",
text: "Value number sixty"
}
]);
clear
:在目标元素上情况已选择的值,重置时使用。
$("target-selector").selectMania("clear");
(完)