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

author author     2022-09-02     720

关键词:

在建立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/

转载请注明出自:葡萄城控件

本文出自 “葡萄城控件技术团队博客” 博客,谢绝转载!

jqueryui(代码片段)

...的选择,UI框架有很多例如bootstrap、easyUI....本文主要介绍jQueryUI; 概述QueryUI是建立在JavaScript、jQuery之上的UI库,主要包含:交互组件、部件、高级效果.... 一、交互组件1.Draggable组件顾名思义 查看详情

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪九个前端神奇库文章目录九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪1.Lottie-web/Bodymovin2.Parallax.js3.MagicGrid4.webslides5.SVG.js6.rellax7.dynamics.j... 查看详情

墨刀联合有赞vant组件库,让你轻松设计出电商原型

...件库(做电商的宝宝要捂嘴笑了) Vant组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠(目前在Github上已经收获星星7857颗)相比于... 查看详情

使用 Assetic / Twig / Symfony2,我可以定义前端库吗?

...Symfony2、Assetic和Twig。我有各种前端库——Backbone、jQuery、jQueryUI和Bootstrap。Bootstrap和jQueryUI都包含 查看详情

这48个java技术点,让你的面试成功率提升5倍!

...单位是bit,非字节1B=8bit String能被继承吗?为什么?不可以,因为String类有final修饰符,而final修饰的类是不能被继承的,实现细节不允许改变。平常我们定义的Stringstr=”a”;其实和Stringstr=newString(“a”)还是有差异的。前者默... 查看详情

前端通用组件设计

...高复用的组件并不是每个人都能做到,而这也是检验一个前端开发人员的一个标准。说到开发组件,首先需要考虑一个问题,一个可复用的组件都需要具备哪些必要条件。1.细粒度考量看过设计模式的朋友应该有了解过很多设计... 查看详情

如何在 MVC 5 项目中添加 jQueryUI 库?

】如何在MVC5项目中添加jQueryUI库?【英文标题】:HowtoaddjQueryUIlibraryinMVC5project?【发布时间】:2013-12-0313:59:41【问题描述】:我刚刚安装了VisualStudio2013并开始了新的MVC5项目。我是MVC开发的新手,我不知道如何在我的项目中添加库... 查看详情

rollup开发自己的组件库(5)

参考技术A3.修改package.json4.修改rollup.config.js5.npmrunbuild打开打包好的文件看一下,2000+行,实际上react还是被打包了进来6.修改rollup.config.js7.npmrunbuild8.关于语法的问题这个也是我在最开始说的,在tsconfig中控制主要就是target和module... 查看详情

前端最近流行的框架有哪些?

...tstrap,让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件,还有强大的支... 查看详情

在家徒手健身就是这9个动作,让你一天帅24小时

...来,让你一天帅24小时!  只要想练,随时随地就可以开始。 以下9个家用徒手锻炼动作,让你随时随地练起来,完全不受场地和器械的影响。什么动作练什么肌肉一目了然! 动作1 徒手深蹲10-20次   ... 查看详情

七夕打算如何向女神表白?这5个表白神器让你俘获女神的心!

再过一周就是七夕节啦,你想好怎样向女神表白了嘛?找了5个表白神器,经过一番修改后,才让这些项目运行起来。有女神的,自己亲手做一个送给自己的女神!光棍的,自己收藏起来,留着练手... 查看详情

七夕打算如何向女神表白?这5个表白神器让你俘获女神的心!

再过一周就是七夕节啦,你想好怎样向女神表白了嘛?找了5个表白神器,经过一番修改后,才让这些项目运行起来。有女神的,自己亲手做一个送给自己的女神!光棍的,自己收藏起来,留着练手... 查看详情

15个有趣的js和css库

开发者们,一起来看看有木有你需要的前端库。1.DisplayJSDisplayJS是一个帮助你渲染DOM的简易框架。使用它,你可以更容易地将JS变量遍历到特定的HTML元素中,类似于React或Vue.js处理模版的方式。项目地址:【传送门】2.ReactBeautifulD... 查看详情

让你的原型不再low-一套设计师倾情奉献的组件库免费下载

让你的原型不再LOW-一套设计师倾情奉献的组件库【文章摘要】很多小伙伴常常抱怨没有好的组件库,导致每次画原型的时候自己一个按钮一个按钮绘制,效率低下。这个组件库来自有着多年经验的中梦科技设计总监@姚岁岁,从... 查看详情

此图表中有多少个强连接组件?

请考虑以下图表。我可以区分4个强连接组件,但它们是5.我错过了哪一个?此外,节点可以在多个组件中共享吗?答案这5个组成部分是:左上角的节点右上角的节点左下方节点右下方节点其余的节点你认为组件实际上不是组件... 查看详情

ppt总是做得很慢?这5个高能技巧,能让你毫不费力的完成ppt

...时大家都是怎么制作PPT封面的呢?制作PPT封面,其实我们可以通过PPT自带的SmartArt功能来完成,而且出来的效果同样也很棒哦~点击菜单栏中的【插入】——【SmartArt】——【六边形群集】——依次插入图片即可... 查看详情

5个顶级的javascriptajax组件和库(代码片段)

在这篇文章中,我们将介绍一些用于AJAX调用的最好的JS库,包括jQuery,Axios和Fetch。欢迎查看代码示例!AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。AJAX即AsynchronousJavaScriptandXML(异步JavaScript和XML)。AJAX... 查看详情

自学web前端觉得好难,可能你遇到了这些困境

好多人跟我说上学的时候也学过前端,毕业了想从事web前端开发的工作,但自学起来好难,快要放弃了,所以我总结了一些大家遇到的困境,希望对你会有所帮助。 目录1. 意志是否坚定2.没有找到合适自己的... 查看详情