[前端軍火庫]ClockPicker - 更直覺的時間選擇器

在web app中遇到需要選擇日期、時間需求的時候,日期通常很簡單,大部分的UI元件都可以用表格做出一個簡單的日曆來選擇,而時間通常就比較沒那麼直覺,多半都是用個下拉選單選擇時間,或是直接輸入;而今天要介紹的ClockPicker,則是一個採用更直覺的方式,讓我們能直接在時鐘上選擇時間的酷炫library。

...繼續閱讀 »

[前端軍火庫]X-editable - 瀏覽、新增、修改三個願望一次滿足

在設計CMS之類的系統時,常常會需要一個表單和一個瀏覽資料的頁面,以新型新增、修改和查詢的工作,不過畫面排版通常會非常類似,只差在表單有額外的表單控制項,而瀏覽頁面就是單純的文字而已,但當需要更新排版時,就需要兩個頁面都同時修改,非常不方便;這時候透過X-editable,就能夠在瀏覽的頁面同時編輯資料囉

...繼續閱讀 »

[前端軍火庫]screenfull.js - 全螢幕顯示就是這麼簡單

全螢幕API(Fullscreen API)是JavaScript用來讓瀏覽器支援全螢幕的一種方式,透過Fullscreen API我們可以讓畫面可以一次呈現更多的資料,或是專注在某個影片或圖片上面等等,然後目前樓覽器的支援程度不一,因此要單純使用JavaScript的Fullscreen API,會變得複雜許多,而今天要介紹的screenfull.js,就是用來減少Fullscreen API在不同瀏覽器之間實作差異的library。

...繼續閱讀 »

[前端軍火庫]Dropzone.js - 上傳檔案的好幫手

上傳檔案是各種系統遇到機率都很高的一個功能,傳統要讓使用者上傳檔案,最簡單的方法就是加個<input type="file">,但呈現的結果並不是很好看,雖然可以透過CSS來調整外觀,但整體還是有受限的感覺,使用上也稍微不太方便;而今天要介紹的Dropzone.js可以幫助我們使用更加直覺簡單的方式,來完成上傳檔案的功能。

...繼續閱讀 »

[前端軍火庫]placehold.it - 規劃中網站用來暫時放圖片的線上服務

placehold.it跟過去介紹的library都不太一樣,它是一個線上服務,功用是在網站規劃中還只是雛型階段時,暫時用來表示這裡有一張圖片的工具。也就是說,網站還未完成時,我們可能就需要進行一些DEMO,這時候某些預計要放圖片地方還沒有任何圖片可用;或是我們知道網站的某個地方一定會放置圖片,但沒有立即可用的圖片時,需要張占用的圖片放著,好確認版面不會亂掉等等,placehold.it就可以幫助你達到這些目標。

...繼續閱讀 »

[前端軍火庫]Intro.js - 把建好的UI直接變成說明文件

在設計系統的時候,常常因為需求複雜或龐大,UI也會越來越複雜,變得不直覺、難以操作;這時候有個操作手冊就變得非常重要,但是前端的變化速度又非常快,往往導致操作手冊跟不上UI的變化,這時如果有個響導能帶著你走過所有步驟,又不用擔心隨著UI的改變而無法使用,那真是再好不過了!今天要介紹的Intro.js,就是一款能達到上述條件的神奇library。

...繼續閱讀 »

[前端軍火庫]Reveal.js - 用前端技術完成酷炫簡報

相信或多或少,大家都有製作投影片進行簡報的經驗,以製作投影片來說最主要的軟體大概非PoertPoint莫屬了;而想要使用PowerPoint做出絢麗的簡報沒有一番功夫可是做不到的...不過,我們可是前端工程師阿!如果有一款簡報軟體,可以使用我們熟悉的前端技術來完成,不是很棒的一件事情嗎?而Reveal.js就是這樣一款好用的簡報框架。

...繼續閱讀 »

[前端軍火庫]toastr.js - 美化你的通知訊息

一般來說在前端要跳出通知訊息,最簡單的方式莫過於加個alert了,但使用alert其實對於UX來說並不是件好事,因為它會影響到user的操作行為,而且不同瀏覽器的顯示方式可能會有所不同,更不用說有些瀏覽器還可以在alert重複出現時,選擇把它關掉不顯示,當然這也是為了避免同樣的緒息一直出現變成畫面根本無法使用,但也讓alert變成了不穩定的未爆彈;因此像是toastr.js這類的library就可以幫助你打造美觀的提示訊息,同時也不用擔心影響到user的畫面操作。

...繼續閱讀 »

[前端軍火庫]FontAwesome - 最受歡迎的Icon Font - 超豐富圖示字型

FontAwesome可以說是目前最受歡迎的Icon Font(也就是把icon圖示放到字體使用) css library,具有豐富的圖示(675+)可用,也有許多實用的API,因此在前端界可以說是無人不知無人不曉(什麼?你不知道?那你現在可以跟上潮流了XD)。在最近的FontAwesome5的募資甚至突破了100萬美金!由此可見其巨大的影響力。今天就來簡單介紹一下FontAwesome吧。

...繼續閱讀 »

[前端軍火庫]highlight.js - 前端也能讓程式碼highlight顯示

highlight.js是一款負責讓程式碼highlight的JavaScript library,5 支援168種程式語言,而且有77種樣式可以選擇。雖然看起來很豐富,但老實說它的應用範圍比較小,只能用在像是IT幫幫忙、GitHub這類的技術社群上,或是使用的blog不支援highlight時想要自己掛上highlight功能等等,才會用到這個library。不過不管現在是否用得到,先學起來當收藏也是不錯的!

...繼續閱讀 »

[前端軍火庫]CKEditor - 最好用的Web版文字編輯器

在開發前端的系統時,CMS(內容管理系統)可以說是非常常見的需求,像是系統公告、商品內容管理或是部落格等等;而一個好用的文字編輯器可以說是其中非常重要的核心功能!除非你能說服你的user都自己手刻HTML然後貼到一般的文字區塊裡面,否則編輯器是一定需要的。而CKEditor可以說是目前功能最完善的文字編輯器了,今天就來簡單介紹一下CKEditor吧!

...繼續閱讀 »