iT邦幫忙

2018 iT 邦幫忙鐵人賽
13
Modern Web

30天學習30套前端技術(2018年)系列 第 61

2018鐵人賽索引和心得(圖多慎入)

從去年12月20開始參賽,原本是30天學習30套前端技術,途中就決定不間斷持續60天,每篇只有簡短的入門,希望透過短時間就了解套件功能、是否符合專案需求等;並在過程中落實MVP(Minimal Viable Product)的思維,在有限時間內學習、篩選實用項目做出整理並分享;使用上有問題或有其他推薦的套件可在各篇下回覆,thanks。

索引上分成【程式碼和編輯器】、【表單】、【捲軸】、【動畫和繪製】、【時間】、【排版】、【建議列表】、【影音】、【圖像】、【資料】和【組件】共11個項目,並依照JavaScripting的評分排序。

程式碼和編輯器

Ace

評分: 95%
可編輯式程式碼上色
example1

highlight.js

評分: 90%
程式碼上色
example1

Quill

評分: 90%
HTML編輯器
example1

TinyMCE

評分: 79%
HTML編輯器
example1


表單

Chosen

評分: 91%
下拉式選單優化
example1

Fine Uploader

評分: 88%
拖曳式檔案上傳
example1

jQuery Validation

評分: 88%
表單驗證
example1

iCheck

評分: 16%
radio、checkbox美化
example1

Cleave.js

評分: -
表單欄位格式化
example1


捲軸

ScrollReveal

評分: 81%
動態顯示內容
example1

iScroll

評分: 80%
拖曳式瀏覽效果
example1

nanoScroller.js

評分: 66%
捲軸美化
example1

Infinite Scroll

評分: -
表單載入內容
example1

ScrollToFixed

評分: -
當捲軸至特定高度時,則物件釘住
example1


動畫和繪製

Chart.js

評分: 97%
圖表繪製
example1

Leaflet

評分: 97%
地圖繪製
example1

three.js

評分: 97%
動畫繪製
example1

Animate.css

評分: 94%
動畫效果
example1

p5.js

評分: 87%
繪圖效果
example1

Hover.css

評分: 85%
當滑鼠觸碰物件時,則產生動畫效果
example1

Textillate.js

評分: 63%
文字效果
example1

KUTE.js

評分: 44%
動畫繪製
example1

sketch.js

評分: -
動畫繪製
example1


時間

Moment.js

評分: 97%
時間格式轉換

FullCalendar

評分: 85%
全版行事曆
example1

pickadate.js

評分: 81%
日期和時間選擇器
example1

datedropper

評分: 54%
日期選擇器
example1

Timeline.js

評分: -
時間軸效果
example1


排版

reveal.js

評分: 91%
投影片效果
example1

fullPage.js

評分: 88%
全頁式導覽
example1

Parallax

評分: 85%
視差效果
example1

Masonry

評分: 78%
排版優化
example1

Muuri

評分: -
可拖曳排版
example1


建議列表

typeahead.js

評分: 85%
產生建議列表
example1

Algolia Places

評分: -
產生地址建議列表
example1


影音

Videos.js

評分: 97%
影片播放器
example1

howler.js

評分: 86%
聲音播放器
example1


圖像

Swiper

評分: 93%
幻燈片/跑馬燈效果
example1

lightgallery.js

評分: 72%
燈箱效果
example1

JQuery lightSlider

評分: 57%
幻燈片/跑馬燈效果
example1

Lazy Load

評分: -
圖片分批載入優化
example1


資料

PDF.js

評分: 94%
PDF顯示器
example1

Sortable

評分: 91%
可拖曳、排序清單
example1

Faker.js

評分: 90%
假資料產生器
example1

Handlebars.js

評分: 88%
模板效果

Store.js

評分: 87%
前端資料庫
example1

List.js

評分: 82%
資料排序、搜尋和過濾
example1

DataTables

評分: 77%
表格排序、搜尋和過濾
example1

Tabulator

評分: 41%
表格內容強化
example1


組件

clipboard.js

評分: 90%
複製貼上
example1

Intro.js

評分: 90%
引導式教學
example1

toastr

評分: 83%
提示訊息美化
example1

Headroom.js

評分: 80%
導覽列優化
example1

Slidebars

評分: 50%
側邊選單效果
example1

ALERTIFY.js

評分: 67%
提示訊息美化
example1

Toolbar.js

評分: 53%
工具列效果
example1

Tabslet

評分: 33%
頁籤效果
example1

goodshare

評分: -
社群分享套件
example1

jquery-loading

評分: -
讀取效果
example1

Shave

評分: -
文字截斷
example1


上一篇
[十分鐘學習] Infinite Scroll - 捲軸瀏覽至底載入新資料
系列文
30天學習30套前端技術(2018年)61
0
QQBoxy
iT邦新手 5 級 ‧ 2018-02-23 11:38:48

辛苦了,大大發了超多篇的呢!

mfhsueh iT邦新手 4 級‧ 2018-02-26 17:00:14 檢舉

也謝謝你的之前的分享交流唷

0
panda936
iT邦新手 5 級 ‧ 2018-08-20 16:34:31

辛苦了!整理超詳細的!謝謝您的用心分享~

yehmy iT邦新手 4 級‧ 2018-11-06 23:01:25 檢舉

辛苦了!整理超詳細的!謝謝您的用心分享~ +1

mfhsueh iT邦新手 4 級‧ 2018-12-03 16:03:23 檢舉

謝謝你們留言鼓勵

0
電腦達人
iT邦新手 5 級 ‧ 2018-09-14 14:11:03

在找折線圖的時候意外發現了好物
謝謝大大的分享

mfhsueh iT邦新手 4 級‧ 2018-12-03 16:04:06 檢舉

希望有幫助到你唷

我要留言

立即登入留言