實作 Material Web Design 這套前端工具主要是參考 Material UI 風格設計,並且這是一個藉由 Compass、HTML 以及 jQuery..等各種前端工具實作的 Material UI Design for Web,開發者可以自行使用 SCSS 或者 CSS 來做修改,目前是使用 jQuery 來達到更多 UI 回饋效果。 以下是基本的介紹: 此作品開發工具主要使用 Gulp、Co…

實作 Material Web Design

這套前端工具主要是參考 Material UI 風格設計,並且這是一個藉由 CompassHTML 以及 jQuery..等各種前端工具實作的 Material UI Design for Web,開發者可以自行使用 SCSS 或者 CSS 來做修改,目前是使用 jQuery 來達到更多 UI 回饋效果。

各種 Material UI 元素

以下是基本的介紹:

  • 此作品開發工具主要使用 Gulp、Compass 以及 jQuery 語言所建立,主要架構則使用 OAF2E v1.2
  • 相關概念也參考了 Tedshd's GitHub 所設計的 material_design_for_web
  • 資料夾 lib 內包含了 _oa-material.scss、oa.material.css、oa.material.min.css,三隻檔案提供了 SCSS、CSS 兩種使用方式的檔案。

相關參考

用 jQuery 實作 Youtube 播放器 - OA Wu's Blog
用 jQuery 實作 Youtube 播放器
用 jQuery 實作 Youtube 播放器用 jQuery 實作 Youtube 播放器 此作品主要是練習 Youtube API 的運用,主要功能是利用 API 來操作播放清單以及播放參數的設定。 雖然這功能有點多此一舉..(Youtube 就可以做清單了),但是還是分享一下製作心得! 功能主要就是利用 Youtube 所提供的 API 再利用 Local Storage 紀錄播放清單,再利用 JavaScript 按鍵事件,…
天氣地圖 Weather Maps - OA Wu's Blog
天氣地圖 Weather Maps
天氣地圖 Weather Maps天氣地圖 Weather Maps 這項做主要是藉由中央氣象局的網站資料建置出來的,其中主要功能是可以藉由 Google Maps 查詢各地方的天氣預報概況,並且可以查看各個地區的每小時溫度變化,以及搭配使用 localStorage 來實作前端關注的功能。此作品主要利用 PHP 取得資料,並且編譯成 HTML 檔案上傳 Amazon S3,此架構不僅可以減…
實作 jQuery ScrollView 套件 - OA Wu's Blog
實作 jQuery ScrollView 套件
實作 jQuery ScrollView 套件實作 jQuery ScrollView 套件 為了讓手機水平瀏覽圖片的操作更像 App 的介面,所以利用 JavaScript、jQuery、jQuery-UI、jQuery.UI.Touch-Punch 等套件,實作 ScrollView 的水平滑動效果。 功能主要是依賴 jQuery 與 jquery-UI 實作,再利用 jQuery-UI 的 Draggable 實作拖曳的效果,則 Draggable 需要設定 axis: 'x' 來固…
數字翻轉計數器 - OA Wu's Blog
數字翻轉計數器
數字翻轉計數器數字翻轉計數器 使用簡單的 JavaScript 與 SCSS 實作數字翻轉計數器,藉由設定每個計數器元素的 class 來達成不同數字的顯示,分別以 n0~n9 的 class 來設定子元素 top 的位置。GitHub 內的關鍵 css 與 JavaScript 分別在這裡和這裡,以下依照步驟配合圖片講解一下! 首先建立要用的 HTML 結構,基本上就是 span 代表一個…
吳政賢 個人簡歷 OA Wu LiveCoding.tw