Badsupldn's Blog

SupLDN 計算機 0   0 AC -/+ % / ...

 以下為整合的程式操作,可以使用新增來輸入資料,再由修改來改變資料 其中彈出來的輸入視窗就是前幾章寫的程式,因為是鑲在blogget內,所以版面會整個爆版,如果是在自己的網頁是正常的,有興趣的可以直接檢視原始碼,自行修改 輸出欄位

本章的範例基本上為補完前面的程式碼,接下來要先了解自訂事件以及呼叫的方式 建立自訂事件及監聽 套用原本程式碼 一、建立自訂事件及監聽 以下為建立自訂事件及驅動的程式碼, detail 是保留字 const dialog_ok_event = "dialog_ok_event" ; const Custom_Event = new CustomEvent ( dialog_ok_event ,{ detail :資料(字串) });                     document . dispatchEvent ( Custom_Event ); 監聽接收事件             document . addEventListener (                 dialog_ok_event ,                 function ( e ){                     alert ( "Dialog input:" + e . detail );                 },                 false             ) 二、套用原本程式碼 了解自訂事件後,接下來整合到原來的程式內 先將建立的事件丟到 確認按鈕 內,這樣就可以將產生的資料丟到事件內                             /...

在上一章 Javascript Dialog 自訂輸入視窗 (三) 使用自訂物件產生輸入視窗 已經建立好表單的輸入內容,接下來就要開始建立按鈕以及檢查的步驟,以下為開始建立的步驟 建立輸入按鈕事件 建立取消事件程式碼 建立清除事件程式碼 建立檢查事件程式碼 一、建立輸入按鈕事件 在上一章的程式碼的 CreateInput() 裡面建立了三個按鈕分別為                 strReturn += "<button id = 'dialog_cancel'>取消輸入</button>" ;                 strReturn += "<button id = 'dialog_clear'>清除所有資料</button>" ;                 strReturn += "<button id = 'dialog_ok'>確定</button>" ; 接下來在 CreateDialog() 裡面,建立一個用來放置這三個按鈕處理的 function ,範例取名為 CreateButton () , 接下來就開始將按鈕的事件建立起來             //建立按鈕事件             function CreateButton (){                 //確認                 let dialog_ok = document . getElementById ( "dialog_ok" );             ...

使用 HTML 產生樣式後,接下來就是要使用程式來產生對應的視窗,這時也會用到最一開始先建立起來的物件了  Javascript Dialog 自訂輸入視窗 (一) 建立自訂物件、物件序列化 以下區分兩個步驟 產生基本的輸入視窗 將物件放入產生的輸入視窗 一、產生基本的輸入視窗 延續先前的 HTML 布局,將HTML內的class 先都移除,避免與程式重複會看不出效果,然後加入以下按鈕,可以驅動輸入視窗         < div >             < div id = "mydialog" ></ div >             < button id = "test" > 呼叫輸入視窗 </ button >         </ div > 再來先規劃好 Javascript 要寫的函數,將物件要放入的地方先空出來,程式如下         < script >             //建立輸入視窗             function CreateDialog (){                 let dialog_layout = "" ;                 dialog_layout += "<div class='fullscreen'></div>" ;                 dialog_layout += "<div class='dialog'>" ; ...