後台 Bootstrap, jQuery, Javascript 套件大寶典

手上的工作項目除了寫 backend code 之外,有時還需要做網頁後台,本人略懂 HTML, CSS 但是設計則是大外行,所以在做網頁後台時大多找些現成的 package 。

因為 Bootstrap 實在非常好用,所以找 package 的準則首選相容 Bootstrap 或是有 Bootstrap theme 的套件,以下就由院長一一為大家介紹。

# Bootstrap

AdminLTE (opens new window)

拿來當底的 Admin theme ,相容 Bootstrap 3 又有許多客製化的 Widgets

Jasny Bootstrap (opens new window)

有一些強化原本 Bootstrap 3 沒有的元件,像是 Input mask, Row link, File input, ... 等,我主要拿來補 Bootstrap 沒有的 File input

Bootstrap 3 Datepicker (opens new window)

最齊全的 Datepicker

Bootstrap Notify (opens new window)

用來做網頁彈 Notify

# Javascript

Holder.js (opens new window)

Jasny Bootstrap 有個 image 縮圖的 uploader 元件,可以再上傳時預覽圖片,Holder.js 則是用來填充預設的空白圖片區域

Moment.js (opens new window)

最齊全的日期處理函式庫

spark-md5 (opens new window)

純 Javascript md5 函式庫,搭配 HTML5 的 FileReader,就可以在前端直接算出檔案的 md5 hash value

Vue.js (opens new window)

最近很夯的 front-end framework ,會用 Vue.js 不是因為要搞什麼 Single Page Application(SPA),而是拿來做一些原本用 jQuery 不好做的元件透過 Vue.js 的 two way data binding 就可以輕鬆搞定,這部分再找時間寫專文來介紹。

# jQuery

DataTables.net (opens new window)

最好的 DataTables 了,有 Bootstrap 3 的 theme (opens new window)

yadcf (opens new window)

DataTables.net 的 Column Filter 外掛,可以在 DataTables 的 Column 加上 Filter ,就可以單獨過濾這個 Column ,唯一的缺定就是 css 很難看,不過除此之外也找不到其他的了。

Chained (opens new window)

拿來做多個 select 連動,像是選了縣市、根據縣市再選行政區這類的 select 連動

Selectize.js (opens new window)

原本是強化 select 的套件,不過裡面的 tag input 是目前院長用過最好用的 tag input

# WYSIWYG editor

Summernote (opens new window)

間單清爽的 WYSIWYG editor

CKEditor (opens new window)

CKEditor 就不用介紹了吧,全功能、重裝備

UIkit (opens new window)

UIkit 也類似 Bootstrap 的 front-end framework ,UIkit 有個 HTML editor (opens new window) 可以支援 Markdown ,之前有專案使用過這個 Markdown editor

# Icon font

Icon font 就不解釋了

Ionicons (opens new window)

Font Awesome (opens new window)