後台 Bootstrap, jQuery, Javascript 套件大寶典
手上的工作項目除了寫 backend code 之外,有時還需要做網頁後台,本人略懂 HTML, CSS 但是設計則是大外行,所以在做網頁後台時大多找些現成的 package 。
因為 Bootstrap 實在非常好用,所以找 package 的準則首選相容 Bootstrap 或是有 Bootstrap theme 的套件,以下就由院長一一為大家介紹。
Bootstrap
拿來當底的 Admin theme ,相容 Bootstrap 3 又有許多客製化的 Widgets
有一些強化原本 Bootstrap 3 沒有的元件,像是 Input mask, Row link, File input, ... 等,我主要拿來補 Bootstrap 沒有的 File input
最齊全的 Datepicker
用來做網頁彈 Notify
Javascript
Jasny Bootstrap 有個 image 縮圖的 uploader 元件,可以再上傳時預覽圖片,Holder.js 則是用來填充預設的空白圖片區域
最齊全的日期處理函式庫
純 Javascript md5 函式庫,搭配 HTML5 的 FileReader,就可以在前端直接算出檔案的 md5 hash value
最近很夯的 front-end framework ,會用 Vue.js 不是因為要搞什麼 Single Page Application(SPA),而是拿來做一些原本用 jQuery 不好做的元件透過 Vue.js 的 two way data binding 就可以輕鬆搞定,這部分再找時間寫專文來介紹。
jQuery
最好的 DataTables 了,有 Bootstrap 3 的 theme
DataTables.net 的 Column Filter 外掛,可以在 DataTables 的 Column 加上 Filter ,就可以單獨過濾這個 Column ,唯一的缺定就是 css 很難看,不過除此之外也找不到其他的了。
拿來做多個 select 連動,像是選了縣市、根據縣市再選行政區這類的 select 連動
原本是強化 select 的套件,不過裡面的 tag input 是目前院長用過最好用的 tag input
WYSIWYG editor
間單清爽的 WYSIWYG editor
CKEditor 就不用介紹了吧,全功能、重裝備
UIkit 也類似 Bootstrap 的 front-end framework ,UIkit 有個 HTML editor 可以支援 Markdown ,之前有專案使用過這個 Markdown editor
Icon font
Icon font 就不解釋了