jquery ui_排名前5位的jQuery UI替代品

jquery ui

When building for the modern web you often need to create useful UI components. Whether you need a calendar, slider, graph or anything else that’s useful for improving or simplifying user interaction, your options are either to create it yourself or leverage existing functionality.

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

Developing these components yourself is often time-consuming and complex, and unless you’re doing something entirely unique it’s often not a great use of your time. That is where UI libraries and frameworks come into play. These libraries simplify the process of creating common UI components. You can leverage these existing frameworks and customize them to suit your needs.

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

One of the largest and widely used frameworks is jQuery UI. It’s an extended set of widgets, effects, and themes built off of jQuery, separated into its own set of components. You can download all of the jQuery UI elements in a single bundle, or you can pick and choose the components and functionality you’re interested in. Using a collection like this lets you create a consistent appearance for your components and lets you get up and running with a minimal of fuss.

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

While jQuery UI works great and is a good go-to option, there are other frameworks out there that boast amazing, high-quality controls. In this article I will analyze a few of these to see how they stack up.

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

剑道UI (Kendo UI)

Paid Framework

付费框架

The Kendo UI Framework provides a series of over 70 components useful for speeding up your development. These components are responsive, themeable, fast and highly customizable.

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

There are several things to love about Keno UI and how it can help you create awesome interactive elements.

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

Firstly these components are built from the ground up by Telerik to be fast. Unlike some other frameworks, these widgets have been built from scratch with just JS and don’t require jQuery at all. The components themselves feel fast, smooth and solid even when viewed on mobile devices.

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

While we’re talking about mobile devices, this is another area where Kendo UI shines. The components are built with mobile devices in mind, providing a responsive and adaptive layout depending on where they are viewed. Most widgets adjust accordingly and change their controls depending on if you’re on a mobile device. It’s a great feature. Here’s the Slider component, it automatically adjusts based on your screen size.

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

From an implementation standpoint, these controls as well thought out. Developers can either set them up in JS or have them configured server-side (e.g output via PHP). Besides the web aspects of Kendo UI, there are also branches of this framework that can be used for Android and iOS (In case you wanted to use them in your apps).

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

Another thing that’s interesting is the integration component with Angular JS. It’s a fairly complete system with UI elements created from scratch to perfectly match your Angular project. If you’re looking to leverage Angular it’s nice to know that Kendo has embraced them and that moving forward you should have support.

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

One thing to note is that Kendo UI isn’t a free framework. It’s a fully commercial library that can cost you up to several thousand depending on your licensing needs. This by itself might be enough to scare some developers away, however, the quality and support that you receive are what you’re paying for.

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

Webix (Webix)

Free / Paid Framework

免费/付费框架

Webix provides developers with a quick and easy way to get started building common UI elements. It comes with a range of data visualization, layout, navigation and editing controls. While this framework shares some components with jQuery UI (calendars, accordions, dialogues etc), Webix extends and goes beyond what you can normally get with jQuery UI.

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

The documentation you get is impressive. All of the controls come with an API reference guide which outlines all of the control’s methods, properties, and events. In addition, most controls will have links to several samples, showing you exactly how the control functions. Having friendly documentation is really important so it’s great to see they put time into their docs.

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

Another factor worth considering is that they publish content on their blog frequently, with several posts offering useful advice and practical examples, such as this post about accessibility for UI components. There are heaps of frameworks out there, so finding one that provides fresh content is always valuable.

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

Webix offers both free and paid access to their framework. Their free edition covers the majority of what you might need to get up running, with access to common elements such as charts, lists, trees and calendars.

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

The paid version of their service comes with additional controls (such as the multi-select and date-range picker) along with support and assistance.

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

Another aspect of their paid service is access to several highly detailed solutions such as their Scheduler.

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

These additional paid extras are highly detailed widgets that abstract away the complexity of building these components yourself, letting you focus on your custom functionality and styling.

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

Overall, the free widgets are solid and offer a great deal of functionality. The paid component of their service is understandable and appropriate considering that you can get some great controls for free. You will have to look through their widget documentation to see if the extra controls and functionality are worth the price.

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

If you’re looking for a well documented, mostly free solution to your UI needs then Webix might just be right for you.

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

JQwidgets (JQwidgets)

Semi-free / Paid Framework

半免费/付费框架

JQWidgets is a jQuery-powered framework created to empower developers to build responsive, fast, and robust UI components for websites. JQWidget’s components have been created to leverage jQuery to provide interactive, dynamic and highly customizable widgets.

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

When you’re picking up and learning a new framework it’s great to have a way to get in touch with the developers to ask questions and get a feel for how everything works. JQWidgets have provided an easy to use and what seems to be a frequently monitored forum. In addition to the forum is a fairly recently updated blog from the devs (with a combination of articles, release notes, and overall thoughts).

在学习和学习新框架时，很高兴能与开发人员取得联系，提出问题并了解一切工作原理。 JQWidgets提供了一个易于使用的论坛，它似乎是一个经常受到监视的论坛。 除论坛外，还有来自开发人员的最近更新的博客 (包括文章，发行说明和总体思路的组合)。

Documentation is at the heart of any framework and JQWidgets is no different. Their documentation outlines how each of their widgets works, along with sample code and a nice demo at the end. Here’s the documentation for the Popover widget. Each of these widgets also has a simple, yet easy to learn API reference guide along with examples of how to implement each property or method.

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

Another point that’s worth mentioning is that JQWidget supports React, Angular, and even ASP .NET components. If you’re tending towards one of those then this framework could potentially save you a lot of time.

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

It’s great to see JQWidgets embracing these common frameworks. You have the choice of either using JQWidget by itself or in one of its alternate forms such as Angular. It’s a true win-win.

看到JQWidgets拥抱这些通用框架真是太好了。 您可以选择单独使用JQWidget还是以其替代形式之一(例如Angular)使用。 这是真正的双赢。

JQWidgets comes in both semi-free and paid variants. Non-commercial use of the collection is fine. However, if you’re looking at using this commercially (and most of you will be), you’ll need to purchase a license to cover yourself.

JQWidgets提供半免费和付费版本。 该集合的非商业用途是可以的。 但是，如果您打算将其用于商业用途(并且大多数人会使用)，则需要购买许可证以自保。

The differences in pricing have to do with support and company size. If you’re a single developer you can use their lower-tier option, where as if you’re a digital agency you’ll need a license more towards the top range of options. Overall, the more you pay, the higher level of support you’ll receive. It’s going to be up to you to determine which option is most appropriate.

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

EasyUI (EasyUI)

Semi-free / Paid Framework

半免费/付费框架

EasyUI is a collection of extended jQuery widgets, used to create interactivity for building modern, responsive websites and web apps. With EasyUI, you can create common UI elements from either direct HTML markup or, alternatively, with JavaScript.

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

The design of EasyUI might seem at odds with some of the other UI frameworks we’ve looked at. Part of its design looks and feels a bit off. Like it was designed in 2010.

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

While the default styling might leave you uninspired, EasyUI comes with a pretty awesome live theme editor, letting you control the font size, text colors, background colors, positions and most other common properties. On top of that, it gives you direct CSS access so you can play around and build a theme that works just right for you.

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

Here’s the ‘Material Design’ theme in action.

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

The docs for EasyUI are simple and intuitive. All of the controls are shown on the left and the associated info on the right. Each control comes with a sample screenshot, sample code and then all of the properties, methods, and events. My main gripe here is that there’s no real live demo on those pages.

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

The main Demo page gives you quick links to demos for each control. For example, the Panel Control demo shows how it could look with custom controls, nested panels, and other elements.

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

jQuery EasyUI is free for non-commercial use, but if you’re a developer you’ll need a license. The price is outlined on their contact page and overall it’s fairly reasonable (when compared to some of the higher-end prices of other frameworks). The Library as a whole is a really good starting point and offers some additional features you’d expect of a more high-end/support-driven service, such as a fairly active forum and a series of extensions.

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

Overall, it’s a solid framework and, besides the fact that it looks a little old (both the website and the docs), it’s a solid place to start if you’re looking for a good jQuery UI replacement.

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

维莫 (Wijmo)

Paid Framework

付费框架

Wijmo is a series of custom JavaScript controls written in TypeScript and built to create fast, responsive and extensible UI controls. Wijmo provides a wide range of controls and supports several JS Frameworks such as React, Angular, and Vue.

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

Wijmo supports a range of controls, most of them focused on data visualization and input such as charts, gauges, input controls and grids. While other frameworks provide a series of basic controls such as dialogues or layouts, Wijmo seems to focus on data.

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

An interesting aspect thing to point out is that the developers provide support for both the latest version, Wijmo 5, and the legacy version, Wijmo 3. Wijmo 5 is built around more modern standards and as such won’t work on IE8. That’s where the older legacy version comes into play. Wijmo 3 is based on jQuery so its support reaches all the way back to IE6. It’s a nice thing to know that you have a choice and that the developers are supporting older frameworks just in case you need to use them.

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

Wijmo’s docs and the structure of their site is confusing. All of their controls are listed on their docs page, however, they’re not very friendly or exciting. For example, if you wanted to find out more about the chart module, you’d end up on this page. The docs provide detailed info about the classes and interfaces but not about specifically implementing the control, with images, code samples, solid descriptions or showcases of demos.

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

There’s an ‘Explorer’ section on their site that shows you how all these controls look and lets you adjust settings. It’s a fun tool and good for getting an understanding of what they look and feel like.

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

Here’s an example of a line graph via their Flexchart component.

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

Other frameworks have provided documentation in a better way, with either a single dedicated page for each component or several sub-pages to outline the technical components, examples, and description you need.

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

Having solid documentation is critical when investing in a new framework. If you wanted to see the chart module in action (and wanted to see code examples) you’d need to navigate back to the demo page and find the Flexchart demo to see how it all works. Another point to note is their fairly recently updated blog. These seem like a combination of useful tips, highlights of the system, and various thoughts. It’s something that a nice extra.

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

The fragmentation on their website aside, the controls themselves are interesting. Each control lets you adjust how it will display, provide callbacks for custom functionality and overall lets you style them as you need.

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

Wijmo offers trial periods for their products (similar to Kendo), but if you want to use it commercially you’ll need a license. The purchase page outlines your options. The price depends on which elements you need, if you just want Wijmo 5 it can be purchased by itself. However, if you need the controls for .NET / Xamarin you’ll need the high-end enterprise licensing.

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

Since Wijmo is focused primarily on data visualization, it’s hard not to compare it to libraries such as HighCharts which has arguably some of the best graph/chart visuals.

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

jQuery UI替代品 (jQuery UI Alternatives)

Overall, there’s a heap of great frameworks out there that are perfect replacements or supplements to jQuery UI. Most of these frameworks, such as the ones we’ve looked at, require payment, which is understandable.

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

At the end of the day, if you’re looking for a solution you will either need to back a decent Open Source initiative like jQuery UI which leverages community experience, or purchase a subscription to a company and leverage the experience you’ve paid for.

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

If you’re using a framework and you’re benefiting from not having to start from scratch that’s already a win. You’ll need to weigh up the features and controls you need against the price of an existing framework (such as the ones we’ve looked at today) and the time and energy you’d need to build something of similar quality.

如果您使用的是框架，而不必从头开始，那么您将受益匪浅。 您需要权衡所需的功能和控件，现有框架的价格(例如我们今天看到的价格)以及构建类似质量的东西所需的时间和精力。

There are several quality libraries out there, the ‘Alternative To’ site lists several solutions you might want to experiment with when it comes to creating an awesome UI. If you can recommend any other good jQuery UI alternatives, please let me know in the comments.

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

This article was peer reviewed by Dominic Myers. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Dominic Myers进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/top-5-jquery-ui-alternatives/

jquery ui