jQuery自定义下拉框插件select-mania

所属分类:输入-选择框

 32915  317  查看评论 (12)
分享到微信朋友圈
X
jQuery自定义下拉框插件select-mania ie兼容9

使用方法

在页面中引入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找到。你也可以自己创建一个主题。
scrollContainernullselect下拉框可滚动的容器的选择器或元素。
placeholder'Select an item'占位符文本。可以在select元素上通过data-placeholder属性来使用。
removablefalse设置为true时可以删除已选择的选项。可以在select元素上通过data-removable属性来使用。
emptyfalse

设置为true时将强制在初始化时情况选项。可以在select元素上通过data-empty属性来使用。

searchfalse设置为true时将显示搜索框,并允许进行选项搜索。可以在select元素上通过data-search属性来使用。
ajaxfalse插件可以在选项向下滚动时通过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;

相关插件-选择框

jQuery自定义selects输入框

jQuery Select下拉单选、多选美化,带输入查找功能
  选择框
 30464  349

自制小清新select插件

通过原生生成美化后的,分享给初学者
  选择框
 38701  385

jquery各大学选择插件

jquery text选择器点击事件弹出层选择学校value赋值
  选择框
 32936  348
  选择框
 52529  470

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    看不完csapp不改名 0
    2020/8/17 21:51:36
    和select2配置好相似 回复
    ? ?? 0
    2020/6/17 15:41:09
    当没有搜索到数据的时候没有提示吗?比如在搜索框下面显示“没有找到数据”这样的提示 回复
    啊山先生 0
    2019/7/4 10:30:22
    请问如何对input框做一个监听事件,要异步搜索数据 回复
    evak 0
    2019/4/10 9:04:49
    请问怎么把字体设置的大一点 回复
    ◇一抹剪?,笑淡了花檫 0
    2019/2/28 11:17:32
    ajax获取option里的值之后,appendTo之后不显示,该怎么配置,该怎么写?
    我是把<option>${id}</option>直接appendTo到select中 回复
    LSen 0
    2019/1/28 11:23:33
    请问如何动态设置默认值。
        sohopeter0
        2019/1/28 11:25:22
        ?能具体点儿吗?
    回复
    Berners-zen 0
    2019/1/10 17:49:51
    问一下,怎么通过jquery获取被选中的值。 还有,怎么加一个onchange方法,我想选中某一个值的时候,把值填入文本框,产生联动效果。
        sohopeter1
        2019/1/10 17:53:32
        $("div").children(".selected").css("color", "blue");
    回复
    geekmister 0
    2018/12/15 19:35:41
    有两个bug:
    1、set方法不能同时设置多个值;
    2、动态更新下拉框的选项,只能新增不能刷新 回复
    Seation 0
    2018/11/30 11:58:38
    这是高手
        sohopeter0
        2018/11/30 12:31:42
        相互学习,共同提高!
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复