HTML5技术

这 5 个前端组件库,可以让你放弃 jQuery UI - 葡萄城控件技术团队

字号+ 作者:H5之家 来源:H5之家 2017-05-27 11:00 我要评论( )

欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的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有一个易于使用和会被监视的论坛,论坛上经常会有博客更新。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 前端架构之路:Windows下安装Nodejs步骤 - MikeXu

    前端架构之路:Windows下安装Nodejs步骤 - MikeXu

    2017-05-19 12:00

  • 腾讯ISUX网页前端代码分析 - 怡然城南

    腾讯ISUX网页前端代码分析 - 怡然城南

    2017-05-11 09:00

  • 解决xmapp中Apache端口号占用问题 - 小矮人Web前端

    解决xmapp中Apache端口号占用问题 - 小矮人Web前端

    2017-05-11 09:00

  • 从性能角度看react组件拆分的重要性 - wonyun

    从性能角度看react组件拆分的重要性 - wonyun

    2017-05-06 14:01

网友点评