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

当前位置:主页 > jQuery库 > 表单 > jQuery跨设备和浏览器的下拉列表框插件
jQuery跨设备和浏览器的下拉列表框插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-03-27
    阅读:
简要教程

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 )