《移動端Web組件-Dialog對話框》是慕課網提供的慕課課程，授課老師是一隻帥螞蟻。
基本介紹
- 中文名：移動端Web組件-Dialog對話框
- 授課老師：一隻帥螞蟻
- 提供方：慕課網
- 類別：慕課
課程簡介,課程大綱,
課程簡介
今天就給大家完整的講解一個移動端dialog組件的開發全過程，抽絲剝繭，去分析一個 Dialog 組件的種種功能，通過組件化，參數可配置化的方式，給大家集成封裝一個相對完美的 Dialog對話框組件。
課程大綱
第1章 課程準備
本章節演示Dialog組件的使用以及課程的知識儲備。
1-1 案例演示 (09:58)
1-2 課前知識準備 (05:09)
1-3 課程安排 (01:55)
第2章 Dialog 組件的 DOM 結構、CSS 樣式的搭建
本章節講解Dialog組件的DOM結構如何劃分、配合結構初始化基本的CSS樣式。
2-1 頁面重置和 Dialog 結構搭建 (07:05)
2-2 靜態樣式代碼編寫 (20:37)
第3章 JS實戰開發
本章節講解組件的參數配置和相關的功能開發。
3-1 參數配置及擴展 (19:16)
3-2 DOM結構創建 (12:35)
3-3 對話框參數控制 (16:36)
3-4 創建定製按鈕組 (18:49)
3-5 檢驗各種情況下參數配置情況 (13:45)
3-6 增加動畫效果 (08:20)
3-7 對話框層級關係設定 (08:14)
第4章 簡單最佳化圖片資源(擴展了解)
本章做一個圖片資源的最佳化，用Base64和css3的方式替代圖片資源。
4-1 圖示 Base64 編碼 (05:21)
4-2 用 CSS3 實現 Icon 圖示 (16:12)
第5章 參數擴展及Bug解決
本章講解額外參數功能擴展和一些bug的處理。
5-1 參數擴展和潛在 Bug 解決 (14:26)
5-2 tap 和 click 事件講解及事件擊穿問題 (09:36)
第6章 課程總結和組件實際項目演示
本章總結一下本期課程，通過一個購物車操作的實際項目，檢驗下Dialog組件的使用場景。
6-1 購物車操作演示 (02:26)
6-2 課程總結 (04:37)
