因為互動式的視窗及API串接資料, 過程繁瑣 , 故會分開兩個專案執行
Part.1 觸發按鈕-開啟Model互動視窗及 如何使用bootstrap 去編寫
Part.2 會進階在Ｍodel 互動視窗串接ＡＰＩ, 使用方式為 [ 委派監聽事件 ]
Step1. 分析問題
清單及搜尋已經完成後, 使用者需要知道電影介紹內容.
經團隊討論後, 增加點擊按鈕後, 跳出視窗顯示出電影的詳細內容.
<<為避免切換到新的頁面. >> , 建議使用互動式及動態視窗
Step2 . 拆解問題：
- 跳出視窗顯示出
- 從彈跳出的視窗內有電影的詳細內容 ：
3. 如何取得電影的詳細內容
4. Template的HTML頁面籤
Step3. 尋找答案 及方法：
- 在DOM 插入的內容新增“ 按鈕 ” , 供後續委派監聽事件使用.（ 此篇說明）
- 引入 Bootstrap 的 Modal 元件製作互動視窗 （此篇說明）
- 使用事件委派 (event delegation) 將點擊事件綁定至動態產生 (dynamically generate) 的按鈕
- 運用 dataset 將特定資訊標註到 HTML 標籤上，再用 JavaScript 取出
- 用 axios 發送請求將取得 API 資料，放進 template 的適當位置裡
STEP4.製作出自己的編寫流程
此次會有兩次框架要製作 及新增修改
前置框架 ( part . 1 )： API ＿data 增加按鈕
- 繪製區塊＆html 標籤
- FIGMA做群組, 及HTML架構.
- 編寫main.js , 透過DOM 插入HTML內容 ,將區塊做註解及定義
當HTML 架構越來越複雜 , 建議將區塊其獨立分開繪製.
後續較容易讀寫及繪製
新增按鈕的 UI Template
編寫main.js , 在原本DOM 插入HTML內容內 , 新增Button 按鈕 //青色區域
並將區塊做註解及定義
注意是在main.js 的DOM 上編寫. button !!!!
前置框架 ： 開啟 新Model 互動式視窗
- 繪製區塊＆html 標籤
- FIGMA做群組, 及HTML架構.
- 編寫index.Html , 將區塊做註解及定義 .
注意歐,, 這是新的視窗 在html 上編寫
準備彈出視窗元件 Ｍodel
我們運用 Boostrap 4 的 Modal 元件來製作互動視窗。
// 這邊bootstrap 可以出一篇小專案 //
Modal 元件使用 Javascript 和 CSS，能夠在不切換頁面的狀態下跳出一個互動視窗.
完成.