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

PetitQ 表单/表格 2018-11-10 1.33K 0 0

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

```
<table class="table table-striped">
```
```
    <thead>
```
```
      <tr>
```
```
        <td>参数</td>
```
```
        <td>类型</td>
```
```
        <td>描述</td>
```
```
      </tr>
```
```
    </thead>
```
```
    <tbody>
```
```
      <tr>
```
```
        <td>placeholder</td>
```
```
        <td>string</td>
```

        <td>显示在select下拉列表框中的占位文本</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>csvDispCount</td>
```
```
        <td>int</td>
```

        <td>要显示的多个项的编号，使用逗号分隔。设置为0表示全选</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>captionFormat</td>
```
```
        <td>string</td>
```

        <td>当选择的项大于<code>csvDispCount</code>设置的数目时显示的文本。默认为<code>{0} Selected</code>，<code>{0}</code>会被替换为选择的项的总数</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>floatWidth</td>
```
```
        <td>int</td>
```

        <td>最小的设备宽度，如果小于这个宽度，下拉列表框将渲染为浮动弹出的效果</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>forceCustomRendering</td>
```
```
        <td>boolean</td>
```

        <td> Force the custom modal ( Floating list ) on all devices below floatWidth resolution.</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>nativeOnDevice</td>
```
```
        <td>Array[string]</td>
```

        <td>从用户代理字符串中获取识别移动手机的关键字</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>outputAsCSV</td>
```
```
        <td>boolean</td>
```

        <td>设置为<code>true</code>则使用csv来提交数据</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>csvSepChar</td>
```
```
        <td>string</td>
```

        <td>如果<code>outputAsCSV</code>设置为<code>true</code>，该选项用作它的分割符。</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>okCancelInMulti</td>
```
```
        <td>boolean</td>
```

        <td>在桌面模式中是否允许OK/Cancel按钮为多选模式。</td>

```
      </tr>
```
```
      <tr>
```
```
        <td>triggerChangeCombined</td>
```
```
        <td>boolean</td>
```

        <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>

```
      </tr>
```
```
    </tbody>
```
```
  </table>
```

插件的默认设置如下：

```
{
```
```
    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 )

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

已有 332 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

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

使用方法

配置参数

方法

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

相关文章

简单jQuery标签插件sTags

多种纯CSS3搜索框UI设计效果

多选搜索过滤功能jQuery下拉列表框插件

发表回复取消回复

热销模板

表单/表格

使用方法

配置参数

方法

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复