認識並且能實做 toast 元件
toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣
用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好
很多網站因為沒有做好適當的 toast 元件,使用者在操作時常常覺得「表單到底有沒有送出?」「網站當機了是不是?」
通常要將 toast 做成幾種不同樣式,根據不同使用情境來使用
由於 toast 通常會直接蓋在網站的上方正中央(或者右上角、左下角,不一定)
會蓋到網頁畫面,所以通常會做成「顯示幾秒之後自動關閉」
請上網搜尋 toast ui
toast component
,四處觀摩一下業界常見的設計
要在倒數幾秒之後執行任務,你需要 setTimeout
這個函式。請自行上網搜尋一下,了解這個函式的用法
請使用 https://jsfiddle.net
用以下 html 為基礎(你可以稍微修改),接著寫出 css 與 js 的部份
<button onclick="toastSuccess()">成功訂購商品</button>
<hr>
<button onclick="toastError()">訂購商品失敗</button>
<div class="toast toast-success">
訂購成功!可以查看 Email 確認訂單細節!
</div>
<div class="toast toast-error">
抱歉,訂購失敗!請稍後重新嘗試
</div>
這邊共有兩個按鈕,模擬兩種使用情境
兩個吐司元件,一開始預設是隱藏的,不會在畫面上看到
請寫出 toastSuccess
函式的內容,在點擊按鈕後,將「成功吐司」顯示在畫面上 5 秒鐘,之後自動消失
請寫出 toastError
函式的內容,在點擊按鈕後,將「錯誤吐司」顯示在畫面上 5 秒鐘,之後自動消失
成功吐司請做成綠色
錯誤吐司請做成紅色
這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定
請稍微加一些 css 屬性,弄得漂亮一點
<hr>
只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係
做出以上功能,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
交作業~ https://jsfiddle.net/birdie2019/fmc6b8ht/49/
交作業 https://jsfiddle.net/evon0306/sytqhxd6/2/
交作業 https://jsfiddle.net/81ue_lan/twuk56L4/51/
https://jsfiddle.net/johnny890118/swd1kpa0/108/ 交作業
交作業,再麻煩站長了,謝謝! https://toast-alert.glitch.me
https://jsfiddle.net/tsaii/pugvmxjd/33/ 交作業
交作業~ https://jsfiddle.net/ZooeyLai/9z3ktrb2/
https://jsfiddle.net/wimp9487/4ubdgkfp/43/ 交作業!
繳交作業 謝謝 https://jsfiddle.net/kushmuffin/s4uh8Lo2/17/
作業繳交
https://jsfiddle.net/mb2902911/um4Lr127/
交作業 https://codepen.io/adens123/pen/rNPBpqO
作業繳交 https://jsfiddle.net/jc02zytL/56/