Query表單向導是一個jQuery插件,與某種表格流協助表單創建(不用刷新頁面)。舉個例子,如果你有一個巨大的表格來輸入用戶數據,你可以使用表單向導來將其分成一系列相關步驟。這一優點使用戶不會被超長表單嚇到,并且當用戶輸入信息時為其提供一些進度指示。
在這篇文章中,我們列出了開發者最喜歡的六大jQuery表單向導,考量了它們的不同功能以及如何創立你自己的向導。這不會是一個冗長的列表,如果你正在尋找一個jQuery表單向導,這一定會為你指明正確的方向。
此列表在2017年8月30日更新,從列表中刪除了損壞和棄用的插件,并加入了新的插件來提供開發者要求的功能。
1. jQuery Steps
jQuery Steps是一個智能UI元素,使開發者可以很方便地創建向導界面。這個插件將內容分成區塊來形成更有結構和順序 的頁面外觀。它有多種功能,例如、狀態保持(這會保存你每一步的輸入)以及每個區塊的過渡效果。它可以通過NuGet或者bower安裝,擁有內容和功能豐富的API。
2. jQuery Smart Wizard
Smart Wizard是一個靈活且高度客戶化的jQuery步驟向導插件,有Bootstrap支持。它很容易執行,并且可以為你的表單、檢出屏幕、注冊步驟創建一個整潔而時髦的界面。它的功能包括主題支持(包括了多個主題)、URL導航、步驟選擇和動態隱藏或關閉步驟。它可以通過npm、bower和composer安裝,擁有內容和功能豐富的API。
3. formToWizard
這個小型插件可以用jQuery將任何網絡表格轉換成多步驟的向導,每個表格<fieldset>可以轉換成具有前進和后退按鍵的單獨步驟。雖然它沒有像前兩個插件那么多的功能,但它和jQuer確認插件整合,來提供確認功能。它是一個單獨的文件(所以你可以從GitHub上將其提取下來),如果JavaScript不可用,它會慢慢的退化。
4. jQuery Stepy
jQuery Stepy是一個生成可客戶化表格的向導。它假定表格有特定的結構,其中有特定的類。然后你只需要初始化插件,然后就擁有了表單向導。
此插件沒有任何預先設定的風格。但是,它提供了豐富的選擇,例如可以在步驟之間導航,提供前進、后退和完成按鈕與過渡效果,與任何你選用的確認插件整合。它提供了合理的API,例如允許你觸發步驟間的召回,或者當前步驟的確認后的召回。
5. Twitter Bootstrap Wizard
這個Twitter Bootstrap插件利用形式可轉換結構建造向導。它允許用戶利用按鈕來建造一個向導功能,來遍訪不同的向導步驟和實踐,并分別接入每一步。此插件關鍵的優勢在于它和Bootstrap緊密整合。它有一些基本功能,例如確認、進度條和創建或移除步驟的能力。另外,為了簡單地從GitHub中復制插件,它還可以通過Bower(雖然并不推薦)來安裝。它有不錯的內容且提供了基礎的API。
6. jQuery.wizard
最后要介紹的是jQuery.wizard。這是一個不同的表單向導,支持分支——在評論中被要求的功能之一。
基本結構包括步驟和分支,后者是選擇性的。一個簡單的線性表格可能只要求一個包含所有步驟的分支,但復雜的表格可能要求用到多個分支,甚至是極為復雜的分支。開發者需要處理表單中步驟和分支的數量。向導采用了不同的有限步驟決定怎樣自身導航。
這一插件的內容前所未有的豐富,提供了擴展API。它可以通過npm或者Bower來安裝,與Internet Explorer 6之后的所有版本兼容。它可以和多種其他插件整合,包括最受歡迎的jQuery Validation。你可以通過復制回復并在瀏覽器中查看examples/index.html來查看不同的例子。
彩蛋
開源軟件的世界很精彩,在為新項目選用插件時可以坐享極豐富的選擇。但是,這并不意味著我們應該躲避為有真正作用的軟件付費。以下是兩種需要付費的表單向導插件。我推薦你們去看一看它們,說不定會對你有用:
Form Wizard – Multi Step Form Validation(下載鏈接:https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591)
Timon – Step Form Wizard + jQuery Step Form Builder(下載鏈接:https://codecanyon.net/item/timon-step-form-wizard/15830006)
最后,如果你是那種喜歡弄懂所有事情的原理,不喜歡使用插件,那么你可能會想要看一看以下這些教程,告訴你如何通過探索來創建一個表單向導。
Turn any webform into a powerful wizard with jQuery(地址:http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/)
Multistep Form With Progress Bar Using jQuery And CSS(地址:http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php)
結論
你已經擁有6個jQuery表單向導插件的詳盡概覽,每一個插件都有不同的功能和特點。根據項目要求來選用它們,希望你可以從這篇文章中找到對你有所幫助的內容。如果有什么遺漏請告知我們,或者通過下方評論告訴我們你最喜歡的插件是哪一個。
jExcel是一個輕量級的原生javascript插件,用于創建與Excel或任何其他電子表格軟件兼容的基于Web的交互式表格和電子表格。可以從JS數組,JSON,CSV或XSLX文件創建在線電子表格表。可以從excel復制并直接粘貼到jExcel電子表格,反之亦然。集成任何第三方javascript插件非常容易,可以創建自己的自定義列,自定義編輯器,并在應用程序中自定義任何功能。jExcel通過其原生列類型提供了大量不同的輸入選項,以涵蓋最常見的基于Web的應用程序需求。它是Web數據管理的完整解決方案。使用jExcel javascript電子表格創建出色的應用程序。
https://github.com/paulhodel/jexcel
npm install jexcel
將javascript電子表格集成到站中,創建您的第一個在線電子表格的基本示例:
1、首先引入相關js和css文件
<script src="./jexcel/v3/jexcel.js"></script> <script src="./jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="./jsuites/v2/jsuites.css" type="text/css" /> <link rel="stylesheet" href="./jexcel/v3/jexcel.css" type="text/css" />
2、定義一個基于div的容器并編寫js
<div id="mytable"></div> <script> data = [ ["蘋果", 0, 1], ["草莓", 1, 2], ["西瓜", 2, 3] ]; jexcel(document.getElementById("mytable"), { data: data, colWidths: [300, 80, 100] }); </script>
3、打開瀏覽器查看效果
就這么幾句簡單的代碼就像打開了一個無限簡化的Excel一般
Github上提供了相關Demo,我們一起來看一看都有哪些
jexcel(document.getElementById('spreadsheet'), { csv:'https://bossanova.uk/jexcel/v3/demo.csv', csvHeaders:true, search:true, pagination:10, columns: [ { type:'text', width:300 }, { type:'text', width:200 }, { type:'text', width:100 }, { type:'text', width:100 }, { type:'text', width:100 }, ] });
var data = [ ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'], ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type: 'text', title:'Car', width:120 }, { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] }, { type: 'calendar', title:'Available', width:200 }, { type: 'image', title:'Photo', width:120 }, { type: 'checkbox', title:'Stock', width:80 }, { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' }, { type: 'color', width:100, render:'square', } ] });
var data = [ ['US', 'Wholemeal', 'Yes', '2019-02-12'], ['CA;US;UK', 'Breakfast Cereals', 'Yes', '2019-03-01'], ['CA;BR', 'Grains', 'No', '2018-11-10'], ['BR', 'Pasta', 'Yes', '2019-01-12'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'dropdown', width:'300', title:'Product Origin', url:'/jexcel/countries', autocomplete:true, multiple:true }, { type:'text', width:'200', title:'Description' }, { type:'dropdown', width:'100', title:'Stock', source:['No','Yes'] }, { type:'calendar', width:'100', title:'Best before' }, ] });
var data = [ ['Flag Fen', 'South East', '2019-01-01'], ['Bristol Aero Collection (BAC)','South West','2019-04-03'], ['Experience Barnsley', 'North','2018-12-03'], ['Cinema Museum', 'London',''], ['University of Hertfordshire Art Collection', 'South East',''], ['LUX London', 'London','2016-11-03'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'text', title:'Museum', width:'300', }, { type:'dropdown', title:'Region', source:['South East','South West','North','London'], width:'200', }, { type:'calendar', title:'Last visit', options: { format:'DD/MM/YYYY' }, width:'100', }, ] });
jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'text', width:300, title:'Title' }, { type:'image', width:120, title:'Cover' }, ] });
插入,移除和移動列和行,這塊就是表格的相關操作了,都可以通過相關API實現
jExcel電子表格使用指令nestedHeadrs本機實現嵌套頭文件,如下面的示例所示。
導出非常簡單,就調用一個方法
mySpreadsheet = jexcel(document.getElementById('spreadsheet1'), { csv:'https://bossanova.uk/jexcel/v3/demo.csv', csvHeaders:true, columns: [ { type:'text', width:70 }, { type:'text', width:200 }, { type:'text', width:300 }, ] }); document.getElementById('download').onclick = function () { mySpreadsheet.download(); }
由于相關示例比較豐富,包括合并單元格、懶加載等豐富的功能等再此就不在展示,已經對它感興趣的小伙伴不妨直接去體驗下,就能感受到它的強悍了!并且還提供了包括React、Vue、jQuery等在內的相關實現,這樣你就可以更好的集成到你的相關項目中去了,非常的人性化!
jExcel是一個非常簡單而且功能豐富的Web端JavaScript電子表格,就和名字一樣,就如同是Web端的Excel,相當于是Excel的表格模塊,無論是處理數據還是用戶操作比普通的HTML表格強上無數倍,相信已經有小伙伴想去嘗試一番了,趕緊試試吧!希望對你有所幫助!
者:Creative Tim
譯者:Echa攻城獅
轉發鏈接:https://www.creative-tim.com/blog/web-design/top-form-generator-components-vuejs/
Vue.js作為一種靈活的技術而越來越流行,并且可以幫助創建靈活而又現代的應用程序而不浪費資源。它的靈活性,可伸縮性,方便的約定,尺寸效率和漸進性使該框架在其他方面脫穎而出。 如果要構建小型應用程序或大型應用程序,則表單輸入是收集相關用戶數據的最佳來源。表單生成器組件提供了重用捕獲相似類型數據的表單的靈活性,從而確保您不違反DRY原則。
如果您不熟悉Vue.js,請嘗試將現有框架轉換為Vue.js或只是探索您的選擇,請繼續閱讀以找出Vue.js的前6個表單生成器組件,這些組件可以幫助您創建動態且可自定義的表單輕松地。
Vue.js表單生成器可幫助您快速而動態地創建賬單,調查表,聯系表,調查表等,從而使開發變得更加容易和快捷。
在探索適用于Vue.js的最佳表單生成器組件之前,請注意在PC中安裝Vue的前提條件。
1.執行命令:npm install @ vue / cli –g
2.通過執行以下命令來創建新的Vue項目:vue create <項目名稱>
vue-form-generator 是基于JSON模式的表單生成器組件,可幫助基于模式或數據模型創建響應式表單。該生成器輕巧且可擴展,并內置了對自定義樣式的支持。
特征:
安裝:
1.將目錄更改為項目cd <項目名稱>
2.安裝vue-form-generator
npm i vue-form-generator –save
ncform 由于其簡單性和靈活性而成為Vue.js的另一個表單生成器組件。它是一個基于JSON的表單生成器,用于創建表單UI并僅使用配置來描述其交互。
特征:
安裝:
1.將目錄更改為項目cd <項目名稱>
2.安裝ncform npm i @ ncform / ncform @ ncform / ncform-common –save
npm i @ ncform / ncform-theme-elementui element-ui axios –保存
vuetify-form-b??ase 是另一個基于JSON的表單生成器,可幫助創建具有與數據相同結構的架構對象。由于它使用Vuetify框架來創建表單的布局和樣式,因此您需要安裝一個額外的軟件包才能使此生成器正常工作。
要安裝Vuetify,請在安裝Vue CLI之后執行以下命令:
vue添加vuetify
Vuetify框架以其響應式設計,支持以及適合輕量級應用程序的清晰,簡約的用戶界面而聞名。
特征:
安裝:
1.將目錄更改為項目cd <項目名稱>
2.安裝vuetify-form-b??ase
npm i vuetify-form-b??ase –save
vue-form-json-schema 是基于JSON模式的表單生成器,它不需要任何字段并且支持任何HTML元素或Vue組件。由于沒有預構建的組件,因此您不必為每個組件的可用性而感到困惑,從而使開發更加容易。
特征:
安裝:
1.將目錄更改為項目cd <項目名稱>
2.在vue-form-json-schema –save
npm i vue-form-json-schema –save
vue-form-b??uilder是一個快速,簡單但可擴展的表單構建器組件,支持拖放。由于開發中的代碼較少,因此拖放功能使維護更加容易。
特征:
安裝:
1.將目錄更改為項目cd <項目名稱>
2.在vue-form-b??uilder –save
npm i vue-form-builder –save
vuetify-jsonschema-form還是Vue.js排名前六的表單生成器之一,后者基于帶注釋的JSON模式生成表單。該框架的缺點還在于需要安裝其他Vuetify軟件包。
要安裝Vuetify,請在安裝Vue CLI之后執行以下命令:
vue add vuetify由于此表單生成器基于Vuetify框架創建了表單的布局和結構,因此它繼承了框架的簡約設計,簡單控制和響應能力。最適合需要聲明性形式的應用程序(例如通用admin UI形式)
特征:
安裝:
1.將目錄更改為項目 cd <項目名稱>
2.安裝vue-form-b??uilder
npm i json-schema-for-vuetify – –保存–
在幾乎所有基準測試中,Vue.js的性能均優于Angular和ReactJS。它很容易上手,并提供了許多很酷的功能,這些功能通過React樣式渲染支持組件樣式開發。
《從Vue源碼角度深挖Watch、Computed 》
《Vue3全家桶 + Vite + TS + TSX嘗鮮,先人一步 》
《精讀《Vue3.0 Function API》 》
《手把手教你Electron + Vue實戰教程(六) 》
《Vue中mixin怎么理解? 》
《封裝一個精致vue視頻播放器組件》
*請認真填寫需求信息,我們會在24小時內與您取得聯系。