网站首页 文章专栏 select-mina
select-mina
编辑时间:2019-12-10 20:12:40.0 作者:hcy 浏览量:126

插件描述: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({

   //配置参数

});

配置参数

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参数:

1

2

3

4

function(search, page, data, callback) {

   //send back html options to select-mania

   callback(hmtlOptions);

}

这个函数有4个参数:

  • search:当前搜索框中的值。

  • page:请求的页码。

  • data:提供自定义数据。

  • callback:成功之后的回调函数。

执行成功之后的回调函数中的数据必须是一串HTML代码或jQuery / Dom元素。例如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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元素。

1

2

3

<optgroup label="Group">

   <option value="1">Item</option>

</optgroup>

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

1

2

3

<optgroup data-icon="fa fa-user" label="Group">

   <option value="1" data-icon="fa fa-user">Item</option>

</optgroup>

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

1

2

3

<optgroup label="Group" disabled>

   <option value="1" disabled>Item</option>

</optgroup>

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

1

<option value="1" selected>Item</option>

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

1

2

3

$.selectManiaSetup({

   /* 全局配置参数 */

});

方法

select-mania下拉选择框插件的可用方法有:

init:初始化方法。

1

2

3

4

//simple call

$('target-selector').selectMania({/*settings*/});

//explicit call

$('target-selector').selectMania('init', {/*settings*/});

update:在目标元素上更新插件。

1

$('target-selector').selectMania('update');

destroy:销毁指定的select-mania下拉选择框。

1

$('target-selector').selectMania('destroy');

check:这个方法只能在单一元素上使用,返回true表示目标元素上已经进行了初始化。

1

2

3

if($('target-selector').selectMania('check')) {

   // select-mania is initialized!

}

get:这个方法只能在单一元素上使用,用于获取当前选择的值。

1

var values = $('select').selectMania('get');

set:这个方法只能在单一元素上使用,用于为下拉选择框设置新的值。

1

2

3

4

5

6

7

8

9

10

$('target-selector').selectMania('set', [

   {

       value: '20'

       text: 'Value number twenty'

   }, 

   {

       value: '60'

       text: 'Value number sixty'

   }

]);

clear:在目标元素上情况已选择的值。

1

$('target-selector').selectMania('clear');

自定义主题

如果你需要自定义主题,按下面来进行。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/* SELECTMANIA ELEMENT */

.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-inner { border1px solid #D6D6D6; }

/* SELECTED VALUES */

.select-mania-theme-[CHANGE-THE-NAME-HERE].select-mania.select-mania-multiple .select-mania-value {

border1px solid [YOUR-COLOR];

background-color: [YOUR-COLOR]; colorwhite; }

/*  DOWN */

.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania { border1px solid #D6D6D6; }

.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-search-input {

 border1px 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]; colorwhite;

来说两句吧
最新评论