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