Javascript Dialog 自訂輸入視窗 (三) 使用自訂物件產生輸入視窗
使用 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'>";
// 建立 輸入內容
dialog_layout += CreateInput();
dialog_layout += "</div>";
let mydialog = document.getElementById("mydialog");
mydialog.innerHTML = dialog_layout;
}
//建立輸入內容
function CreateInput(){
let strReturn = "";
//產生輸入內容
//建立按鈕
strReturn += "<div class='dialog_control'>";
strReturn += "<button id = 'dialog_cancel'>取消輸入</button>";
strReturn += "<button id = 'dialog_clear'>清除所有資料</button>";
strReturn += "<button id = 'dialog_ok'>確定</button>";
strReturn += "</div>";
return strReturn;
}
//呼叫輸入視窗
let test = document.getElementById("test");
test.addEventListener(
"click",
function(e){
CreateDialog();
},
false
)
</script>
執行的畫面如下,按下輸入視窗按鈕就會彈出基本輸入視窗
二、將物件放入產生的輸入視窗
上面規劃的程式碼 CreateInput() 要放入自訂物件來顯示輸入內容,這邊先列出程式碼如下
//建立輸入內容
function CreateInput(){
let enter = "<BR>";
let strReturn = "";
//產生輸入內容
let input_1 = new classProperty_Detail("輸入框","text","","","預設資料");
let input_2 = new classProperty_Detail("單一選擇","radio",["01","02","03"],["北區","中區","南區"],["02"]);
let input_3 = new classProperty_Detail("選核方塊","checkbox",["A","M","D","I","P"],["新增","修改","刪除","執行","列印"],["M","I"]);
let input_4 = new classProperty_Detail("下拉式選單","select",["001","002","003"],["管理者","組長","組員"],["002"]);
let input_All = new classProperty();
input_All.add(input_1);
input_All.add(input_2);
input_All.add(input_3);
input_All.add(input_4);
let strDetail = "";
for (let i=0;i<input_All.getLenght();i++){
if (input_All.getTitle(i) != null){
//取得預設值
let Defaule_Value = input_All.getDefault_value(i);
strDetail += "<div>";
//標題
strDetail += "<label class='dialog_title'>" + input_All.getTitle(i) + "</label>";
// strDetail += "<label class=''>" + input_All.getTitle(i) + "</lable>";
//建立輸入語法
if (input_All.getInput_type(i) == "text"){
//一般輸入
// <input type="text" value="" class="inputText">
strDetail += "<input type='text' value='" + Defaule_Value + "' class='inputText'>";
} else {
//radio , checkbox , select
if (input_All.getInput_type(i) == "radio"){
//radio
// <input type="radio" id="area_01" value="01" name="area"><label for="area_01">北區</label>
for (let j=0;j<input_All.getOption_data(i).length;j++){
let myId = "radio" + i + "_" + input_All.getOption_data(i)[j];
//判斷預設值
let myChecked = "";
for (let di = 0;di <Defaule_Value.length;di ++){
if (Defaule_Value[di] == input_All.getOption_data(i)[j]){
myChecked = " checked='true' ";
console.log (">>>di:" + di + ",J:"+ j + ",Data:" + Defaule_Value[di] + "," + input_All.getOption_data(i)[j]);
break;
}
}
strDetail += "<input type='radio' id='" + myId + "' value='" + input_All.getOption_data(i)[j] + "' " + myChecked + " name='radio" + i + "'>";
strDetail += "<label for ='" + myId + "'>" + input_All.getOption_label(i)[j] + "</label>";
}
} else if (input_All.getInput_type(i) == "checkbox"){
//checkbox
// <input type="checkbox" id="AMDIP_A" value="A" name="AMDIP"><label for="AMDIP_A">新增</label>
for (let j=0;j<input_All.getOption_data(i).length;j++){
let myId = "checkbox" + i + "_" + j + "_" + input_All.getOption_data(i)[j];
//判斷預設值
let myChecked = "";
for (let di = 0;di <Defaule_Value.length;di ++){
if (Defaule_Value[di] == input_All.getOption_data(i)[j]){
myChecked = " checked='true' ";
console.log (">>>di:" + di + ",J:"+ j + ",Data:" + Defaule_Value[di] + "," + input_All.getOption_data(i)[j]);
break;
}
}
strDetail += "<input type='checkbox' id='" + myId + "' value='" + input_All.getOption_data(i)[j] + "' " + myChecked + " name='checkbox" + i + "'>";
strDetail += "<label for ='" + myId + "'>" + input_All.getOption_label(i)[j] + "</label>";
}
} else if (input_All.getInput_type(i) == "select"){
// select
// <select name = "OWNER">
// <option value="">請選擇權限</option>
strDetail += "<select id='select" + i + "' name='select" + i + "'>";
for (let j=0;j<input_All.getOption_data(i).length;j++){
//判斷預設值
let myChecked = "";
for (let di = 0;di <Defaule_Value.length;di ++){
if (Defaule_Value[di] == input_All.getOption_data(i)[j]){
myChecked = " selected='selected' ";
console.log (">>>di:" + di + ",J:"+ j + ",Data:" + Defaule_Value[di] + "," + input_All.getOption_data(i)[j]);
break;
}
}
strDetail += "<option value='" + input_All.getOption_data(i)[j] + "' " + myChecked + ">";
strDetail += "" + input_All.getOption_label(i)[j] + "</option>";
}
strDetail += "</select>"
}
}
strDetail += "</div>";
}
}
strReturn += strDetail;
//建立按鈕
strReturn += "<div class='dialog_control'>";
strReturn += "<button id = 'dialog_cancel'>取消輸入</button>";
strReturn += "<button id = 'dialog_clear'>清除所有資料</button>";
strReturn += "<button id = 'dialog_ok'>確定</button>";
strReturn += "</div>";
return strReturn;
}
在 CreateInput() 首先會先載入 classProperty_Detail
let input_1 = new classProperty_Detail("輸入框","text","","","預設資料");
然後再填入 classProperty , 進行序列化
let input_All = new classProperty();
input_All.add(input_1);
接下來再判斷 input_All.getInput_type(i) 的內容來產生不同的語法,
目前範例為 "text","radio","checkbox","select" 這四種,簡化程式碼如下
目前範例為 "text","radio","checkbox","select" 這四種,簡化程式碼如下
//建立輸入語法
if (input_All.getInput_type(i) == "text"){
//一般輸入
// <input type="text" value="" class="inputText">
} else {
//radio , checkbox , select
if (input_All.getInput_type(i) == "radio"){
//radio
// <input type="radio" id="area_01" value="01" name="area"><label for="area_01">北區</label>
} else if (input_All.getInput_type(i) == "checkbox"){
//checkbox
// <input type="checkbox" id="AMDIP_A" value="A" name="AMDIP"><label for="AMDIP_A">新增</label>
} else if (input_All.getInput_type(i) == "select"){
// select
// <select name = "OWNER">
// <option value="">請選擇權限</option>
}
}
至於裡面怎麼去判斷預設值以及語法要如何產生,已經再最開始有列出程式碼,以下為執行的畫面
因為將程式碼貼進來並無法執行,所以這邊就只能看畫面了
留言
張貼留言