R3 2023版本在Kendo UI for jQuery套件中引入了許多改進，其中包括多個主題上的新組件、特性和改進。其中一個重要的新增功能是DockManager組件，本文將話一些時間與大家討論一下它的功能！

P.S：Kendo UI for jQuery提供了在短時間內(nèi)構(gòu)建現(xiàn)代Web應用程序所需的一切，從眾多UI子控件中選擇，并將它們組合起來，創(chuàng)建酷炫響應式的應用程序，同時能最大限度的加快開發(fā)時間。

Kendo UI for jQuery R3 2023新版下載

DockManager簡介

Kendo UI for jQuery DockManager組件旨在幫助用戶在Web上重新創(chuàng)建桌面體驗，在桌面應用程序中復制dock(以及它們各自的行為)。

它提供了一組豐富的功能來幫助您顯示內(nèi)容，面板很好地分開，可以很容易地通過固定或拖動它們到所需的位置來重新排列。

我們將在下面的一個小型集成項目中更多地討論DockManager的實際應用程序。

組件清單

在我們開始之前，羅列出了參與項目的Kendo UI組件：

• Kendo UI DockManager (surprise, surprise)
• Kendo Icons

項目攻略

讓我們從顯示帶有幾個空面板的DockManager開始：

在解決方案資源管理器面板中放置一些內(nèi)容：

使用TreeView組件，您可以像使用Visual Studio一樣模擬項目的結(jié)構(gòu)。還可以使用上面的文本框搜索文件或文件夾，并且可以將工具欄中的按鈕想到的任何操作相關聯(lián)。您還將看到根據(jù)TrueView的項目顯示的Kendo UI圖標，但如果您喜歡其他圖標庫，請隨意使用 - 組件將很好地處理它們。

我們繼續(xù)添加一個ContextMenu。

需要在TreeView中添加、重命名或刪除項？“Add”部分下的“New File”菜單項將添加一個新的HTML文件，并在左側(cè)面板中打開它，新文件夾在所選節(jié)點下添加一個帶有文件夾圖標的項目。

選擇“Delete”選項將從項目樹中刪除項目，選擇“Rename” 選項將顯示一個輸入，您可以在其中輸入節(jié)點的新文本。節(jié)點和輸入之間的轉(zhuǎn)換很容易通過TreeView的模板選項完成，所以不要忘記檢查它。

雙擊文件將在左側(cè)面板中打開相關的虛擬內(nèi)容。

您可以通過向服務器發(fā)出請求來獲取更有意義的內(nèi)容來增強這一部分，“Add”部分也可以通過打開一個帶有不同預定義的文件擴展名列表的對話框來增強—. cshtml, .html, .cs等。

至此我們結(jié)束解決方案資源管理器部分，在“Console”面板中，有一個簡單的Kendo UI Console（控制臺），它記錄了DockManager的事件發(fā)生。

在服務器資源管理器面板中，我們有另一個樹視圖和工具欄，同樣類似于在Visual Studio中所擁有的。您可以在這里將Toolbar按鈕綁定到服務器端操作，或者將該面板用于完全不同的目的。

Telerik_KendoUI產(chǎn)品技術交流群：726377843    歡迎一起進群討論