README

jquery.sumoselect.js - 一个美观的跨设备单选/多选jQuery选择插件。

查看实时演示在这里

文档在这里

最新稳定版：从这里下载

A jQuery插件，可以将HTML选择框逐步增强为单选/多选下拉列表。该下拉列表可以使用简单的CSS完全自定义。它可以根据任何设备进行适配，同时考虑到用户体验不会受到影响。

显著特性

内联搜索。
支持分组。
单选和多选选项。
通过简单的CSS完全可自定义。
支持几乎所有设备。
智能渲染以适应设备。
在Android、iOS、Windows和其他设备上渲染原生的单选/多选弹出窗口。
自定义postback数据格式（多选数据可以以CSV或默认选择的形式传递）
支持选中、禁用和占位符
易于扩展，允许开发者创建新的小部件

更新v1.1.0

将所有属性包装在连接到原生选择元素的sumo对象中。
添加了标准添加、删除、选择、取消选择、禁用、启用、卸载等方法，以便更好地操作
可以从选择元素的本地引用访问SumoSelect的实例
~~添加了disabled = true以禁用/启用控件。~~现在使用enable()和disable()
修复了错误...

更新v1.2.0

添加了新的自定义显示格式选项
现在outputAsCSV默认设置为false
修复了在移动设备上卸载和其他处理程序方法的问题
修复了错误...

更新v2.0.0

添加了tabindex和键盘导航支持
添加了全选功能
重新设计UI（现在不使用外部图标，颜色方案可以通过CSS控制）
添加了一些非常有用的新方法，如reload(), selectAll(), unSelectAll(), enable(), disable()
更好地响应失去焦点和其他事件以及未识别的设备。
大量错误修复...

更新v3.0.0

添加了搜索支持。
添加了分组支持
重构了标记
选择方向可以通过设置控制。
所有文本都可以自定义（更好的本地化支持）。
大量错误修复...

##要求 jQuery 1.8.3+（始终推荐使用jQuery的最新版本）

##桌面浏览器支持 IE8+、Firefox 4+、Chrome、Safari 4+、Opera 11+（其他浏览器可能也支持，但我在它们上没有进行测试）

##移动/平板电脑浏览器支持 iOs 3+、Android 2.1+、Windows Mobile（其他浏览器可能也支持，但我在它们上没有进行测试）

##分支如果您发现您需要SumoSelect当前不支持的功能，请通过SumoSelect问题跟踪器告诉我，或者在GitHub上分支SumoSelect，并轻松扩展SumoSelect以创建您自己的小部件！

##用法

要仅使用默认选项，只需这样做

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

要提供可选设置，只需将设置对象传递给SumoSelect()即可

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

如果您想获取SumoSelect对象的实例以调用处理程序方法

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

注意：如果匹配选择器中有多个选择元素，SumoSelect将返回一个选择元素数组。

您还可以通过直接选择您的选择元素来找到SumoSelect对象的实例，例如

	$('select.SlectBox')[0].sumo. .....

您可以在底层原始选择上执行所有操作，然后通过以下方式重新加载UI

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

设置

以下设置目前可用

placeholder (字符串) 在渲染的选择小部件中显示的占位符文本（优先级最高）。最高优先级是分配给选择标签中本地占位符属性的，即 <select placeholder="这是一个占位符" /> - 然后是具有禁用和选中属性的选项 <option disabled selected value="foo" > - 最后是设置中指定的占位符属性。 *
csvDispCount (整数) 在小部件中显示的项目数，之后通过 , 分隔，然后文本将折叠为 3+ 已选。对于所有选项，设置为 0。
captionFormat (字符串) 当选择的项目超过csvDispCount时，您希望看到的标题格式。其默认值为 '{0} 已选'（这里的 {0} 将由选择计数替换）
floatWidth (整数) 设备的屏幕宽度，低于此宽度时，选项列表以浮动弹出窗口方式渲染。
forceCustomRendering (布尔值) 强制在所有浮点宽度分辨率以下的设备上使用自定义模式（浮动列表）。
nativeOnDevice (字符串数组) 用于从用户代理字符串中识别移动设备的关键词。在匹配的设备上渲染系统默认选择列表。
outputAsCSV (布尔值) 将数据作为csv POST（默认为选择）。
csvSepChar (字符串) 如果 outputAsCSV 设置为 true，则分隔字符。
okCancelInMulti (布尔值) 在桌面模式的多选中也显示“确定”和“取消”按钮。
triggerChangeCombined (布尔值) 在多选模式中，是在每个项目的单独选择上触发更改事件，还是在组合选择（按下“确定”或“取消”按钮）上触发。
selectAll (布尔值) 是否显示“全选”复选框。
search (布尔值) 在SumoSelect中启用搜索（默认为false）。
searchText (字符串) 搜索输入的占位符。
noMatch (字符串) 如果没有匹配搜索词的项，则显示的占位符（默认为 'No matches for "{0}"'）。
prefix (字符串) 预先添加到所选文本的前缀（默认为空），例如 'Hello'。
locale (数组) 更改插件中使用的文本（['OK', 'Cancel', 'Select All']）。注意：不要中断序列或跳过项目。
up (布尔值) 打开下拉菜单的方向（默认：false）

默认设置是

{
    placeholder: 'Select Here',
    csvDispCount: 3,
    captionFormat:'{0} Selected', 
    captionFormatAllSelected:'{0} all selected!',
    floatWidth: 400,
    forceCustomRendering: false,
    nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'],
    outputAsCSV: false,
    csvSepChar: ',',
    okCancelInMulti: false,
    triggerChangeCombined: true,
    selectAll: false,
    search: false,
    searchText: 'Search...',
    noMatch: 'No matches for "{0}"',
    prefix: '',
    locale: ['OK', 'Cancel', 'Select All'],
    up: false 
}

进一步文档

许可

版权（c）2016 Hemant Negi。在MIT许可下授权。

etdsolutions / sumoselect

维护者

详细信息

README

jquery.sumoselect.js - 一个美观的跨设备单选/多选jQuery选择插件。

许可