Kendo UI for jQuery使用教程:創(chuàng)建自定義捆綁包
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。
根據(jù)您的項(xiàng)目,可能需要跳過(guò)某些Kendo UI實(shí)用程序并僅安裝應(yīng)用程序所需的內(nèi)容。
合并腳本
為了促進(jìn)常見(jiàn)的項(xiàng)目類(lèi)型,Kendo UI在捆綁包或CDN中提供以下組合腳本:
- kendo.ui.core.min.js包含Kendo UI Core發(fā)行版支持的所有小部件,相關(guān)腳本也可以在Kendo UI Core包中找到。
- kendo.all.min.js包含Kendo UI提供的所有功能的縮小版本。
注意:kendo.all.min.js可用于Kendo UI Professional,Telerik UI for ASP.NET MVC,Telerik UI for JSP和Telerik UI for PHP bundle。 但是,kendo.all.min.js不包含kendo.aspnetmvc.min.js。 要安裝它,請(qǐng)將kendo.aspnetmvc.min.js添加到kendo.all.min.js,或使用自定義下載構(gòu)建器工具。
- kendo.web.min.js可用于Kendo UI Professional,JSP,PHP和MVC。 它包括核心框架和所有桌面瀏覽器小部件(以前作為Kendo UI Web分發(fā))。
- kendo.dataviz.min.js可用于Kendo UI Professional,JSP,PHP和MVC。 它包括核心框架和所有數(shù)據(jù)可視化小部件(以前作為Kendo UI DataViz分發(fā))。
- kendo.mobile.min.js可用于Kendo UI Professional,JSP,PHP和MVC。 它包括核心框架和所有特定于移動(dòng)設(shè)備的小部件(以前作為Kendo UI Mobile分發(fā))。
注意:一次只能包含一個(gè)組合的JavaScript文件,因?yàn)樗鼈儼琄endo UI框架。 要同時(shí)使用來(lái)自不同Kendo UI套件的小部件,請(qǐng)使用kendo.all.min.js或構(gòu)建自定義腳本。
不要將任何組合腳本文件與同一套件中的單個(gè)窗口小部件腳本一起注冊(cè)。 例如,不要將kendo.grid.js與kendo.web.js或kendo.all.js一起注冊(cè),因?yàn)樗鼈円呀?jīng)包含了Grid腳本。
注意:注冊(cè)重復(fù)腳本可能會(huì)導(dǎo)致JavaScript錯(cuò)誤和意外操作。
個(gè)人腳本
以下列表提供了對(duì)腳本文件的引用,無(wú)論是否縮小,取決于您的項(xiàng)目,都可以包含每個(gè)小部件。
- List of Kendo UI widgets in terms of their bundle support
- Script Files for Data Management
- Script Files for Editors
- Script Files for Charts
- Script Files for Gauges
- Script Files for Barcodes
- Script Files for Diagrams and Maps
- Script Files for Scheduling
- Script Files for Layout
- Script Files for Navigation
- Script Files for Interactivity and UX
- Script Files for Hybrid UI
- Script Files for Tools, Frameworks and Utilities
- Script Files for Server-Side Wrappers
自定義腳本
您可以創(chuàng)建僅提供項(xiàng)目所需的小部件和功能的自定義腳本。
使用Download Builder
擁有商業(yè)許可證的用戶(hù)可以使用自定義Download Builder工具創(chuàng)建單個(gè)JavaScript文件,該文件僅包含所需的小部件和功能。
注意:
- 擁有商業(yè)許可證的用戶(hù)可以使用自定義Download Builder工具創(chuàng)建單個(gè)JavaScript文件,該文件僅包含所需的小部件和功能。
- 使用RequireJS無(wú)法加載Download Builder軟件包,因?yàn)樵摴ぞ卟粫?huì)創(chuàng)建所需的AMD模塊。
使用Gulp
如果您使用Kendo UI Core軟件包,則可以使用gulp構(gòu)建工具并按照README文章中的說(shuō)明構(gòu)建自定義分發(fā)。 截至Kendo UI 2014 Q3版本,必需的構(gòu)建腳本包含在可下載商業(yè)軟件包的src /目錄中。
要從發(fā)布源構(gòu)建自定義分發(fā):
1. 運(yùn)營(yíng)以下shell命令。
cd src
npm install -g gulp
npm install
gulp custom -c autocomplete,dropdownlist
2. 列出要包含在自定義構(gòu)建中的組件,并用逗號(hào)(,)分隔它們。 上一個(gè)示例構(gòu)建了一個(gè)自定義縮小腳本,其中包括AutoComplete和DropDownList窗口小部件。
3. 通過(guò)運(yùn)行g(shù)ulp custom -c all構(gòu)建整個(gè)Kendo UI庫(kù)。
注意:完成后,gulp命令在src / dist目錄中輸出一個(gè)kendo.custom.min.js文件。 Gulp構(gòu)建任務(wù)自動(dòng)解析每個(gè)組件所需的依賴(lài)關(guān)系,因此您不必列出它們。 不要使用多個(gè)自定義組合腳本,因?yàn)樗鼈儗貜?fù)的代碼。 而是創(chuàng)建一個(gè)組合腳本文件,其中包含您需要的所有內(nèi)容。
4. 要編譯未縮小的自定義腳本版本,請(qǐng)從gulpfile.js中刪除或注釋掉以下行:
...
.pipe(uglify())
...
標(biāo)簽順序
要在HTML標(biāo)記之后加載和執(zhí)行腳本,請(qǐng)將腳本標(biāo)記放在結(jié)束正文標(biāo)記之前。 通常,Kendo UI小部件初始化語(yǔ)句通過(guò)jQuery處理程序在document.ready事件中執(zhí)行,這意味著您必須在任何Kendo UI小部件初始化語(yǔ)句之前注冊(cè)jQuery。 使用客戶(hù)端Kendo UI小部件時(shí),您可以控制初始化語(yǔ)句的位置,以便可以在文檔的底部注冊(cè)jQuery腳本文件。
Kendo UI小部件的服務(wù)器端包裝器是自我初始化的,這意味著每個(gè)初始化腳本都在小部件的HTML標(biāo)記之后立即呈現(xiàn)。 在這種情況下,Kendo UI腳本仍然可以在文檔的末尾注冊(cè),而jQuery腳本必須在文檔中的第一個(gè)Kendo UI小部件之前或文檔頭中注冊(cè)到正文中。
Kendo UI R2 2019 SP1全新發(fā)布,最新動(dòng)態(tài)請(qǐng)持續(xù)關(guān)注Telerik中文網(wǎng)!
掃描關(guān)注慧聚IT微信公眾號(hào),及時(shí)獲取最新動(dòng)態(tài)及最新資訊