这种流行的文章更新2016年10月12日,以反映选择/下拉列表插件的当前状态。
该默认样式的选择元素并不适合每一个人。 有时你可能想要控制它的外观(保持它跨浏览器和设备一致的),或者你可能需要额外的功能,只是没有原生支持。
值得庆幸的是还有很大的jQuery插件供电的堆在那里,以简化这个过程。
我们正在经历一个选择,你可以纳入你的下一个项目的插件运行。 有些插件是有选择,方法和事件高度可配置的,而有些则是为造型和易用性的选择要素的简单替代品。
获选
选的是一个广泛的插件,不仅restyles您选择的元素,但提供了额外的功能,如在选搜索,多元素选择,并强调。
如果你正在寻找更新您的选择元素的默认样式您可以使用此插件,但这里真正的力量来自于附加功能:
- 的能力,处理多选择选项。 每个选项保存并轻松如果需要删除
- 的能力,通过搜索过滤元件。 完美的,当你拥有的选项(如国名),一个长长的清单
一切都只是工作有了这个插件和桌面支持触及到IE8的兼容性。 一个正(或负)的因素是,在移动设备上的选择元素恢复到其天然形式,让移动浏览器如何控制你互动与他们。
该选项文件罗列了所有的设置,方法和事件,您可以使用互动来定制你的元素。 该插件本身是谁在收获的项目管理工具的工作的开发人员维护。 他们的GitHub存储库不断更新,附加功能,bug修复和优化卷成插件。
选择二
选择二是全功能的,丰富的选择替换/增强插件。 它不仅restyles您选择元素,还扩展他们提供额外的功能。
就像其他高级选择插件,它包在自定义的功能,例如一整堆:
- 与optgroups单选择元/件
- 可多选元素
- 对于选择元素排序/过滤搜索领域
- 能够负载数据从远程数据源(例如从API来动态改变选项)
- 标记支持(从预定义列表中选择/在飞行中添加动态代码)
选择二一直在发展,因为在2012年回到开发者已经从3版本移动到版本4,并在过程中重新编写插件,使其更快,反应更灵敏,移动友好。 在GitHub的页面为选择二是令人印象深刻,背后使该插件的每个版本更好的一组工作。
这个插件是显著更开发商集中,用自己的选项页面显示全面的例子 ,你会如何使用每个不同的特点。
此插件提供定制的高水平,是一个伟大的走向解决方案,如果你正在寻找一个可以定制适合自己的项目的插件。
jQuery的尼斯选择
这个插件是一个轻量级的选择替换库。 jQuery的尼斯选择替换默认与重新设计的下拉菜单中选择本地元素。
因为它意味着作为一个快速的方法再整选择元素,提供一些视觉吸引力毫不费力没有太多这个插件。 该插件正在积极开发自己的GitHub库和作品真的很好跨移动和桌面浏览器的改进。
如果你正在寻找的东西快速和容易,只有restyles您选择的元素,并不需要很多的努力,那么这就是你的插件。
Selectize
Selectize是一个非常开发商集中,全包插件,不仅为您提供了一个更好看选择列表,而且还增加了新的有用的功能,如标注,远程数据绑定和动态下拉菜单。
就像选择二选上和,Selectize相当开发商集中,让您对您的下拉列表将如何工作的控制。 他们的文档是相当全面的 ,并概述了一系列的选择和几个回调,你可以挂接到进一步自定义插件。
该插件已经被不断更新,与开发商解除反复几次在过去的一年。 有时候,你不知道,如果你刚刚发现了一个巨大的插件是积极的维护,或者如果它只是提供“作为”,但对于Selectize似乎该项目仍在现场,并与几乎所有的问题踢/ bug报告正在讨论和漂亮透明的讨论正在进行。
功能Selectize作品真的很好。 这不仅插件重新风格的默认控件,还延伸他们以极大的功能,如搜索过滤,多选能力和远程数据绑定。 所有这些作品真的很好跨越桌面和移动浏览器。
这个插件是一个伟大的整体选择,应该是一个你“去到”选项,如果你正在寻找重新造型,并延长您的选择元素的功能。
图片组合框
图片组合框是一个简单的插件,可以让你定义图像和说明您选择控件内的每个选项。 它主要用来展示的相关图像的每个选项,这样当你想显示每个选择的可视化表示它是有用的。
这个插件有所有你所期望的,如键盘导航,一系列事件勾成和相对简单的标记自定义样式的基本特征。
组合框效果很好跨浏览器,但它一直没有更新相当长的一段时间,有许多人在上几乎没有互动插件页面GitHub的 。 这并不是说这是一个糟糕的插件,它只是你将不得不因为它涉及到究竟使用它,并与您的项目进行全面测试它作为支持可能会很困难。
如果你的主要目标是使这样你就可以用你的下拉元素显示图像和/或描述那么这个插件是值得一试。
jQuery的检索下拉插件
该检索下拉插件是你可能在网上找到旧的插件之一。 在2012年创建的背部(而不是最近更新)。 它的目的是把你的基本选择元素融入到一个单一的搜索上市。
此插件没有在SourceForge网站,而不是生命,但。 没有太多的文档在这里除了从一个单一的演示页陈列宣传它是如何工作的。
相比其他严重的可扩展选择更换插件这个感觉的地方了。 然而,关于该库的一个伟大的事情是,它支持所有的回IE7和整个台式机和(奇怪)移动浏览器效果很好。
如果你正在寻找一个最低限度的更换,使分拣这可能是您的最佳选择
多选组合框
这个插件是比其他人我们已经介绍有点不同。 它适用于在同一时间两个或两个以上的选择元素,创建用户界面,您可以在移动元素来回的列表之间。 它类似于其他拖放的解决方案,但完全只用标准的选择元件。 为了得到这个启动和运行,你可能会需要的风格有点相匹配的现代设计标准(因为它是一个有点难看)
如果要排序的两个或多个容器之间的项目列表这种类型的控制是非常有用的,例如排序任务或组织内容。
演示和GitHub的网页大纲如何,你可以设置这和因为有几个选项来控制存在学习曲线是相当浅。
jQuery的选择框
jQuery的选择框是上了年纪选择更换插件之一。 然而,与添加的功能堆其他插件,这个插件的主要目标是再整你的控制和离开的功能相当不变。
jQuery的选择框确实有,你可以控制你所期望的几个有用的选项,与所有标准的事件一起,如打开,关闭,选项选择等浏览器的支持也是全面的,支持旧的浏览器到IE7同时回落到使用在手机上的系统默认值(如果您选择)。 作为一个老的插件,它可能不会很快改变任何时候。 开发商保持插件,所以它在这一点上提供的“原样”尚未多年来一直活跃。
这个插件的优势在于它的简单造型,用自己的造型很容易使您可以覆盖匹配设计。 如果你正在寻找做一些基本的东西,如造型的下拉菜单,并可能定制一些设置,然后这个插件可能你只是追求的。
Multiselect.js
另一个jQuery的动力库,它可以让你创建快速,轻松地多选择基于列表。 人们很容易看到他们是多么有用,当他们的演示展示 。 您可以创建一个单一的选择元素,然后轻松地移动物品来回您的列表之间。
该插件似乎是由它的开发者和相当频繁更新的GitHub页面有封闭/解决门票堆。
虽然一些最近的问题在GitHub上标记还没有回答,插件本身是多项选择,方法和事件,为您挂接到相当扎实。 它的工作原理以及在多个浏览器,并包含一些样式(让您轻松地决定它应该如何看)。
这是出发点,如果你是一个简单的多选插件好后。
JQuery的SumoSelect
SumoSelect有你在选择列表更换所需要的所有功能。 这个插件处理单和多选元素,搜索和过滤,通过一套可靠的方案和活动的支持一起。
SumoSelect的外观和感觉是光,与简约风格,你可以定制为您的项目为重点。 有几个演示 ,展示如何将所有不同的选项可以配置。
这个插件在过去的几年中不断改进,它得到每个版本更好。 不同于可能被抛弃,其他插件“原样”,它看起来像这样的会得到每个版本更好。
另一个值得注意的因素是,这个插件提供全面的浏览器的支持。 SumoSelect将工作早在IE8上的桌面和移动设备提供支持,无论是正常工作还是回落到本地控件(取决于你设置它时提供的选项)。
jQuery UI的Selectmenu
这里的东西有点不同。 不像其他的独立的插件,如选择或者选择二(其,而流行,是不完全普遍),这个插件是作为jQuery的UI框架的一部分可扩展插件称为selectmenu
jQuery UI的构件是开发的重点,你可以集成到自己的项目扩展。 这些部件已经被大量开发和高度稳定,以支持广泛的选择,方法和事件 ,你可以钩到自定义它是如何工作的。
Selectmenu的目的是为了扩展功能并设计了本地选择的元素。 这些元素是完全可主题和是基于jQuery UI的CSS框架 。 虽然它不具备的所有其他大型插件的功能(如过滤搜索,动画或JSON数据绑定),它具有较强的跨浏览器的支持,并不断更新。
要快速的风格你选择的元素,以配合jQuery用户界面的主题化或者你愿意,你可以自定义和调整自己的综合库该库将是非常有用。
jQuery的过滤的引导选择
过滤的引导选择是延伸自举3提供的默认选择样式的插件。
这个插件联系了很多资源,一起如FontAwesome的图标, jQuery的LiveFilter为它的过滤机制,也jQuery的tabcomplete其自动预测。
与大多数其他插件,有一个广泛的选择 ,你可以定制你的需求。 它应该提供所有你需要得到一个基本的过滤列表为你工作。
主要插件本身住在GitHub上 ,它已经超过一年的空间不定期更新。 然而与大多数项目由你永远不知道什么时候或单独一人维持,如果你将能够获得支持。 如果你是高兴的演示如何工作的,并想用它“原样”,那么它的,如果你已经工作引导电动网站一个很好的资源。
DDSlick jQuery的下拉
DDSlick将您选择的元素引入轻度风格的下拉菜单。 每个选项包含了其正常的标题和值,也可选图像和描述。
还有,你可以自定义,与事件一起,你可以挂接到进一步调整的事情几种不同的选择。
一个现实的问题是,这家网站被打破 ,所有的对网页的例子引发错误。 它看起来像资源都指向不再存在Dropbox帐户。 然而,脚本本身不会丢失,几个网站有它的一个副本, 其中包括JSDeliver 。
通常我们会跳过插件,已经打破演示页面。 然而这个插件作品真的很好,它的文档是健全的。 这是一个很好的插件,如果你有兴趣:
- 动态地从一个JSON数组绑定选择值(让你动态地定义你的选择)
- 显示图像,说明和标题,以展示每个选项(与几个布局)
- 自定义代码回调
如果你想看看它是如何工作,你可以从字面上复制并粘贴HTML网站和相应的JS样品放入一个JS操场像网站Codepen.io ,它将所有的工作(假设你链接到两个jQuery和插件的主要JS文件)。
包装这一切
有一个广泛的选择,当谈到现在选择更换插件。 在过去的几年中几个比较流行的图书馆已被打磨,不断推出新的功能,同时提高他们的整体运作方式。
你需要通过今天我提到的各种库进行搜索,看看哪一个将最密切满足您的需求。 例如,如果你只想再整你选择的元素,你真的需要一个库,还提供过滤和远程数据绑定?
对于大多数这些库,你应该起来相对快速运行。 他们中的大多数只需要jQuery和相关的插件文件,你是好去。
如果你热衷于自定义选项或挂接到回调则可能需要选择更注重开发库如Selectize,选择或者选择二。 寻找适合你的将是个人意见的问题。
让我们知道,如果你有你使用任何其他真棒库,当谈到选择替代品。 我们很乐意听取您的意见!
From: https://www.sitepoint.com//13-jquery-selectboxdrop-down-plugins/