使用Webix框架創建表單

Simon Codrington和Mallory Van Achterberg對本文進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！

作為網絡設計師，您的機會是您必須定期創建Web表單。這通常是一項令人不愉快的任務，而且頭痛（尤其是如果您做更複雜的事情，例如創建多步表格）。在這種情況下，最好使用UI框架緩解疼痛并加快開發過程。在本文中，我將概述各種技巧和技巧，可讓您使用Webix Framework快速創建不同類型的表單。 鑰匙要點

>簡單性和速度：利用Webix JavaScript UI庫可顯著簡化形式創建的過程，從而可以快速開發和集成複雜形式，例如多步和多tab forms。 表單創建中的多功能性：Webix提供了各種形式的元素和配置，包括簡單的表單，具有多個選擇選項的表單，以及諸如Forms of Forms offorme的窗口小部件的創新用途。

自定義和靈活性：該框架支持廣泛的自定義選項，包括創建自定義皮膚和使用視覺設計器工具進行拖放UI創建，符合特定的設計要求。

高級功能：Webix提供高級功能，例如選擇和建議，增強表單的用戶界面和體驗。

>

集成和兼容性：該框架與各種包含在項目中的方法兼容，支持主要的瀏覽器和設備，並且可以與其他JavaScript框架一起使用，使其適應各種開發環境。
什麼是webix？
• Webix是HTML5組件的JavaScript UI庫，可促進創建移動和桌面Web應用程序。它為您提供各種組件，從簡單的按鈕到電子表格小部件，可用於開發類似Excel的應用程序。除了UI組件集合外，還有一個事件處理機制，離線模式支持和一堆開發工具。您還可以使用皮膚構建器創建自己的皮膚，使用Visual Designer進行拖放UI創建，並在在線源代碼遊樂場中使用代碼。該項目還具有詳盡的文檔。
• >我已經寫了一篇介紹性文章，描述了使用此框架的關鍵功能和基礎知識，因此，如果您有興趣，請隨時對其進行查看。
>

包括webix

>您可以在項目中包含所需的JavaScript和CSS文件的多種方式。如果下載庫軟件包，則會在代碼庫文件夾中找到這些文件。您可以按以下方式包含它們：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

另外，您可以使用CDN：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

您也可以使用nuget：

nuget <span>install Webix
</span>

>如果您使用Microsoft Visual Studio，請從Package Manager Console中執行此操作：>

install-package Webix

或嘗試鮑爾：

bower install webix

創建一個簡單的表單

現在，有了庫，讓我們看看Webix表單如何工作。

我們首先調用Webix對象的UI方法並傳遞各種參數以配置其輸出。

webix<span>.ui({
</span>  <span>view: "form",
</span>  <span>id: "myForm",
</span>  <span>container: "areaA",
</span>  <span>width: 350,
</span>  <span>elements: [
</span>    <span>{ // first form component },
</span>    <span>{ // second form component},
</span>    <span>{ // n-th form component */}
</span>  <span>]
</span><span>});
</span>

視圖屬性決定創建的元素類型（在這裡我們正在創建表單，但這也可以是菜單或圖表）。

ID屬性將ID分配給表單，您可以稍後將其引用。

>
• 容器屬性指定了應向表單渲染的HTML元素的ID。
>寬度屬性用於設置表單元素的寬度。 Webix假設您想在此處使用像素作為測量單位，因此您只需要設置一個適當的數字。
• >
元素屬性是您的表單所包含的組件數組。您可以在表單中使用任何適當的組件：文本字段，單選按鈕，複選框，按鈕等
>讓我們創建一個簡單的登錄表單。我們將需要兩個文本字段（一個用於用戶名，一個用於密碼），一個複選框，當然還有一個提交按鈕。
• 請注意，我們正在為我們的表單元素指定名稱屬性，並為密碼字段設置“密碼”，以便在輸入字符時掩蓋它們。設置元素的標籤屬性定義了該元素的標籤，我們可以使用元素的單擊屬性來定義事件處理程序，該事件處理程序在提交表單時將被調用。儘管有可能檢查數據的一切都可以，但請不要忘記客戶端驗證只能補充服務器端驗證。 >
>在運行此演示之前，我們需要定義此事件處理程序。在這裡，我正在使用Webix消息框，以提供有關輸入內容的用戶反饋：

>

此代碼使用webix getValues方法從形式中使用myform的ID得出插入的數據，然後使用json.stringify（）。

webix<span>.ui({
</span>  <span>...
</span>  <span>elements: [
</span>    <span>{ view: "text", label: "Username", name: "username" },
</span>    <span>{ view: "text", label: "Password", name: "password", type: "password" },
</span>    <span>{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
</span>    <span>{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
</span>  <span>]
</span><span>});
</span>

好吧，一切都已經準備就緒，我們可以檢查結果：

插入一些數據並點擊提交按鈕後，您將收到消息：>

<span>function submit(){
</span>  webix<span>.message(JSON.stringify($$("myForm").getValues(), null, 2));
</span><span>}
</span>

這是演示：

>請參閱codepen上的sitepoint（@sitepoint）的筆nnbgwm。

似乎一切都很好。現在，讓我們添加一些有趣的東西。

>

多個選擇和建議

不同的形式控件允許您選擇多個項目或使用建議。至於我，其中最有趣的是Multicombo。這是一個控件，可讓您通過簡單但直觀的接口為輸入字段選擇多個值。 >

>注意：最近的Webix版本（2016年4月26日）看到了多功能控制的工作方式。現在僅在Webix Pro版本（付費產品）中可用。

>

想像您要創建一個頁面，該頁面將幫助開發人員生成簡歷。它可以包含以下字段：

>由於您希望您的用戶了解多種編程語言，因此可以撰寫此類語言列表，並使用Multicombo組件來展示它們。這是一個可能是什麼樣子的示例：

除了熟悉的屬性外，我們還使用按鈕屬性和建議屬性。 按鈕屬性創建一個按鈕來確認選擇，而建議屬性定義了要在多醫學中顯示的項目的來源。在我們的示例中，我們使用數據屬性來指定數組的名稱以及模板屬性來指定要顯示的值。也可以設置通往文件的路徑（例如，建議：“路徑/to/to/file/data.js”），如果要從大源提取不同的數據陣列，則進行t是更好的選擇。

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>讓我們檢查一下它的工作原理。單擊文本字段後，下拉列表將顯示：

>您可以滾動並選擇所需的項目，或者開始鍵入以縮小建議：：

此特定示例表格將返回一堆與所選項目匹配的ID：>

這是此示例的演示。

>作為Multicombo的替代方案，您可以檢查GridSuggest和Dataview建議組件。

使用樹小部件作為表單元素

>

Webix不會將您限制為傳統的表單元素，例如文本字段，按鈕和復選框。您可以將自己喜歡的任何小部件放在您的表格中。例如，讓我們看一下樹小部件。它最初不是作為表單控件設計的，這就是為什麼該元素沒有可用的setValue和getValue方法的原因。但是，如果我們希望能夠返回或設置此組件的值，則需要這些方法。那麼，我們該怎麼辦？ 幸運的是，有一種可以幫助我們的方法。它允許基於現有的視圖創建新視圖。

>讓我們嘗試一下：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>在上面的代碼中，我們正在創建一個名為FormTree的新視圖。然後，我們定義了兩種新方法，這些方法允許我們設置並獲得其ID值。最後，我們將樹小部件用作這種新視圖的基礎。

現在，讓我們創建一些數據：

>

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>您可以像往常一樣將新元素添加到表單中：>

>我們在此處介紹了幾個新屬性：模板屬性將復選框添加到樹節點，而Threestate屬性啟用了3態復選框。這些是複選框，其中：

nuget <span>install Webix
</span>

當用戶檢查/取消選中父節點時，請檢查/未選中（每個嵌套級別的每個級別）時。

用戶檢查/取消選中子節點時，只檢查單個子節點/未選中。

>
如果您使用三州複選框，則應注意一個小問題。選擇一個複選框時，Webix會重新呈現樹。如果您決定使用鍵盤填充表單，則當您按下
• space
以切換複選框的選擇（對於基於WebKit的瀏覽器（例如Chrome））時，它可能會導致焦點喪失，您' ll從表單的一開始就開始出現。

>

很高興，這有一個解決方法。您可以使用On屬性將新處理程序附加到樹上。我們將使用它與OnItemcheck事件一起使用，該事件在您選擇特定的樹項目時會發射。使用一些其他方法，我們可以確保焦點安全：

這應該起作用。但這是另一個問題：WebKit在標籤時沒有標記複選框。為了抵消這一點，您可以使用一些CSS代碼在重點的複選框中添加輪廓或框影子。這是一個示例：

install-package Webix

>將所有這些都適當，我們可以單擊提交按鈕以檢查我們的手工方法是否有效：

bower install webix

是的，ID已成功提交。

> >您可以在此處檢查此表格：

>請參閱codepen上的sitepoint（@sitepoint）的筆Anjyjr。

多鍵和多步式

如果您打算從用戶那裡收集大量數據，則可以將表格分為小部分。讓我們看一下兩種可能性：由>多個選項卡組成的表單和允許數據插入數據的插入的表單。 >

TABVIEW組件

> TABVIEW組件創建了一個分隔為選項卡的元素的集合，用戶可以在其中切換。您可以將單個元素用作TabView內容，也可以定義包含您想要的元素的行和列的組合。

>

這是一個示例：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>這種方法背後的主要思想是將表單劃分（從而使您的用戶更易於管理）。但是，您應該記住，與整個表單有關的組件（例如，提交按鈕或“我接受”複選框）應放置在TabView組件外。 >

例如：

>這就是創建選項卡式表單所需的全部。您可以檢查下面的結果：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>這種方法的額外優勢是，無需添加任何額外的代碼即可使這些零件作為一個。只需將TABView組件放在您的表單中，將名稱屬性添加到每個字段中，您就可以獲取所有插入的值。單擊

>提交

按鈕確認：

>看起來有些混亂，但這是我們的數據。

>

鍵盤可訪問性

如果您的意圖是使用大量選項卡，並且您想使用

>選項卡

鍵在它們之間切換，則可以在標籤欄中使用按鈕。這種方法使我們可以將選項卡添加到標籤導航訂單中。您需要做的就是更改標題屬性：

>您應該添加一些CSS代碼，以使這些按鈕看起來本地：

nuget <span>install Webix
</span>

在以下演示中，我們還將使用日期選擇器。我們需要確保當用戶訪問

返回

時，就會出現它，就好像用戶無法（當前）通過鍵盤與之交互，但它確實提供了有用的視覺輔助。

install-package Webix

實現這一目標的一種方法是使用Hotkey屬性。但這是您應該意識到的。如果要將密鑰綁定到單個頁面元素，則此屬性毫無麻煩。但是我們的形式有兩個日期。因此，您應該使用AddHotkey方法來創建一個與所有datepickers一起使用的新處理程序：

>您可以看到所有這些在以下演示中一起工作：>

請參閱codepen上的sitepoint（@sitepoint）的筆zwjjmj。

>作為替代方案，您可以將手風琴用於此任務。

bower install webix

Multiview Component

> Multiview Component允許我們創建一個元素序列，可以互相查看。您可以使用選項卡在多視頻區域之間進行切換，但是由於我們有興趣創建多步式表單，因此讓我們添加按鈕以指導用戶通過各個階段。 >

首先，我們將需要創建兩個功能，以使

和 back 按鈕工作：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>下一個函數使用Webix的getParentView方法來獲取對單擊哪個按鈕的包含單元格的引用（即當前正在顯示的單元格）。然後，它使用多視頻組件（FormContent）的ID值來計算下一個單元格。如果有下一個單元格，則使用Show方法將其轉換為視圖。背面函數使用後面方法開關多視圖到先前活動的視圖

>可以以與以前定義的TabView元素相同的方式定義多視元素。但是，這次我們應該在每個單元的底部額外放一行。此行將包含控制按鈕。如果僅顯示一個按鈕（如第一個單元格中），我們包括一個空對象。

讓我們看看這是什麼樣子：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>現在讓我們看一下我們所做的事情：

>

我們單擊

下一個>按鈕，表格的下一部分將出現。

>讓我們檢查一切是否按預期工作：

>確實如此！這是最後的演示：

請參閱codepen上的sitepoint（@sitepoint）的筆anjldo。

結論

在本教程中，我展示了Webix使其產生復雜但時尚且易於訪問的形式的簡單性。該框架將大量強大的小部件放在您的觸點上，即使不打算將它們用作形式的組件開箱即用，也可以使用Protoui方法重新定義其行為。

您是否在項目中使用Webix？本教程是否啟發了您嘗試一下？在下面的評論中讓我知道。

經常詢問有關Webix框架的問題（常見問題解答）

> Webix框架是什麼，它如何工作？ Webix是一個功能強大的JavaScript UI庫，允許開發人員創建豐富的高性能Web應用程序。它提供了100多個完全自定義的小部件，包括數據表，圖表，表單等。 Webix通過允許開發人員使用JavaScript創建UI組件來工作，然後可以輕鬆地集成到任何Web應用程序中。該框架設計為易於使用，具有簡單直觀的API，並且還支持各種瀏覽器和設備。

我如何開始使用Webix？開始使用Webix，首先需要從官方Webix網站下載庫。擁有庫後，您可以通過在HTML文件中添加腳本標籤來將其包含在項目中。從那裡，您可以開始使用Webix API創建UI組件。官方的Webix文檔提供了大量的信息和示例來幫助您入門。 Web開發的強大工具。一些關鍵功能包括超過100個UI小部件，簡單而直觀的API，對各種瀏覽器和設備的支持以及創建複雜的UI佈局的能力。此外，Webix還提供了許多高級功能，例如數據綁定，事件處理和AJAX支持。

>

> Webix與其他JavaScript UI庫相比如何？其他JavaScript UI庫有幾種方式。首先，它比大多數其他庫提供了更大的UI小部件選擇，從而使開發人員可以創建更複雜且功能豐富的應用程序。其次，Webix設計為易於使用，具有簡單直觀的API，可以輕鬆啟動。最後，Webix提供了出色的性能，具有快速的渲染時間和有效的內存使用量。

我可以將Webix與其他JavaScript框架一起使用？

是的，可以與其他JavaScript框架一起使用Webix，例如角，反應和vue.js。這使開發人員可以利用其應用程序中多個框架的優勢。例如，您可能會使用Angular來實現其強大的數據綁定功能，而使用Webix進行了豐富的UI小部件選擇。

>

> webix適合移動開發？

是的，webix是完全響應的並支持各種設備，包括手機和平板電腦。對於希望創建移動友好的Web應用程序的開發人員來說，這是一個不錯的選擇。

>如何自定義Webix應用程序的外觀？

> webix提供了多種自定義應用程序外觀的方法。您可以使用CSS對UI組件進行樣式，也可以使用Webix提供的許多預製皮膚之一。此外，Webix還允許您使用Skin Builder Tool創建自己的自定義皮膚。

webix為開發人員提供了一系列支持選項。官方的Webix網站提供了大量的文檔和示例，以及一個論壇，您可以在其中提出問題並獲得社區的幫助。此外，Webix還提供優質的支持軟件包，其中包括對Webix開發團隊的直接訪問。

可以免費使用Webix嗎？

webix提供其庫的免費和付費版本。免費版本包括有限的小部件和功能選擇，而付費版本可訪問對各種小部件和功能的訪問，以及高級支持。

>

>我如何了解有關Webix的更多信息？

>了解更多有關Webix的最佳方法是訪問官方Webix網站，您可以在其中找到大量的信息和資源，包括文檔，示例，教程等。您還可以在GitHub上加入Webix社區，在那裡您可以找到其他資源並與其他Webix開發人員聯繫。

以上是使用Webix框架創建表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！