sumoselect插件

由于项目需要，研究了下sumoselect插件，接下来简单介绍下sumoselect。

在百度上搜索“sumoselect.js”，查到的网页基本上都有对sumoselect的基本介绍，如下：

简单介绍

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 ).
selectAll	boolean	默认为false，在多选模式下是否显示全选按钮，官方js里说手机模式下不支持全选
selectAlltext	string	全选按钮显示模式下全选的显示文本
ok	string	默认为OK，确认按钮显示文本
cancel	string	默认为Cancel，取消按钮显示文本

（以上基本为网页搜索结果）

参数的控制最好在页面中进行，而非在js文件中直接更改，但是因人而异。

官方提供的sumoselect插件，通过参数的调整，在桌面模式下效果还是很不错的，可以选择是否显示确定、取消按钮，根据需求设置下拉框浮动的最小宽度（floadWidth）等等，但是在手机模式下，效果就不是很理想。作为一名开发者，在软件操作方面一般不会觉得太复杂，而在用户角度则可能不然。例如官方提供的sumoselect插件在手机模式下使用的是手机自带的select效果。在多选模式下，往往会造成用户选择了多个items后，不知道该怎么操作了。如果在手机多选模式下也能像桌面模式那样可以设置确定取消按钮的显隐的话，效果会更好些。针对这一需求，我对sumoselect.js文件和sumoselect.css文件进行了修改。最终呈现效果如下

手机模式下，跟桌面模式显示的一样，不同的是，在手机模式下浮动的话，增加了一个遮罩层，使效果更好些。

前台设置如下

$(function() {
    //初始化下拉框组件
    window.asd = $('#zone').SumoSelect({ 
        placeholder:"请选择",
        csvDispCount: 10,
        captionFormat:'选中 {0} 项',
        floatWidth:1200,//手机端均呈现浮动效果
        okCancelInMulti:true,
        ok:'确定',
        cancel:'取消',
        nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk']
});

具体详见js文件和css文件。

需要注意的是，由于下拉框的结构是ul li结构，所以如果外层也设置了针对ul li的行高等显示属性的话，就会造成显示效果不尽人意。

items选择非选择的显示效果如上图，左边小方框是利用i元素，为其设置background实现的。

请参照如下代码

<style type="text/css">
        //设置行高
    .SumoSelect > .optWrapper.multiple > .options > li{
        line-height: 18px;
        height:18px;
    }
        //设置确定取消按钮的行高
    .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p{
        line-height: 18px;
    }
        //选择框未选择时的背景设置
    .SumoSelect > .optWrapper.multiple > .options > li span i{
        background-image: none;
        background-size:auto;
    }
</style>

上述代码主要针对外层的css属性设置影响了下拉框的显示效果，为恢复默认显示效果进行的设置。如果要自定义行高等属性，请考虑items本身的padding/margin等属性的设置。

希望可以帮到更多的朋友，也欢迎大家提建议和问题

更多详细介绍请见http://hemantnegi.github.io/jquery.sumoselect/

插件下载地址http://files.cnblogs.com/files/wyynts/sumoselect.rar