搜索deviscoding / xq-select
使用CSS、jQuery和Twitter Bootstrap实现的跨浏览器
Requires
- components/jquery: ^1.10
- deviscoding/base: ^2.0
- deviscoding/searchable: ^2.0
Replaces
- exactquery/xq-select: ^2.0
README
xqSelect包旨在使HTML5表单选择在不同的浏览器和平台上看起来和表现一致。使用jQuery插件、CSS和Bootstrap的dropdown.js来对普通选择框进行样式设计并增加额外功能。
有许多功能强大的jQuery插件做类似的事情，感谢这些作者的原始想法。
xqSelect与类似插件在几个小方面有所不同
- 故意减少功能以减小大小和复杂性。
- 压缩后小于8KB - 如果只使用CSS则小于4KB（见下文）。
- 原始选择框仍然被使用，并且没有被隐藏或移动到屏幕之外。
文档
xqSelect的文档仍在进行中，将在可能的情况下进行更新。目前，请参阅下面的基本演示和用法说明。
用法和演示
基本演示可以在BootPly上查看。更完整的演示将很快可用。
用法简单
<div class="xq-select">
<select id="xqSelectDemo">
<optgroup label="Group One">
<option value="1" data-subtext="First Thing">Item One</option>
<option value="2">Item Two</option>
<option value="3">Item Three</option>
<option value="4">Item Four</option>
</optgroup>
<option value="5">Item Five</option>
<option value="6">Item Six</option>
<option value="7">Item Seven</option>
<option value="8">Item Eight</option>
</select>
</div>
当然，这假设你已经在HTML页面的某个地方包含了分布JS和CSS。建议将样式表放在<head>中，将JS放在你的关闭</body>标签之前。
要自动切换到大多数移动设备的本地选择，请在<div class="xq-select">标签中包含属性data-mobile="true"。
浏览器兼容性
xqSelect的一个重要目标是跨浏览器兼容性。鼓励报告特定浏览器和平台的问题。下面是指导方针。
截至目前，以下浏览器预计将完全支持
以下浏览器仍然预计可以工作
没有计划支持IE7、Opera 10、Safari 4或“古老”的自更新浏览器版本，如Firefox和Chrome。
移动浏览器标记为CSS Only，因为尽可能使用其本地选择可以确保最佳的用户体验。理想情况下，CSS规则仍将确保<select>在浏览器之间看起来一致，但当点击时，本地选择将接管。请参阅上面的用法了解如何实现这一点。
有关额外的浏览器兼容性，请参阅jQuery浏览器支持和Bootstrap支持的浏览器
* 需要找到xqSelect可以工作的最低版本。
** 需要测试。预计只有CSS组件可以工作。
错误和功能请求
任何人都可以贡献。请阅读以下有关打开问题的重要信息！
版权和许可
版权（C）2014-2016 ExactQuery
许可协议为MIT许可。