jQuery跨设备和浏览器的下拉列表框插件-爱编程

jQuery跨设备和浏览器的下拉列表框插件

来源：htmleaf 阅读：13 时间：2018-02-04 01:25

jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选，也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用，所有设备上功能都是一致的。

该jQuery下拉列表框插件的特点有：

可以进行单选，也可以进行多选。
可以通过CSS文件来自定义样式。
支持绝大多数的设备。
根据设备智能渲染。
在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框。
可以自定义提交数据的格式（多选可以通过 csv 或默认形式来提交）。
支持Selected、Disabled和占位文本。
易扩展，开发者可以很容易的创建新的组件。
使用基本方法间隙管理如添加选项、删除选项、禁用、选择等。

该jQuery下拉列表框插件需要使用jQuery 1.8.3+版本，建议使用最新版本的jQuery。

浏览器和设备的支持

IE8+, Firefox 4+, Chrome, Safari 4+, Opera 11+（其它浏览器应该也能工作，但未经测试）
iOs 3+, Android 2.1+ , Windows Mobile（其它设备应该也可以工作，但未经测试）

使用方法

使用方法非常简单，可以在页面加载之后调用默认的调用方法：

$(document).ready(function () {
      $('.SlectBox').SumoSelect();
});

也可以使用插件提供的参数来进行控制：

$(document).ready(function () {
  $('.SlectBox').SumoSelect({
    placeholder: 'This is a placeholder',
    csvDispCount: 3 
  });
});

配置参数

下面是该jQuery下拉列表框插件的可用参数：

参数	类型	描述
placeholder	string	显示在select下拉列表框中的占位文本
csvDispCount	int	要显示的多个项的编号，使用逗号分隔。设置为0表示全选
captionFormat	string	当选择的项大于`csvDispCount`设置的数目时显示的文本。默认为`{0} Selected`，`{0}`会被替换为选择的项的总数
floatWidth	int	最小的设备宽度，如果小于这个宽度，下拉列表框将渲染为浮动弹出的效果
forceCustomRendering	boolean	Force the custom modal ( Floating list ) on all devices below floatWidth resolution.
nativeOnDevice	Array[string]	从用户代理字符串中获取识别移动手机的关键字
outputAsCSV	boolean	设置为`true`则使用csv来提交数据
csvSepChar	string	如果`outputAsCSV`设置为`true`，该选项用作它的分割符。
okCancelInMulti	boolean	在桌面模式中是否允许OK/Cancel按钮为多选模式。
triggerChangeCombined	boolean	In Multiselect mode whether to trigger change event on individual selection of each item or on combined selection ( pressing of OK or Cancel button ).

插件的默认设置如下：

{
    placeholder: 'Select Here',
    csvDispCount: 3,
    captionFormat: '{0} Selected',
    floatWidth: 500,
    forceCustomRendering: false,
    nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'],
    outputAsCSV : false,
    csvSepChar : ',', 
    okCancelInMulti: true, 
    triggerChangeCombined : true
}

方法

要调用方法，你首先要插件SumoSelect对象：

var MySelect;
$(document).ready(function () {
  MySelect = $('.SlectBox').SumoSelect();
});

或者可以直接从select元素中获取它的实例：

var MySelect = $('select.SlectBox')[0].sumo;

注意：SumoSelect对象是绑定在原生的select元素上的，而不是jQuery对象。

下面是可以使用的方法：

.unload()：停用SumoSelect插件，使用原生的select列表框。
```
$('select.SlectBox')[0].sumo.unload();
```

.add(value [,text][,index])：在给定的位置插入一个新的列表项，如果未指定位置，则在最后插入。位置为0表示在开始处插入。

// adds a option with value and html set to 'india' at the last.
$('select.SlectBox')[0].sumo.add('india');

// adds a option with value and html set to 'india' at index no 3.
$('select.SlectBox')[0].sumo.add('india',3);

// adds a option with value = 'india' and html = 'Indian' at the last.
$('select.SlectBox')[0].sumo.add('india','Indian');

// adds a option with value and html set to 'india' at index no 0.
$('select.SlectBox')[0].sumo.add('india','Indian',0);

.remove(index)：删除指定位置的列表项。
```
$('select.SlectBox')[0].sumo.remove(2);
```

.selectItem(index)：选择指定位置的列表项。可以进行多选。

//selects the item at index 2
 $('select.SlectBox')[0].sumo.selectItem(2);

.unSelectItem(index)：取消某个下拉列表项的选择。

//unselects the item at index 2
 $('select.SlectBox')[0].sumo.unSelectItem(2);

.disableItem(index)：禁用下拉列表中的某个列表项。

//disables the item at index 2
 $('select.SlectBox')[0].sumo.disableItem(2);

.enableItem(index)：启用下拉列表中的某个列表项。

//enables the item at index 2
 $('select.SlectBox')[0].sumo.enableItem(2);

.disabled = true/false：这是一个SumoSelect启用和禁用控制的选项。

// Disables the control
 $('select.SlectBox')[0].sumo.disabled = true;

// Enables the control
 $('select.SlectBox')[0].sumo.disabled = true;

// Prints current state of control
console.log( $('select.SlectBox')[0].sumo.disabled )

在线预览源码下载