贊助商連結

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

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

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

Bootstrap

AdminLTE

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

Jasny Bootstrap

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

Bootstrap 3 Datepicker

最齊全的 Datepicker

Bootstrap Notify

用來做網頁彈 Notify

Javascript

Holder.js

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

Moment.js

最齊全的日期處理函式庫

spark-md5

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

Vue.js

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

jQuery

DataTables.net

最好的 DataTables 了,有 Bootstrap 3 的 theme

yadcf

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

Chained

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

Selectize.js

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

WYSIWYG editor

Summernote

間單清爽的 WYSIWYG editor

CKEditor

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

UIkit

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

Icon font

Icon font 就不解釋了

Ionicons

Font Awesome