這篇文章給大家介紹哪些前端組件庫可以讓你放棄jQuery UI,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
在建立Web應(yīng)用時(shí),通常都需要用到一些有用的UI組件。無論應(yīng)用中需要的是日歷,滑塊,圖形或其它用于提升或簡化用戶交互的組件,那么都面臨兩種選擇:要么自己來創(chuàng)建這些組件,要么使用現(xiàn)有的組件功能。
自行開發(fā)這些組件是復(fù)雜并耗時(shí)的,通常會(huì)花費(fèi)大量的時(shí)間來獨(dú)自完成這些組件,這也正是UI庫和框架存在的意義?,F(xiàn)存的這些庫簡化了創(chuàng)建UI組件的過程。你可以直接利用現(xiàn)有的框架,并自定義它們來滿足自己的需求。
目前正在廣泛使用的框架之一就是jQuery UI。這是一組擴(kuò)展的使用jQuery構(gòu)建的部件、效果和主題,分為一組一組的形式。既可以在單個(gè)軟件包中下載jQuery UI的所有元素,也可以選擇只下載感興趣的組件和功能。使用這樣的控件集能夠?yàn)榻M件創(chuàng)建出一致的外觀,并允許以更少的投入快速創(chuàng)建出應(yīng)用。
雖然jQuery UI能起到很好的作用,但是還有其它的一些框架,擁有很好的高品質(zhì)控件。在這篇文章中,將會(huì)分析其中的幾個(gè)框架并做比較。
這是一個(gè)付費(fèi)框架,Kendo UI Framework提供了一系列超過70個(gè)用于加速開發(fā)過程的組件。這些組件是響應(yīng)式的、可設(shè)置主題的、快速的和高度可定制的。
以下講解Kendo UI的幾件事情以及如何使用Kendo UI來創(chuàng)建炫酷的交互元素。
首先這些組件是由Telerik開發(fā)的。與其它框架不同的是,這些小部件僅使用JS,并且是從頭開始構(gòu)建的,根本不需要jQuery。即使在移動(dòng)設(shè)備上查看,組件也是快速,平穩(wěn)并且穩(wěn)定的。
說到移動(dòng)設(shè)備,這也是Kendo UI擅長的領(lǐng)域之一。這些組件的建立考慮到了移動(dòng)設(shè)備,根據(jù)組件被設(shè)置的位置,提供了響應(yīng)式的和自適應(yīng)的布局。根據(jù)是否在移動(dòng)設(shè)備上顯示,大多數(shù)小部件都會(huì)進(jìn)行相應(yīng)的調(diào)整和更改,這是一個(gè)很好的功能。下面是一個(gè)滑塊組件,它會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)整。
從實(shí)施的角度來看,這些控件也是經(jīng)過深思熟慮的。開發(fā)人員既可以在JS中進(jìn)行設(shè)置,也可以在服務(wù)器端設(shè)置(例如通過PHP輸出)。除了Kendo UI的web應(yīng)用方面,這個(gè)框架的一些分支還可以用于Android和iOS。
另外,Kendo UI是使用AngularJS的組件集成的。這是一個(gè)使用UI元素從頭創(chuàng)建的完整系統(tǒng),能夠完美匹配你的Angular項(xiàng)目。如果你想要使用Angular,那么Kendo UI已經(jīng)支持了。
需要注意的是,Kendo UI不是一個(gè)免費(fèi)的框架。
這是一個(gè)付費(fèi)框架。Wijmo是一系列使用TypeScript 編寫的自定義JavaScript控件,用于創(chuàng)建快速、響應(yīng)式的和可擴(kuò)展的UI控件。Wijmo提供了廣泛的控件,并支持多個(gè)JS框架,如React,Angular和Vue。
Wijmo支持一系列控件,其中大多數(shù)都集中在數(shù)據(jù)可視化和輸入方面,如圖表,儀表,輸入控件和網(wǎng)格控件。雖然其它框架提供了一系列基本控件,如對話或布局控件,但Wijmo更加專注于數(shù)據(jù)。
有趣的一點(diǎn)是,Wijmo 5構(gòu)建在更現(xiàn)代化的標(biāo)準(zhǔn)之上,因此在IE8上不起作用,此時(shí)就需要Wijmo的舊版本。Wijmo 3是基于jQuery,所以它支持直到在IE6上使用。Wijmo提供的這種版本選擇方式,對開發(fā)人員來說是一件很酷的事情,因?yàn)殚_發(fā)人員能夠根據(jù)自己應(yīng)用的具體運(yùn)行場景來自行選擇究竟是使用Wijmo 3還是Wijmo 5。
Wijmo的網(wǎng)站上有一個(gè)“資源管理器”,顯示了所有的控件,并允許調(diào)整設(shè)置。這是一個(gè)有趣的工具,有助于了解控件的外觀和感覺。
下面是Flexchart控件的圖表示例。
在選擇新的框架時(shí),如果有較好的文檔會(huì)變得非常好。如果你查想Wijmo的圖表模塊(和代碼示例),那么可以在demo page頁面找到FlexChart demo,以便了解它是如何工作的。Wijmo開發(fā)者的博客也會(huì)經(jīng)常更新,博客中會(huì)提供一些有用的提示,系統(tǒng)的亮點(diǎn)和各種各樣的想法。
Wijmo網(wǎng)站上的控件是很有趣的。每個(gè)控件都允許調(diào)整其顯示方式,并為自定義功能提供回調(diào)以便根據(jù)需要對其進(jìn)行調(diào)整。
Wijmo為產(chǎn)品提供了免費(fèi)試用期,如果用于商業(yè)目的,則需要購買授權(quán)。如果想單獨(dú)購買Wijmo5,也是可以的。如果需要.NET / Xamarin上的控件,則需要最高的enterprise licensing授權(quán)。
這是一個(gè)免費(fèi)/付費(fèi)框架。Webix為開發(fā)人員提供了一種快速簡便的構(gòu)建常見UI元素的方式。它包含了一系列數(shù)據(jù)可視化、布局、導(dǎo)航和編輯控件。雖然這個(gè)框架與jQuery UI共享一些組件,但Webix擴(kuò)展了jQuery UI并提供了一些不同于jQuery UI中常用的組件。
Webix文檔具有很好的幫助作用。所有控件都帶有一個(gè)API參考指南,其中涵蓋了控件的所有方法,屬性和事件。此外,大多數(shù)控件都具有一些樣例,用于準(zhǔn)確的展示控件功能。這些閱讀友好的文檔能起到重要作用,這也是Webix開發(fā)者用心編寫文檔的結(jié)果。
另外一點(diǎn)值得注意的是,Webix開發(fā)者經(jīng)常會(huì)在博客上發(fā)布一些內(nèi)容,其中有幾個(gè)帖子提供有用的建議和實(shí)際的例子。雖然框架很多,但是一個(gè)內(nèi)容持續(xù)更新的框架是非常有價(jià)值的。
Webix提供了對框架的免費(fèi)和付費(fèi)的兩種獲取方式。免費(fèi)版包含了大部分構(gòu)建應(yīng)用初始時(shí)會(huì)用到的功能。付費(fèi)版提供了一些額外的控件,并對這些控件提供支持和幫助。
另外,付費(fèi)版還提供一些很詳細(xì)的的解決方案。
這些額外的付費(fèi)附加件是很詳細(xì)的小部件,使用這些小部件可以抽象化構(gòu)建組件的復(fù)雜性,讓你專注于自定義功能和樣式方面。
總的來說,免費(fèi)的小部件是很穩(wěn)固的,提供了大量的功能。既然可以免費(fèi)獲得一些很好的控件,那么付費(fèi)版就需要好好考慮是否值得了。
如果你正在尋求一個(gè)有詳細(xì)文檔并且大部分控件是免費(fèi)的UI解決方案,那么Webix是一個(gè)好選擇。
這是一個(gè)半付費(fèi)/付費(fèi)框架。JQWidgets是一個(gè)jQuery驅(qū)動(dòng)的框架,用于為網(wǎng)站建立響應(yīng)式、快速、強(qiáng)大的UI組件。JQWidget的組件主要是使用jQuery,并提供了交互式,動(dòng)態(tài)和高度可定制的小部件。
JQWidget有一個(gè)易于使用和會(huì)被監(jiān)視的論壇,論壇上經(jīng)常會(huì)有博客更新。
同其它框架一樣,JQWidgets的文檔也是框架的核心。JQWidgets的文檔概述了每個(gè)小部件的工作原理、示例代碼和一個(gè)很好的演示。每個(gè)小部件還有一個(gè)簡單易懂的API參考指南以及如何實(shí)現(xiàn)每個(gè)屬性或方法的示例。
另外,值得一提的是JQWidget支持React,Angular甚至ASP .NET組件。如果你傾向于其中一個(gè),那么這個(gè)框架會(huì)為你節(jié)省很多時(shí)間開發(fā)。
JQWidgets提供半自由和付費(fèi)兩種方式。非商業(yè)性使用是允許的。但是,如果用于商業(yè)目的,那么必須購買授權(quán)。
這是一個(gè)半付費(fèi)/付費(fèi)框架。EasyUI是一個(gè)擴(kuò)展jQuery部件的集合,用于創(chuàng)建新式的,交互式網(wǎng)站和web app的交互。使用EasyUI,你可以使用HTML標(biāo)記或者JavaScript來創(chuàng)建常用的UI元素。
EasyUI的設(shè)計(jì)可能與我們以前見到的一些UI框架不同。雖然EasyUI的默認(rèn)樣式可能會(huì)讓你毫無靈感,但EasyUI附帶了一個(gè)非常棒的實(shí)時(shí)主題編輯器,可讓實(shí)現(xiàn)字體大小,文字顏色,背景顏色,位置以及其他常見屬性的設(shè)置。最重要的是,它允許直接訪問CSS,以便讓你構(gòu)建出一個(gè)適合的主題。
EasyUI的文檔簡單直觀。所有的控件顯示在左側(cè),右側(cè)顯示相關(guān)信息。每個(gè)控件都附帶一個(gè)示例截圖、示例代碼,然后是所有的屬性、方法和事件。在主演示頁,可以快速查看Demo和每一個(gè)控件。例如,Panel Control演示了如何使用自定義控件,嵌套面板和其它元素。
如果用于非商業(yè)用途,jQuery EasyUI是免費(fèi)的,但如果用于開發(fā),則需要授權(quán)。
總的來說,EasyUI是一個(gè)堅(jiān)實(shí)的框架,但是網(wǎng)站和文檔比較舊。
能夠完美代替或補(bǔ)充jQuery UI的框架有很多,其中一大部分都是需要付費(fèi)的。如果你正在尋求一個(gè)好的解決方案,那么既可以使用jQuery UI的開源社區(qū),也可以購買付費(fèi)框架。這需要從控件功能和控件價(jià)格去綜合考慮衡量,以便選擇最適合自己的框架。
關(guān)于哪些前端組件庫可以讓你放棄jQuery UI就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
分享標(biāo)題:哪些前端組件庫可以讓你放棄jQueryUI-創(chuàng)新互聯(lián)
本文地址:http://chinadenli.net/article24/cepdce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站策劃、建站公司、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容