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下拉列表框插件的可用参数：

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

参数的控制最好在页面中进行，而非在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