jQuery下拉选择框美化插件select-mania

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">

该下拉选择框自带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 value="1" data-icon="fa fa-Twitter">Twitter
  < option value="1" data-icon="fa fa-google-plus">Google+
  ...
                  

 初始化插件

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

$( 'target-selector' ).selectMania();
//带配置参数
$( 'target-selector' ).selectMania({
    //配置参数
});

 配置参数

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

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
                 

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

< optgroup data-icon="fa fa-user" label="Group">
    < option value="1" data-icon="fa fa-user">Item
             

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

< optgroup label="Group" disabled>
    < option value="1" disabled>Item
         

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

< option value="1" selected>Item   

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

$.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 ; }