这 5 个前端组件库,可以让你放弃 jQuery UI

在建立Web应用时,通常都需要用到一些有用的UI组件。无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么都面临两种选择:要么自己来创建这些组件,要么使用现有的组件功能。

自行开发这些组件是复杂并耗时的,通常会花费大量的时间来独自完成这些组件,这也正是UI库和框架存在的意义。现存的这些库简化了创建UI组件的过程。你可以直接利用现有的框架,并自定义它们来满足自己的需求。

目前正在广泛使用的框架之一就是jQuery UI。这是一组扩展的使用jQuery构建的部件、效果和主题,分为一组一组的形式。既可以在单个软件包中下载jQuery UI的所有元素,也可以选择只下载感兴趣的组件和功能。使用这样的控件集能够为组件创建出一致的外观,并允许以更少的投入快速创建出应用。

虽然jQuery UI能起到很好的作用,但是还有其它的一些框架,拥有很好的高品质控件。在这篇文章中,将会分析其中的几个框架并做比较。

Kendo UI

这是一个付费框架,Kendo UI Framework提供了一系列超过70个用于加速开发过程的组件。这些组件是响应式的、可设置主题的、快速的和高度可定制的。

以下讲解Kendo UI的几件事情以及如何使用Kendo UI来创建炫酷的交互元素。

首先这些组件是由Telerik开发的。与其它框架不同的是,这些小部件仅使用JS,并且是从头开始构建的,根本不需要jQuery。即使在移动设备上查看,组件也是快速,平稳并且稳定的。

说到移动设备,这也是Kendo UI擅长的领域之一。这些组件的建立考虑到了移动设备,根据组件被设置的位置,提供了响应式的和自适应的布局。根据是否在移动设备上显示,大多数小部件都会进行相应的调整和更改,这是一个很好的功能。下面是一个滑块组件,它会根据屏幕尺寸自动调整。

从实施的角度来看,这些控件也是经过深思熟虑的。开发人员既可以在JS中进行设置,也可以在服务器端设置(例如通过PHP输出)。除了Kendo UI的web应用方面,这个框架的一些分支还可以用于Android和iOS。

另外,Kendo UI是使用AngularJS的组件集成的。这是一个使用UI元素从头创建的完整系统,能够完美匹配你的Angular项目。如果你想要使用Angular,那么Kendo UI已经支持了。

需要注意的是,Kendo UI不是一个免费的框架。

Wijmo

这是一个付费框架。Wijmo是一系列使用TypeScript 编写的自定义JavaScript控件,用于创建快速、响应式的和可扩展的UI控件。Wijmo提供了广泛的控件,并支持多个JS框架,如React,Angular和Vue。

Wijmo支持一系列控件,其中大多数都集中在数据可视化和输入方面,如图表,仪表,输入控件和网格控件。虽然其它框架提供了一系列基本控件,如对话或布局控件,但Wijmo更加专注于数据。

有趣的一点是,Wijmo 5构建在更现代化的标准之上,因此在IE8上不起作用,此时就需要Wijmo的旧版本。Wijmo 3是基于jQuery,所以它支持直到在IE6上使用。Wijmo提供的这种版本选择方式,对开发人员来说是一件很酷的事情,因为开发人员能够根据自己应用的具体运行场景来自行选择究竟是使用Wijmo 3还是Wijmo 5。

Wijmo的网站上有一个“资源管理器”,显示了所有的控件,并允许调整设置。这是一个有趣的工具,有助于了解控件的外观和感觉。

下面是Flexchart控件的图表示例。

在选择新的框架时,如果有较好的文档会变得非常好。如果你查想Wijmo的图表模块(和代码示例),那么可以在demo page页面找到FlexChart demo,以便了解它是如何工作的。Wijmo开发者的博客也会经常更新,博客中会提供一些有用的提示,系统的亮点和各种各样的想法。

Wijmo网站上的控件是很有趣的。每个控件都允许调整其显示方式,并为自定义功能提供回调以便根据需要对其进行调整。

Wijmo为产品提供了免费试用期,如果用于商业目的,则需要购买授权。如果想单独购买Wijmo5,也是可以的。如果需要.NET / Xamarin上的控件,则需要最高的enterprise licensing授权。

Webix

这是一个免费/付费框架。Webix为开发人员提供了一种快速简便的构建常见UI元素的方式。它包含了一系列数据可视化、布局、导航和编辑控件。虽然这个框架与jQuery UI共享一些组件,但Webix扩展了jQuery UI并提供了一些不同于jQuery UI中常用的组件。


Webix文档具有很好的帮助作用。所有控件都带有一个API参考指南,其中涵盖了控件的所有方法,属性和事件。此外,大多数控件都具有一些样例,用于准确的展示控件功能。这些阅读友好的文档能起到重要作用,这也是Webix开发者用心编写文档的结果。

另外一点值得注意的是,Webix开发者经常会在博客上发布一些内容,其中有几个帖子提供有用的建议和实际的例子。虽然框架很多,但是一个内容持续更新的框架是非常有价值的。

Webix提供了对框架的免费和付费的两种获取方式。免费版包含了大部分构建应用初始时会用到的功能。付费版提供了一些额外的控件,并对这些控件提供支持和帮助。

另外,付费版还提供一些很详细的的解决方案。

这些额外的付费附加件是很详细的小部件,使用这些小部件可以抽象化构建组件的复杂性,让你专注于自定义功能和样式方面。

总的来说,免费的小部件是很稳固的,提供了大量的功能。既然可以免费获得一些很好的控件,那么付费版就需要好好考虑是否值得了。

如果你正在寻求一个有详细文档并且大部分控件是免费的UI解决方案,那么Webix是一个好选择。

JQwidgets

这是一个半付费/付费框架。JQWidgets是一个jQuery驱动的框架,用于为网站建立响应式、快速、强大的UI组件。JQWidget的组件主要是使用jQuery,并提供了交互式,动态和高度可定制的小部件。

JQWidget有一个易于使用和会被监视的论坛,论坛上经常会有博客更新。

 

同其它框架一样,JQWidgets的文档也是框架的核心。JQWidgets的文档概述了每个小部件的工作原理、示例代码和一个很好的演示。每个小部件还有一个简单易懂的API参考指南以及如何实现每个属性或方法的示例。

另外,值得一提的是JQWidget支持React,Angular甚至ASP
.NET组件。如果你倾向于其中一个,那么这个框架会为你节省很多时间开发。

JQWidgets提供半自由和付费两种方式。非商业性使用是允许的。但是,如果用于商业目的,那么必须购买授权。

EasyUI

这是一个半付费/付费框架。EasyUI是一个扩展jQuery部件的集合,用于创建新式的,交互式网站和web app的交互。使用EasyUI,你可以使用HTML标记或者JavaScript来创建常用的UI元素。

EasyUI的设计可能与我们以前见到的一些UI框架不同。虽然EasyUI的默认样式可能会让你毫无灵感,但EasyUI附带了一个非常棒的实时主题编辑器,可让实现字体大小,文字颜色,背景颜色,位置以及其他常见属性的设置。最重要的是,它允许直接访问CSS,以便让你构建出一个适合的主题。

下面就是“Material Design”的主题。

EasyUI的文档简单直观。所有的控件显示在左侧,右侧显示相关信息。每个控件都附带一个示例截图、示例代码,然后是所有的属性、方法和事件。在主演示页,可以快速查看Demo和每一个控件。例如,Panel Control演示了如何使用自定义控件,嵌套面板和其它元素。

如果用于非商业用途,jQuery EasyUI是免费的,但如果用于开发,则需要授权。

总的来说,EasyUI是一个坚实的框架,但是网站和文档比较旧。

总结:

能够完美代替或补充jQuery UI的框架有很多,其中一大部分都是需要付费的。如果你正在寻求一个好的解决方案,那么既可以使用jQuery UI的开源社区,也可以购买付费框架。这需要从控件功能和控件价格去综合考虑衡量,以便选择最适合自己的框架。

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

 

相关阅读:

【报表福利大放送】100余套报表模板免费下载

Angular vs React 最全面深入对比

开放才能进步!Angular和Wijmo一起走过的日子

Wijmo已率先支持Angular4 & TypeScript 2.2

 

时间: 2024-10-27 01:03:27

这 5 个前端组件库,可以让你放弃 jQuery UI的相关文章

Angular2组件库 - Modal组件实现详解(一)

       这篇文章其实写的有点晚了.去年6月份,Angular2的版本刚升级到rc-4,一切都还处于蛮荒时期(虽然现在依然不是太稳定...).当时为我们的组件库开发Modal组件,因为严格遵守ant design的规范来开发,所以Modal包含了Directive和Service两种模式        Directive模式非常符合Angular2的设计思想,所以开发过程也是顺风顺水.使用的方法也非常的常规. import { Component } from '@angular/core'

Element 1.3.6 发布,饿了么 Vue 2.0 组件库

Element 1.3.6 已发布,更新内容: 修复 ColorPicker 的默认值有时与面板中的值不一致的问题 修复默认值为白色的 ColorPicker 无法通过面板改变 hue 的问题 修复 Dialog 在滚动后,其嵌套的 Select 需多次点击才能呼出的问题 新增 Autocomplete 的 props 属性 修复 DatePicker 在手动输入值后按 Tab 切换焦点时下拉框不消失的问题 Element 是由饿了么公司前端团队开源,是一套为开发者.设计师和产品经理准备的基于

Element 1.3.4 发布,饿了么 Vue 2.0 组件库

Element 1.3.4 已发布,Element 是由饿了么公司前端团队开源,是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 更新内容: 修复带展开行的 Table 在高亮和斑马纹效果下的问题 新增 Select 的 default-first-option 属性 修复可创建选项的 Select 在没有选项数据时不显示「无数据」文本的问题 文章转载自 开源中国社区[https://www.oschina.net]

Element 1.3.5 发布,饿了么 Vue 2.0 组件库

Element 1.3.5 已发布,更新内容: 修复 Select 的 default-first-option 属性在远程搜索时不生效的问题 修复 InputNumber 与其他表单组件同行显示时不能对齐的问题 修复行内 FormItem 对复合型 Input 失效的问题 修复 FormItem 在 Firefox 中的高度与其他浏览器不一致的问题 修复 Cascader 中 value 为 0 的数据不能展开下一级的问题 修复 Autocomplete 无法触发原生 keydown 和 ke

使用自定义验证组件库扩展 Windows 窗体

window 摘要:数据验证是确保正常的数据捕获以及后续处理和报告的关键步骤.本文介绍了 Windows 窗体固有的程序验证基础结构,并以此为基础开发了用于提供更高效验证功能的自定义验证组件库,该验证功能与使用 ASP.NET 的验证控件相似. 下载 winforms03162004_sample.msi 示例文件. 本页内容 引言 Windows 窗体验证的主要功能 程序验证与声明性验证 建立设计时支持 模仿是最真诚的恭维 必需字段验证程序简介 BaseValidator:分治法 一个放便士,

基于唯一状态的前端组件开发

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法,什么是唯一状态,采用唯一状态渲染到底有什么好处.希望大家看到这篇文章以后不用任何框架也可以写出基于唯一状态渲染的前端组件. 基于唯一状态的组件的开发模式就是组件内部永远只存在一份数据来表示组件的状态,并且更新组件时只只使用这一份数据. 这种开发模式的好处,主要体现在以下两个方面 减少事件与Dom元素的联系 便于保存和恢复组件的状态 减少事件与Dom元素的联系 我们先来看一段传统开发页面交互逻辑时写的代码: <span

泛函编程(18)-泛函库设计-并行运算组件库

   作为专业的编程人员,我们经常会因为工作需要建立一些工具库.所谓工具库就是针对工作上经常会遇到的一些共性问题预先编制的由一整套函数所组成的函数库.通常这些工具库的功能都是在特别定制的一些数据类型支持下由一系列函数围绕着这些数据类型进行运算而实现的.在泛函编程范畴内也不例外.但在泛函工具库里的函数则更重视函数的组合能力(functional composition):因而泛函的工具库一般称为组件库(combinator library),库内函数则被称之为组件(combinator).组件库的

winfrom 控件-Tzhtec.Controls组件库资源RegexTextBox和RegexComboBox

问题描述 Tzhtec.Controls组件库资源RegexTextBox和RegexComboBox 跪求Tzhtec.Controls组件库资源(RegexTextBox和RegexComboBox),要有整套也行~谢谢大神了~~~ 解决方案 http://www.tzhtec.com/down.aspx 解决方案二: 这种山寨控件知名度不高,除了作者自卖自夸几乎没有介绍.lz慎重考虑.

FrozenJS 针对移动端开发的 js 组件库

什么是FrozenJS FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI.FrozenJS 的所有组件均以 zepto 的插件的形式存在. FrozenJS 包括: basic:FrozenJS 的一些基础功能,包括模板引擎.tap 支持等. ui:主要是一些触屏常用的 UI 组件,包括 dialog 等. effect:非常用的特效库,特殊场景使用到是可以单独调用. 更多文档请查看:http://frozenui.github.io/froze