樹(shù)控件的使用

node對(duì)象格式：

id：綁定節(jié)點(diǎn)的標(biāo)識(shí)值。

text：顯示的節(jié)點(diǎn)文本。

iconCls：顯示的節(jié)點(diǎn)圖標(biāo)CSS類ID。

checked：該節(jié)點(diǎn)是否被選中。

state：節(jié)點(diǎn)狀態(tài)，'open' 或 'closed'。

attributes：綁定該節(jié)點(diǎn)的自定義屬性。

children: 一個(gè)節(jié)點(diǎn)數(shù)組聲明了若干節(jié)點(diǎn)。

注意1.調(diào)試object對(duì)象：

console.info(node); 在控制臺(tái)輸出對(duì)象。點(diǎn)擊會(huì)顯示詳細(xì)信息

注意2:獲取子節(jié)點(diǎn)的兩種方式：

1. 通過(guò)getChildren方法獲取

   $("#easyUITree").tree("getChildren",node)

2. 通過(guò)children參數(shù)獲取

例如：

1. [{

2. "id":1,

3. "text":"Folder1",

4. "iconCls":"icon-save",

5. "children":[{

6. "text":"File1",

7. "checked":true

8. },{

9. "text":"Books",

10. "state":"open",

11. "attributes":{

12. "url":"/demo/book/abc",

13. "price":100

14. },

15. "children":[{

16. "text":"PhotoShop",

17. "checked":true

18. },{

19. "id": 8,

20. "text":"Sub Bookds",

21. "state":"closed"

22. }]

23. }]

24. },{

25. "text":"Languages",

26. "state":"closed",

27. "children":[{

28. "text":"Java"

29. },{

30. "text":"C#"

31. }]

32. }]

<script type="text/javascript">

$(function(){

$("#easyUITree").tree({

url:"treedata.json",

//定義是否啟用拖拽功能。

dnd:true,

//定義節(jié)點(diǎn)在展開(kāi)或折疊的時(shí)候是否顯示動(dòng)畫(huà)效果。

animate:true,

//定義是否在每一個(gè)借點(diǎn)之前都顯示復(fù)選框。

checkbox:true,

//定義是否顯示樹(shù)控件上的虛線。

lines:true,

onClick:function(node){

//alert(node.text);

//控制臺(tái)打印

//console.info(node);

//$("#easyUITree").tree("getChildren",node)

var children=node.children;

alert(children.length)

}

})

})

</script>

-------

、統(tǒng)計(jì)圖表ECharts

ECharts，縮寫(xiě)來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。

主頁(yè)：http://echarts.baidu.com/

2、彈窗/層 Layer

layer是一款近年來(lái)備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務(wù)各水平段的開(kāi)發(fā)人員，您的頁(yè)面會(huì)輕松地?fù)碛胸S富友好的操作體驗(yàn)。

在與同類組件的比較中，layer總是能輕易獲勝。她盡可能地在以更少的代碼展現(xiàn)更強(qiáng)健的功能，且格外注重性能的提升、易用和實(shí)用性。layer兼容了包括IE6在內(nèi)的所有主流瀏覽器。 她數(shù)量可觀的接口，使得您可以自定義太多您需要的風(fēng)格，每一種彈層模式各具特色，廣受歡迎。

layer遵循LGPL協(xié)議，將永久性提供無(wú)償服務(wù)。歷經(jīng)數(shù)年，截至到2016年09月12日，已運(yùn)用在20萬(wàn)余家web平臺(tái)，其中包括中國(guó)聯(lián)通、螞蟻短租、慕課網(wǎng)、phpyun等等知名網(wǎng)站。

主頁(yè)：http://layer.layui.com/

3、日期選擇 LayDate

你是時(shí)候換一款日期控件了，而layDate非常愿意和您成為工作伙伴。她致力于成為全球最用心的web日期支撐，為國(guó)內(nèi)外所有從事web應(yīng)用開(kāi)發(fā)的同仁提供力所能及的動(dòng)力。她基于原生JavaScript精心雕琢，兼容了包括IE6在內(nèi)的所有主流瀏覽器。她具備優(yōu)雅的內(nèi)部代碼，良好的性能體驗(yàn)，和完善的皮膚體系，并且完全開(kāi)源，你可以任意獲取開(kāi)發(fā)版源代碼，一掃某些傳統(tǒng)日期控件的封閉與狹隘。layDate本著資源共享的開(kāi)發(fā)者精神和對(duì)網(wǎng)頁(yè)日歷交互無(wú)窮的追求，延續(xù)了layui一貫的簡(jiǎn)單與易用。她遵循LGPL協(xié)議，您可以免費(fèi)將她用于任何個(gè)人項(xiàng)目。

layDate除了包含日期范圍限制、開(kāi)始日期設(shè)定、自定義日期格式、時(shí)間戳轉(zhuǎn)換、當(dāng)天的前后若干天返回、時(shí)分秒選擇、智能響應(yīng)、自動(dòng)糾錯(cuò)、節(jié)日識(shí)別，快捷鍵操作等常規(guī)功能外，還擁有更多趨近完美的解決方案。

主頁(yè)：http://laydate.layui.com/

4、表單驗(yàn)證jQuery Validate

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語(yǔ)作為錯(cuò)誤信息，且已翻譯成其他 37 種語(yǔ)言。

該插件是由 J?rn Zaefferer 編寫(xiě)和維護(hù)的，他是 jQuery 團(tuán)隊(duì)的一名成員，是 jQuery UI 團(tuán)隊(duì)的主要開(kāi)發(fā)人員，是 QUnit 的維護(hù)人員。該插件在 2006 年 jQuery 早期的時(shí)候就已經(jīng)開(kāi)始出現(xiàn)，并一直更新至今。

主頁(yè)：https://jqueryvalidation.org/

5、表單向?qū)query-steps

jquery-steps是一個(gè)聰明的UI組件，它允許您輕松地創(chuàng)建精靈般的接口。這個(gè)插件組成部分內(nèi)容更有條理，有序的頁(yè)面視圖。此外，它很簡(jiǎn)單，jQuery驗(yàn)證可以防止步改變或提交。

支持HTML5和交互方法，異步（AJAX）內(nèi)容加載，容易表單驗(yàn)證，嵌入式iframe內(nèi)容，清爽的過(guò)渡效果，鍵盤導(dǎo)航，簡(jiǎn)單的步驟操作，在一個(gè)頁(yè)面中的多個(gè)向?qū)Вp松導(dǎo)航，狀態(tài)持久性。

主頁(yè)：http://www.jquery-steps.com/

6、文件上傳Web Uploader

WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來(lái)的FLASH運(yùn)行時(shí)，兼容IE6+，iOS 6+, android 4+。兩套運(yùn)行時(shí)，同樣的調(diào)用方式，可供用戶任意選用。 采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。

頭條號(hào)這里就是采用了這款圖片上傳插件。

主頁(yè)：http://fex.baidu.com/webuploader/

7、圖標(biāo)庫(kù) 阿里巴巴矢量圖標(biāo)庫(kù)

Iconfont.cn是由阿里巴巴UX部門推出的矢量圖標(biāo)管理網(wǎng)站，也是國(guó)內(nèi)首家推廣Webfont形式圖標(biāo)的平臺(tái)。網(wǎng)站涵蓋了1000多個(gè)常用圖標(biāo)并還在持續(xù)更新中，Iconfont平臺(tái)為用戶提供在線圖標(biāo)搜索、圖標(biāo)分撿下載、在線儲(chǔ)存、矢量格式轉(zhuǎn)換、個(gè)人圖標(biāo)庫(kù)管理及項(xiàng)目圖標(biāo)管理等基礎(chǔ)功能。同時(shí)iconfont.cn平臺(tái)作為矢量圖標(biāo)倡導(dǎo)者，積極在線分享矢量圖標(biāo)制作經(jīng)驗(yàn)、前端應(yīng)用說(shuō)明，及應(yīng)用中常見(jiàn)的一些問(wèn)題。

主頁(yè)：http://www.iconfont.cn/

8、樹(shù)形菜單jsTree

jsTree是一個(gè)基于jQuery的Tree控件。支持 XML，JSON，Html三種數(shù)據(jù)源。提供創(chuàng)建，重命名，移動(dòng)，刪除，拖放節(jié)點(diǎn)操作。可以自己自定義創(chuàng)建，刪除，嵌套，重命名，選擇節(jié)點(diǎn)的規(guī)則。在這些操作上可以添加多種監(jiān)聽(tīng)事件。

主頁(yè)：https://www.jstree.com/

9、表格Bootstrap table

Bootstrap table是國(guó)人開(kāi)發(fā)的一款基于 Bootstrap 的 jQuery 表格插件，通過(guò)簡(jiǎn)單的設(shè)置，就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè)，以及編輯、導(dǎo)出、過(guò)濾（擴(kuò)展）等等的功能。目前在github上已經(jīng)有2600多個(gè)Star，可見(jiàn)其受歡迎程度。

• 支持 Bootstrap 3 和 Bootstrap 2

• 自適應(yīng)界面

• 固定表頭

• 非常豐富的配置參數(shù)

• 直接通過(guò)標(biāo)簽使用

• 顯示/隱藏列

• 顯示/隱藏表頭

• 通過(guò) AJAX 獲取 JSON 格式的數(shù)據(jù)

• 支持排序

• 格式化表格

• 支持單選或者多選

• 強(qiáng)大的分頁(yè)功能

• 支持卡片視圖

• 支持多語(yǔ)言

• 支持插件

主頁(yè)：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

10、CSS動(dòng)畫(huà)Animation.css

Animation.css是一個(gè)迷人的動(dòng)畫(huà)庫(kù)，它提供了一堆很酷的，有趣的，跨瀏覽器的動(dòng)畫(huà)，你可以在項(xiàng)目中調(diào)用它們。

主頁(yè)：https://daneden.github.io/animate.css/

限于篇幅，這次只介紹這10款，說(shuō)是介紹，其實(shí)只是拋磚引玉而已，具體的用法我沒(méi)有附上，其實(shí)任何一個(gè)庫(kù)或者控件插件類的，看官方文檔是最佳的使用方式，如果有任何問(wèn)題，請(qǐng)留言，謝謝