jQuery自定义下拉框特效插件

jQuery自定义下拉框特效插件

select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。

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

1
2
3
<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文件。

1
2
3
4
5
<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选择框进行转换,你还可以为每个选项设置一个小图标。

1
2
3
4
5
6
<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下拉选择框插件的使用非常简单,初始化方法如下:

1
2
3
4
5
$('target-selector').selectMania();
//带配置参数
$('target-selector').selectMania({
   //配置参数
});

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

1
2
3
4
function(search, page, data, callback) {
   //send back html options to select-mania
   callback(hmtlOptions);
}
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论