配色: 字号:
这 5 个前端组件库,可以让你放弃 jQuery UI
2017-05-31 | 阅:  转:  |  分享 
  
这5个前端组件库,可以让你放弃jQueryUI







欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~



在建立Web应用时,通常都需要用到一些有用的UI组件。无论应用中需要的



是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么都面临两种选



择:要么自己来创建这些组件,要么使用现有的组件功能。



自行开发这些组件是复杂并耗时的,通常会花费大量的时间来独自完成这些组件,



这也正是UI库和框架存在的意义。现存的这些库简化了创建UI组件的过程。你



可以直接利用现有的框架,并自定义它们来满足自己的需求。



目前正在广泛使用的框架之一就是jQueryUI。这是一组扩展的使用jQuery构



建的部件、效果和主题,分为一组一组的形式。既可以在单个软件包中下载



jQueryUI的所有元素,也可以选择只下载感兴趣的组件和功能。使用这样的控



件集能够为组件创建出一致的外观,并允许以更少的投入快速创建出应用。



虽然jQueryUI能起到很好的作用,但是还有其它的一些框架,拥有很好的高品



质控件。在这篇文章中,将会分析其中的几个框架并做比较。



KendoUI



这是一个付费框架,KendoUIFramework提供了一系列超过70个用于加速开



发过程的组件。这些组件是响应式的、可设置主题的、快速的和高度可定制的。





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



首先这些组件是由Telerik开发的。与其它框架不同的是,这些小部件仅使用JS,



并且是从头开始构建的,根本不需要jQuery。即使在移动设备上查看,组件也



是快速,平稳并且稳定的。



说到移动设备,这也是KendoUI擅长的领域之一。这些组件的建立考虑到了移



动设备,根据组件被设置的位置,提供了响应式的和自适应的布局。根据是否在



移动设备上显示,大多数小部件都会进行相应的调整和更改,这是一个很好的功



能。下面是一个滑块组件,它会根据屏幕尺寸自动调整。







从实施的角度来看,这些控件也是经过深思熟虑的。开发人员既可以在JS中进



行设置,也可以在服务器端设置(例如通过PHP输出)。除了KendoUI的web



应用方面,这个框架的一些分支还可以用于Android和iOS。



另外,KendoUI是使用AngularJS的组件集成的。这是一个使用UI元素从头



创建的完整系统,能够完美匹配你的Angular项目。如果你想要使用Angular,



那么KendoUI已经支持了。









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







Wijmo



这是一个付费框架。Wijmo是一系列使用TypeScript编写的自定义JavaScript



控件,用于创建快速、响应式的和可扩展的UI控件。Wijmo提供了广泛的控件,



并支持多个JS框架,如React,Angular和Vue。





Wijmo支持一系列控件,其中大多数都集中在数据可视化和输入方面,如图表,



仪表,输入控件和网格控件。虽然其它框架提供了一系列基本控件,如对话或布



局控件,但Wijmo更加专注于数据。









有趣的一点是,Wijmo5构建在更现代化的标准之上,因此在IE8上不起作用,



此时就需要Wijmo的旧版本。Wijmo3是基于jQuery,所以它支持直到在IE6

上使用。Wijmo提供的这种版本选择方式,对开发人员来说是一件很酷的事情,



因为开发人员能够根据自己应用的具体运行场景来自行选择究竟是使用Wijmo



3还是Wijmo5。



Wijmo的网站上有一个“资源管理器”,显示了所有的控件,并允许调整设置。



这是一个有趣的工具,有助于了解控件的外观和感觉。



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













在选择新的框架时,如果有较好的文档会变得非常好。如果你查想Wijmo的图



表模块(和代码示例),那么可以在demopage页面找到FlexChartdemo,



以便了解它是如何工作的。Wijmo开发者的博客也会经常更新,博客中会提供



一些有用的提示,系统的亮点和各种各样的想法。





Wijmo网站上的控件是很有趣的。每个控件都允许调整其显示方式,并为自定



义功能提供回调以便根据需要对其进行调整。



Wijmo为产品提供了免费试用期,如果用于商业目的,则需要购买授权。如果



想单独购买Wijmo5,也是可以的。如果需要.NET/Xamarin上的控件,则需



要最高的enterpriselicensing授权。







Webix



这是一个免费/付费框架。Webix为开发人员提供了一种快速简便的构建常见UI



元素的方式。它包含了一系列数据可视化、布局、导航和编辑控件。虽然这个框



架与jQueryUI共享一些组件,但Webix扩展了jQueryUI并提供了一些不同



于jQueryUI中常用的组件。





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部件的集合,用于创建



新式的,交互式网站和webapp的交互。使用EasyUI,你可以使用HTML标



记或者JavaScript来创建常用的UI元素。







EasyUI的设计可能与我们以前见到的一些UI框架不同。虽然EasyUI的默认样



式可能会让你毫无灵感,但EasyUI附带了一个非常棒的实时主题编辑器,可让



实现字体大小,文字颜色,背景颜色,位置以及其他常见属性的设置。最重要的



是,它允许直接访问CSS,以便让你构建出一个适合的主题。



下面就是“MaterialDesign”的主题。









EasyUI的文档简单直观。所有的控件显示在左侧,右侧显示相关信息。每个控



件都附带一个示例截图、示例代码,然后是所有的属性、方法和事件。在主演示



页,可以快速查看Demo和每一个控件。例如,PanelControl演示了如何使用



自定义控件,嵌套面板和其它元素。







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



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



总结:



能够完美代替或补充jQueryUI的框架有很多,其中一大部分都是需要付费的。



如果你正在寻求一个好的解决方案,那么既可以使用jQueryUI的开源社区,也



可以购买付费框架。这需要从控件功能和控件价格去综合考虑衡量,以便选择最



适合自己的框架。







本文是由葡萄城控件技术开发团队发布,转载请注明出处:葡萄城控件



了解更多开发工具和技巧,请前往葡萄城控件官网



了解企业级报表和Web应用,请前往葡萄城企业软件网站
献花(0)
+1
(本文系zenmshuo首藏)