排名前 5 的 jQuery UI 替代品

在构建现代Web时，您通常需要创建有用的UI组件。 无论您需要日历、滑块、图形还是其他对改善或简化用户交互有用的选项，您要么是自己创建它，要么是利用现有的功能。

自己开发这些组件通常是耗时且复杂的，除非您要做完全独特的事情，否则通常不会浪费您的时间。 这就是UI库和框架起作用的地方。 这些库简化了创建通用UI组件的过程。 您可以利用这些现有框架并对其进行自定义来满足您的需求。

jQuery UI是最广泛使用的框架之一 。 它是基于jQuery构建的一组扩展的小部件、效果和主题，并分成了自己的一组组件。 您可以将所有jQuery UI元素下载到一个捆绑包中，也可以选择感兴趣的组件和功能。使用这样的集合，可以为组件创建一致的外观，并可以启动和运行时大惊小怪。

尽管jQuery UI很好用，并且是一个不错的选择，但还有其他框架拥有令人赞叹的高质量控件。 在本文中，我将分析其中的一些以了解它们如何堆叠。

Kendo UI

付费框架

Kendo UI框架提供了一系列超过70个组件，可用于加快开发速度。 这些组件是响应式、主题化、快速且高度可定制的。

关于Keno UI以及它如何可以帮助您创建很棒的交互式元素，有几件事值得我们关注。

首先，这些组件是由Telerik从头开始构建的，以确保快速。 与其他框架不同，这些小部件是使用JS从头开始构建的，根本不需要jQuery。 即使在移动设备上观看，这些组件本身也会给人快速、平滑和坚固的感觉。

在我们谈论移动设备时，这是Kendo UI的另一个亮点。 这些组件在构建时就考虑到了移动设备，根据查看位置提供了自适应的布局。 大多数小部件会相应地进行调整，并根据您使用的是移动设备来更改其控件。 这是一个很棒的功能。 这是Slider组件，它会根据您的屏幕大小自动进行调整。

从实现的角度来看，这些控件也是经过深思熟虑的。 开发人员可以在JS中进行设置，也可以在服务器端对其进行配置（例如，通过PHP输出）。 除了Kendo UI的网络方面，此框架的其他分支也可用于Android和iOS （如果您想在应用程序中使用它们）。

另一有趣的是Angular JS的集成组件。 这是一个相当完整的系统，具有从头开始创建的UI元素，以与Angular项目完美匹配。 如果您希望利用Angular，很高兴知道Kendo已经接受了它们，并且继续前进，您应该获得支持。

 

要注意的一件事是Kendo UI不是一个免费的框架 。 这是一个完全商业化的库，根据您的许可需求，您可能要花费数千美元。 这本身可能足以吓跑一些开发人员，但是，您所支付的质量和支持是您所要付出的。

Webix

免费/付费框架

Webix为开发人员提供了一种快速简便的方法来开始构建常见的UI元素。 它带有一系列数据可视化、布局、导航和编辑控件。 尽管此框架与jQuery UI共享了一些组件（日历、手风琴、对话等），但Webix扩展并超出了jQuery UI通常可以提供的功能。

您获得的文档令人印象深刻。 所有控件都附带有API参考指南，其中概述了控件的所有方法、属性和事件。 此外，大多数控件都具有指向多个示例的链接，从而向您确切显示控件的功能。 拥有友好的文档非常重要，因此很高兴看到他们将时间投入到文档中。

另一个值得考虑的因素是，他们经常在其博客上发布内容，其中有几篇文章提供了有用的建议和实际示例，例如有关UI组件可访问性的这篇文章 。 那里有很多框架，因此找到一个提供新鲜内容的框架总是很有价值的。

Webix提供对其框架的免费和付费访问。 他们的免费版涵盖了您可能需要运行的大部分内容，并且可以访问图表 、 列表 、 树和日历等常见元素。

其服务的付费版本带有其他控件（例如， 多选和日期范围选择器 ）以及支持和帮助。

他们的付费服务的另一个方面是访问一些非常详细的解决方案，例如Scheduler 。

这些额外的付费额外费用是非常详细的小部件，这些小部件可消除您自己构建这些组件的复杂性，让您专注于自定义功能和样式。

总的来说，免费的小部件是可靠的，并提供了很多功能。 考虑到您可以免费获得一些出色的控件，他们服务的付费部分是可以理解和适当的。 您将需要查看其小部件文档，以了解额外的控件和功能是否物有所值。

如果您正在寻找一个记录良好的、几乎免费的解决方案来满足您的UI需求，那么Webix可能就是您的理想选择。

JQwidgets

半免费/付费框架

JQWidgets是一个由jQuery驱动的框架，旨在使开发人员能够为网站构建响应快速、健壮的UI组件。 已创建JQWidget的组件以利用jQuery提供交互式、动态和高度可定制的窗口小部件。

当您开始学习一个新的框架时，能够与开发人员取得联系，提出问题并了解所有工作的方式是非常好的。JQWidgets提供了一个易于使用的论坛，它似乎是一个经常受到监视的论坛。 除论坛外，还有来自开发人员的最近更新的博客 （包括文章、发行说明和总体思路的组合）。

文档是任何框架的核心，JQWidgets也不例外。 他们的文档概述了每个小部件的工作方式，最后还提供了示例代码和一个不错的演示。 这是Popover小部件的文档 。 每个小部件都有一个简单但易于学习的API参考指南，以及有关如何实现每个属性或方法的示例。

值得一提的另一点是JQWidget支持React、 Angular甚至ASP .NET组件。 如果您倾向于其中一种，那么该框架可能会为您节省大量时间。

很高兴看到JQWidgets支持这些通用框架。您可以选择单独使用JQWidget还是以其替代形式之一（例如Angular）使用。 这是真正的双赢。

JQWidgets提供半免费和付费版本。 该集合的非商业用途是可以的。 但是，如果您正在考虑将其用于商业用途(并且大多数人将会这样做)，则需要购买许可证来保护自己。

价格差异与支持和公司规模有关。 如果您是单个开发人员，则可以使用其较低层的选项，就好像您是数字代理机构一样，您需要更多许可才能获得顶级选项。 总体而言，您支付的费用越多，获得的支持水平就越高。 由您决定哪个选项最合适。

EasyUI

半免费/付费框架

 

EasyUI是一组扩展的jQuery小部件，用于创建用于构建现代的、响应性强的网站和web应用程序的交互性。 使用EasyUI，您可以通过直接HTML标记或使用JavaScript创建通用的UI元素。

EasyUI的设计可能与我们研究过的其他UI框架不一致。 其设计的外观和感觉有些偏离。 就像是2010年设计的一样。

虽然默认样式可能会让您无所适从，但EasyUI附带了一个很棒的实时主题编辑器 ，可让您控制字体大小、文本颜色、背景颜色、位置和大多数其他常用属性。 最重要的是，它为您提供了直接的CSS访问权限，因此您可以随意玩耍并构建适合自己的主题。

这是“材料设计”的主题。

EasyUI的文档既简单又直观。 所有控件都显示在左侧，而相关信息则显示在右侧。 每个控件都附带一个示例屏幕截图，示例代码，然后是所有属性、方法和事件。 我主要的抱怨是，这些页面上没有真正的现场演示。

演示主页面为您提供了每个控件的演示的快速链接。 例如， 面板控件演示演示了如何使用自定义控件、嵌套面板和其他元素来显示外观。

jQuery EasyUI免费用于非商业用途，但是如果您是开发人员，则需要许可证。 价格在他们的联系页面上概述，并且总体而言是合理的（与其他框架的某些高端价格相比）。 整个图书馆确实是一个很好的起点，并且提供了一些您期望更高端/支持驱动的服务的其他功能，例如相当活跃的论坛和一系列扩展。

总体而言，这是一个可靠的框架，除了看上去有些陈旧（无论是网站还是文档），如果您正在寻找一个好的jQuery UI替代品，那么它也是一个不错的起点。

Wijmo

付费框架

Wijmo是一系列用TypeScript编写的自定义JavaScript控件，旨在创建快速、响应迅速和可扩展的UI控件。 Wijmo提供了广泛的控件，并支持多个JS框架，例如React、Angular和Vue。

 

Wijmo支持一系列控件，其中大多数控件集中于数据可视化和输入，例如图表、仪表、输入控件和网格。 虽然其他框架提供了一系列基本控件，例如对话或布局，但Wijmo似乎专注于数据。

需要指出的一个有趣的方面是，开发人员同时支持最新版本的Wijmo 5和旧版本的Wijmo3。Wijmo5是基于更现代的标准构建的，因此不能在IE8上使用。 这就是较旧的旧版本发挥作用的地方。 Wijmo 3是基于jQuery的，因此其支持可以一直追溯到IE6。 很高兴知道您可以选择，并且开发人员正在支持较旧的框架，以防万一您需要使用它们。

Wijmo的文档及其站点结构令人困惑。 他们的所有控件都列在其文档页面上 ，但是它们并不十分友好或令人兴奋。 例如，如果您想了解有关图表模块的更多信息，您将在此页面上结束。 该文档提供有关类和接口的详细信息，但不提供有关具体实现控件的详细信息，包括图像、代码示例、完整的描述或演示示例。

他们网站上的“资源管理器”部分向您展示了所有这些控件的外观，并允许您调整设置。 这是一个有趣的工具，有助于理解它们的外观和感觉。

这是通过其Flexchart组件绘制的折线图示例。

其他框架以更好的方式提供了文档，其中每个组件只有一个专用页面，而几个子页面则可以概述所需的技术组件、示例和说明。

投资新框架时，拥有可靠的文档至关重要。 如果您想查看运行中的图表模块（并希望查看代码示例），则需要导航回到演示页面并找到Flexchart演示以查看其工作原理。 要注意的另一点是他们最近更新的博客 。 这些似乎是有用的提示，系统要点和各种想法的结合。 这是一个很好的额外东西。

除了网站上的碎片，控件本身很有趣。 每个控件可让您调整其显示方式，提供自定义功能的回调，并总体上使您可以根据需要设置样式。

Wijmo提供其产品的试用期（类似于Kendo），但如果要在商业上使用它，则需要许可证。 购买页面概述了您的选择。 价格取决于您需要的元素，如果您只想要Wijmo 5，则可以单独购买。 但是，如果您需要.NET / Xamarin的控件，则需要高端企业许可。

由于Wijmo主要专注于数据可视化，因此很难将其与HighCharts之类的库进行比较，后者可以说是一些最佳的图形/图表视觉效果。

jQuery UI替代品

总的来说，这里有很多很棒的框架，可以完美替代或补充jQuery UI。 这些框架中的大多数（例如我们所研究的框架）都需要付款，这是可以理解的。

归根结底，如果您正在寻找解决方案，则需要支持像jQuery UI这样的体面的开放源代码计划，该计划可以利用社区经验，或者购买公司订阅并利用您已付费的经验。

如果您正在使用一个框架，并且您从不必从头开始中获益，那么这已经是一个胜利了。 您需要权衡所需的功能和控件，现有框架的价格（例如我们今天看到的价格）以及构建类似质量的东西所需的时间和精力。

这里有多个质量库， “替代至”站点列出了一些在创建超赞UI时可能要尝试的解决方案 。 如果您可以推荐其他任何不错的jQuery UI替代品，请在评论中让我知道。

原文链接: https://www.sitepoint.com/top-5-jquery-ui-alternatives/