表单/表格

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

创客主机


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(其它设备应该也可以工作,但未经测试)

使用方法

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

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

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

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

配置参数

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

  1. <table class="table table-striped">
  2.     <thead>
  3.       <tr>
  4.         <td>参数</td>
  5.         <td>类型</td>
  6.         <td>描述</td>
  7.       </tr>
  8.     </thead>
  9.     <tbody>
  10.       <tr>
  11.         <td>placeholder</td>
  12.         <td>string</td>
  13.         <td>显示在select下拉列表框中的占位文本</td>
  14.       </tr>
  15.       <tr>
  16.         <td>csvDispCount</td>
  17.         <td>int</td>
  18.         <td>要显示的多个项的编号,使用逗号分隔。设置为0表示全选</td>
  19.       </tr>
  20.       <tr>
  21.         <td>captionFormat</td>
  22.         <td>string</td>
  23.         <td>当选择的项大于<code>csvDispCount</code>设置的数目时显示的文本。默认为<code>{0} Selected</code><code>{0}</code>会被替换为选择的项的总数</td>
  24.       </tr>
  25.       <tr>
  26.         <td>floatWidth</td>
  27.         <td>int</td>
  28.         <td>最小的设备宽度,如果小于这个宽度,下拉列表框将渲染为浮动弹出的效果</td>
  29.       </tr>
  30.       <tr>
  31.         <td>forceCustomRendering</td>
  32.         <td>boolean</td>
  33.         <td> Force the custom modal ( Floating list ) on all devices below floatWidth resolution.</td>
  34.       </tr>
  35.       <tr>
  36.         <td>nativeOnDevice</td>
  37.         <td>Array[string]</td>
  38.         <td>从用户代理字符串中获取识别移动手机的关键字</td>
  39.       </tr>
  40.       <tr>
  41.         <td>outputAsCSV</td>
  42.         <td>boolean</td>
  43.         <td>设置为<code>true</code>则使用csv来提交数据</td>
  44.       </tr>
  45.       <tr>
  46.         <td>csvSepChar</td>
  47.         <td>string</td>
  48.         <td>如果<code>outputAsCSV</code>设置为<code>true</code>,该选项用作它的分割符。</td>
  49.       </tr>
  50.       <tr>
  51.         <td>okCancelInMulti</td>
  52.         <td>boolean</td>
  53.         <td>在桌面模式中是否允许OK/Cancel按钮为多选模式。</td>
  54.       </tr>
  55.       <tr>
  56.         <td>triggerChangeCombined</td>
  57.         <td>boolean</td>
  58.         <td>In Multiselect mode whether to trigger change event on individual selection of each item or on combined selection ( pressing of OK or Cancel button ).</td>
  59.       </tr>
  60.     </tbody>
  61.   </table>

插件的默认设置如下:

  1. {
  2.     placeholder: 'Select Here',
  3.     csvDispCount: 3,
  4.     captionFormat: '{0} Selected',
  5.     floatWidth: 500,
  6.     forceCustomRendering: false,
  7.     nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'],
  8.     outputAsCSV : false,
  9.     csvSepChar : ',', 
  10.     okCancelInMulti: true, 
  11.     triggerChangeCombined : true
  12. }

方法

要调用方法,你首先要插件SumoSelect对象:

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

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

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

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

下面是可以使用的方法:

.unload():停用SumoSelect插件,使用原生的select列表框。

  1. $('select.SlectBox')[0].sumo.unload();

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

  1.     // adds a option with value and html set to 'india' at the last.
  2.     $('select.SlectBox')[0].sumo.add('india');
  3.  
  4.     // adds a option with value and html set to 'india' at index no 3.
  5.     $('select.SlectBox')[0].sumo.add('india',3);
  6.  
  7.     // adds a option with value = 'india' and html = 'Indian' at the last.
  8.     $('select.SlectBox')[0].sumo.add('india','Indian');
  9.  
  10.     // adds a option with value and html set to 'india' at index no 0.
  11.     $('select.SlectBox')[0].sumo.add('india','Indian',0);

.remove(index):删除指定位置的列表项。

  1. $('select.SlectBox')[0].sumo.remove(2);

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

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

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

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

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

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

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

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

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

  1.     // Disables the control
  2.      $('select.SlectBox')[0].sumo.disabled = true;
  3.  
  4.     // Enables the control
  5.      $('select.SlectBox')[0].sumo.disabled = true;
  6.  
  7.     // Prints current state of control
  8.     console.log( $('select.SlectBox')[0].sumo.disabled )
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!