Angular
[Angular] 自建Duel List
在設計介面時, 有時會利用duel list 去顯示現有item 及可以加入的item. 在Angular 中, 可以安裝 angular-dual-listbox 實現. 而它亦可以自己修改設計. 示範中會利用它自建主題及加入add/ remove all 功能.
User Experience (UX)
User Experience (UX)
於 Fontawesome 圖示中加入文字
利用Fontawesome 可以透過HTML在圖示中加入文字.
Angular
[Angular] 於Kendo Grid 同時加入sort 及 page
Kendo UI 是由Telerik 開發的一套Web UI 套件. 使用它主要是因為它強大的後台Microsoft 支撐. 而這幾年, 它亦開始了Angular 的開發. 然而, 其功能若跟WPF control 比較, 則有得多要改善的地方. 而在示範中, 則補元了datagrid 中出了page 後sorting 的功能. 方法如下.
Computing
[WhatsApp] 透過網頁開啟WhatsApp
當建立公司網頁時, 通常會留電話號碼, 電郵等作聯絡方法, 而WhatsApp 亦有類似方法可以實現.
Computing
[JQuery] DataTables
DataTables 是一個在資金所限但又要用DataGrid 情況下的一個替代品. 透過JQuery, 可以將資料從JSON 中顯示出來.
Computing
[JQuery] 解決Select2 輸入文字搜尋時令瀏覽器不能運作
Select2.js 是JQuery 一個套件, 既整合了dropdown 亦加入了AutoComplete 的功能. 然而若根據文件去使用時, onChange() 卻有機會令瀏覽器不能運作.
Computing
[CSS] 建立Calendar-like 日期顯示
早期建立網頁時, 若要建立陰影 / 弧邊的話, 都須要利用修圖軟件幫助, 現在CSS3 亦已支援相對應的東西. 在這裡, 利用了日期顯來做示範.
Computing
[CSS] 於圖片建立相片效果
以前設計網頁時, 若圖片須要制造相片效果, 則須要利用修圖軟件加工, 後來隨著CSS 技術日漸成熟以及IE 的式微, 現在已經可以從CSS 層面著手. 方法如下:
Computing
[UX] Office UI Fabric
近期Microsoft 擁抱開源, 好多有用的東西之前要偷dll, 找boot disk都已經可以在其Github 中找到, 並且整合到其他開源平台. 而Office UI Fabric 是其中之一.
User Experience (UX)
[UX] Pencil
之前提及做prototype, 雖然個人覺得最厲害的工具是紙和筆, 但有時要給客戶看時, 也不能夠如此in-professional. 所以找來了一套工具用作設計介面.