WebSVN – php-qbpwcf – Diff – /trunk/usr/lib64/qbpwcf/javaScript.php

 		https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
 		*/
 		//事件綁定的函式
 		window.dragEventHandler.func=function(){
 			//events fired on the draggable target
 			document.addEventListener('drag', function(event) {
 				});
+		"
 		/*
 		導頁的函式:
 		*/
-		//如果沒有 window.redirectURL
+		//如果沒有 window.qbpwcf.redirectURL
-		if(window.redirectURL===undefined){
+		if(window.qbpwcf.redirectURL===undefined){
-			//宣告 window.redirectURL 為空物件
+			//宣告 window.qbpwcf.`redirectURL 為空物件
-			window.redirectURL={};
+			window.qbpwcf.redirectURL={};
 			}//if end
 		//設置 window.redirectURL 變數為 function,參數為 params
-		window.redirectURL=function(params){
+		window.qbpwcf.redirectURL=function(params){
 			//如果 params.url 未定義
 			if(params.url===undefined){
 				//設置要回傳的物件
 				//設置過了 params.countdownSec 秒後要做的事情.
 				setTimeout(function(){
 					//導頁到 params.url
 					window.location.href=params.url;
 					},params.countdownSec*1000);
 				}//else end
 			}//if end
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明：
 			window.qbpwcf.form={};
 			}//if end
 		/*
+		如果回覆的結果是json,且具有error屬性,則會進行需要手動消除的提示.
+		如果回覆的結果是json,且具有content性,則會進行會自動消失的提示.
 		如果回覆的結果是json,且具有location屬性,則會進行導頁.
 		window.qbpwcf.form.fakeScrollingList(),建構子,初始化fakeScrollingList.
-		window.qbpwcf.form.eleId,選單呈現的元素 id 為什麼，亦即要點擊的元素其id.
+		window.qbpwcf.form.eleId,選單呈現的元素 id 為什麼，亦即要點擊的元素其id,若有設定則忽略targetEle.
-		window.qbpwcf.form.targetEle,選單呈現的元素為,若 eleId 為 '' 且該變數不等於 '' 就會採用.
+		window.qbpwcf.form.targetEle,選單呈現的元素為,若 eleId 為 '' 且該變數不等於 '' 就會採用,若有設定則忽略eleId.
+		window.qbpwcf.from.autoStart,布林,若eleId與targetEle均未設定,則預設為true,代表要網頁載入後自動觸發;反之設置為false代表不會網頁載入後自動觸發.
-		window.qbpwcf.form.closeIcon,關閉按鈕的設定
+		window.qbpwcf.form.closeIcon,關閉按鈕的設定.
+		window.qbpwcf.form.disallowClose,布林,true代表不允許關閉選單;預設為false,代表允許關閉選單.
-		window.qbpwcf.form.noActionOption,物件,name為顯示的內容;value為選單的數值.
+		window.qbpwcf.form.noActionOption,物件,選擇哪些選項不用動作,name為顯示的內容;value為選單的數值.
 		window.qbpwcf.form.sendOnClickWhenOnly2options,布林值,預設為false,不啟用;反之為true代表點選元素後就直接送出最後一個選項的數值.啟用條件為window.qbpwcf.form.options只有一個元素.
 		window.qbpwcf.form.donotSendFrom,布林值,預設為false,代表選擇了要傳送的項目後,會傳送表單,設置為true代表不會傳送表單只會將選項對應的數值內容交給 window.qbpwcf.form.callback 陣列中的 callback 處理.
 		window.qbpwcf.form.hiddenVar,陣列,每個元素為物件,物件的屬性有name為變數的名稱;value為選單的數值.
 		window.qbpwcf.form.defaultOption,物件,name為顯示的內容;value為選單的數值.
 		window.qbpwcf.form.options,陣列,每個元素為物件,物件的屬性有name為顯示的內容;value為選單的數值.
 		window.qbpwcf.form.recPage,字串,為接收要求的網址,預設為當前頁面.
 		window.qbpwcf.form.sendVarName,傳送表單時的選項對應的變數名稱,預設為'variable'.
 		window.qbpwcf.form.callback,針對所選擇的選項內容,要交由哪些函式處理,形態為陣列.
 		window.qbpwcf.form.getTarget(),抓要變成fakeScrolling List的元素.
+		window.qbpwcf.from.replaceCurrentPageToDomResponse,布林,預設為true,代表得到ajax回應為非json的dom時,會將其結果呈現到當前畫面;反之為false.
-		window.qbpwcf.form.show(),顯示fake Scrolling list.
+		window.qbpwcf.form.active(),啟用fake Scrolling list.
 		*/
 		//設置 this 物件,建構子.
 		window.qbpwcf.form.fakeScrollingList=function(){
 			//要用 fake scrolling list 選單呈現的元素 id 為?
 			this.eleId='';
 			//要用 fake scrolling list 選單呈現的元素為,若 eleId 為 '' 且該變數不等於 '' 就會採用.
 			this.targetEle='';
 			//fake scrolling list 預設選單關閉的 叉叉按鈕
 			this.closeIcon='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpvc2I9Imh0dHA6Ly93d3cub3BlbnN3YXRjaGJvb2sub3JnL3VyaS8yMDA5L29zYiIKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjEwNS43ODE3Mm1tIgogICBoZWlnaHQ9IjEwNS4zNDM0NG1tIgogICB2aWV3Qm94PSIwIDAgMTA1Ljc4MTcyIDEwNS4zNDM0NCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnOCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45MitkZXZlbCB1bmtub3duIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjbG9zZUljb24uc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiI+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlkPSJsaW5lYXJHcmFkaWVudDQzMTUiCiAgICAgICBvc2I6cGFpbnQ9InNvbGlkIj4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6IzAwMDAwMDtzdG9wLW9wYWNpdHk6MTsiCiAgICAgICAgIG9mZnNldD0iMCIKICAgICAgICAgaWQ9InN0b3A0MzEzIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXI0MzkxIgogICAgICAgeD0iLTAuMDY4OTc3MTAzIgogICAgICAgd2lkdGg9IjEuMTM3OTU0MiIKICAgICAgIHk9Ii0wLjA3NTI5OTk5MyIKICAgICAgIGhlaWdodD0iMS4xNTA2Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIxLjAwNjI1NDMiCiAgICAgICAgIGlkPSJmZUdhdXNzaWFuQmx1cjQzOTMiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXI0NDM4IgogICAgICAgeD0iLTAuMDIyNjIyOTA0IgogICAgICAgd2lkdGg9IjEuMDQ1MjQ1OCIKICAgICAgIHk9Ii0wLjAyNTU1NTYxNCIKICAgICAgIGhlaWdodD0iMS4wNTExMTEyIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIwLjIyMTcwNjAxIgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI0NDQwIiAvPgogICAgPC9maWx0ZXI+CiAgICA8ZmlsdGVyCiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiCiAgICAgICBpZD0iZmlsdGVyNDQ0NiIKICAgICAgIHg9Ii0wLjAyMzIzMjg0NyIKICAgICAgIHdpZHRoPSIxLjA0NjQ2NTgiCiAgICAgICB5PSItMC4wMjQ4MTk1NDUiCiAgICAgICBoZWlnaHQ9IjEuMDQ5NjM5MSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMC4yMjIwOTQyOCIKICAgICAgICAgaWQ9ImZlR2F1c3NpYW5CbHVyNDQ0OCIgLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMS40IgogICAgIGlua3NjYXBlOmN4PSIxMzAuNTY4NjgiCiAgICAgaW5rc2NhcGU6Y3k9IjIwMS4zNDg0NSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzQ0ODgiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTYwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI4MzYiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgc3R5bGU9ImRpc3BsYXk6aW5saW5lIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MC4wNTQwMzQsLTg5LjA0MzUyMikiPgogICAgPGcKICAgICAgIGlkPSJnNDQ4OCIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDIuNjU1MDQ0MywwLDAsMi44NTQ2OTA3LC0xMTAuOTk1MTgsLTMyNi45MjY1MikiPgogICAgICA8ZWxsaXBzZQogICAgICAgICByeT0iMTYuMDM1OTI3IgogICAgICAgICByeD0iMTcuNTA1ODg0IgogICAgICAgICBjeT0iMTY0LjE2NTUxIgogICAgICAgICBjeD0iODAuNTc4NzIiCiAgICAgICAgIGlkPSJwYXRoMzQ3NCIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MC4zO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC4yNjQ5OTk5OTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO2ZpbHRlcjp1cmwoI2ZpbHRlcjQzOTEpO2ltYWdlLXJlbmRlcmluZzphdXRvIiAvPgogICAgICA8cmVjdAogICAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNDIuODA4OTU1KSIKICAgICAgICAgcnk9IjAiCiAgICAgICAgIHk9IjE3NC41NTY0OSIKICAgICAgICAgeD0iLTY3LjM5ODc1OCIKICAgICAgICAgaGVpZ2h0PSIyLjE1MjIwNjQiCiAgICAgICAgIHdpZHRoPSIyOS4yNzk2NDgiCiAgICAgICAgIGlkPSJyZWN0NDQxMyIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmZmMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjA7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtmaWx0ZXI6dXJsKCNmaWx0ZXI0NDQ2KSIgLz4KICAgICAgPHJlY3QKICAgICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTEzOS4wMzQ0MikiCiAgICAgICAgIHJ5PSIwIgogICAgICAgICB5PSItNzMuMDUwOTQ5IgogICAgICAgICB4PSItMTgyLjk2MjUyIgogICAgICAgICBoZWlnaHQ9IjIuMTUyMjA2NCIKICAgICAgICAgd2lkdGg9IjI5LjI3OTY0OCIKICAgICAgICAgaWQ9InJlY3Q0NDEzLTMiCiAgICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZjAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7ZmlsdGVyOnVybCgjZmlsdGVyNDQzOCkiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K';
 			//fake scrolling list 預設選項選到哪個就不傳送表單
 			this.callback=[];
 			//預設的 callback 為 console.log
 			this.callback.push(console.log);
+			//預設不自動觸發
+			this.autoStart=false;
+			//預設為true,代表得到ajax回應為非json的dom時,會將其結果呈現到當前畫面;
+			this.replaceCurrentPageToDomResponse=true;
+			//預設為false,代表允許關閉選單.
+			this.disallowClose=false;
 			//取得目標元素的涵式
 			this.getTarget=function(){
-				//如果沒有設置目標
+				//如果有設置目標id
-				if(this.eleId===''){
+				if(this.eleId!==''){
+					//設置 targetEle
+					this.targetEle=document.getElementById('this.eleId');
-					//元素變數也為空的話
-					if(this.targetEle===''){
+					}//if end
-						//提示錯誤
+				//如果元素變數為空字串的話
-						console.error('Please Defined eleId');
+				if(this.targetEle===''){
-						//結束執行
+					//設置要自動觸發
-						return false;
+					this.autoStart=true;
-						}//if end
+					}//if end
-					//反之
+				//反之元素如果是body
-					else{
+				else if(this.targetEle.tagName==='BODY'){
-						//存參考
+					//提示錯誤
-						var fakeScrollingList=this.targetEle
+					console.error('Please define targetEle other than BODY');
-						}//else end
+					//結束執行
-					}//if end
+					return false;
-				//反之有設定id
-				else{
+					}//if end
-					//用id取得下拉式選單
-					var fakeScrollingList=document.getElementById(this.eleId);
+				//如果要自動觸發
+				if(this.autoStart===true){
+					//建立div元素
+					this.targetEle=document.createElement('div');
-					}//else end
+					}//if end
+				//存元素參考
+				var fakeScrollingList=this.targetEle;
 				//回傳點擊要觸發fakeScrollingList效果的元素
 				return fakeScrollingList;
 				}//function end
-			//顯示 fake scrolling list
+			//啟用 fake scrolling list
-			this.show=function(){
+			this.active=function(){
 				//取得要綁定事件的元素
 				var fakeScrollingList=this.getTarget();
+				//如果異常
+				if(fakeScrollingList===false){
+					//結束執行
+					return;
+					}//if end
 				//可以下拉的項目用手指頭圖示
 				fakeScrollingList.style.cursor='pointer';
 				//設置 this 給 fakeScrollingList 的 addEventListener 事件
 				fakeScrollingList.mother=this;
 				//點擊選單之後
 				fakeScrollingList.addEventListener('click',function(event){
 					//取消預設點擊的效果
 					event.preventDefault();
 					//取得下拉式選單內容
 					var inputSelect=event.target;
 					//讓下拉式選單趕緊隱藏
 					inputSelect.style.opacity='0';
 						var opDiv=document.createElement('div');
 						//讓選項上下置中
 						opDiv.style.paddingTop='15px';
+						//如果是不可以點選的選項
+						if(fakeScrollingList.mother.noActionOption.name==opShow && fakeScrollingList.mother.noActionOption.value==opVal){
-						//設置選項div的class
+							//設置選項div的class
+							opDiv.setAttribute('class','__qbpwcf_inputSelect');
+							}//if end
+						//反之為可以點選的選項
+						else{
+							//設置選項div的class
-						opDiv.setAttribute('class','__qbpwcf_inputSelect __qbpwcf_inputSelect_hover');
+							opDiv.setAttribute('class','__qbpwcf_inputSelect __qbpwcf_inputSelect_hover');
+							}//else end
 						//設置裡面的文字要換行的時候改用...表示
 						opDiv.style.whiteSpace='nowrap';
 						opDiv.style.width='100%';
 						opDiv.style.overflow='hidden';
 						opDiv.style.textOverflow='ellipsis';
 						//偶數欄位
-						if(i%2===0)
+						if(i%2===0){
-						{
 							//設置選項div底色為藍色
 							opDiv.style.backgroundColor='CCCCFF';
-						}
+							}//if end
 						//反之為奇數欄位
-						else
+						else{
-						{
 							//設置選項div底色為紅色
 							opDiv.style.backgroundColor='FFCCCC';
-						}
+							}//else end
 						//解析選項的資訊
 						var oriOptionsInfo=this.options;
 						//建立選項名稱文字節點
 						//不應該跑到的地方
 						else{
 							//debug
-							console.log('error occur!');
+							console.error('error occur!');
 							}//else end
 						}//if end
 								//取得要移除 scrolling list 的 div
 								var divToDel=document.getElementById('scrollingListRootDiv');
 								//移除 scrolling list div
 								divToDel.remove();
 								//針對每個要呼叫的 callback func
 								for(var j=0;j<this.mother.callback.length;j++){
 									//callback
 									this.mother.callback[j].call(this,clickedValue);
 								params.url=fakeScrollingList.mother.recPage;
 								params.data=queryStr;
 								//取得回應
 								var res = await window.qbpwcf.ajaxP.call(this,params);
 								//取得要移除 scrolling list 的 div
 								var divToDel=document.getElementById('scrollingListRootDiv');
 								//移除 scrolling list div
 								divToDel.remove();
 									//callback
 									fakeScrollingList.mother.callback[j].call(this,res);
 									}//for end
+								//如果回應是合法的json
+								if(res.compliantJson==true){
+									//如果json的回應有error屬性
+									if(res.json.hasOwnProperty('error')){
+										//警示訊息
+										alert(res.json.error);
+										}//if end
+									//如果json的回應有content屬性
+									else if(res.json.hasOwnProperty('content')){
+										//警示訊息
+										alert(res.json.content);
+										}//else end
-								//如果json的回應有 location屬性
+									//如果json的回應有 location屬性
-								if(res.json.hasOwnProperty('location')){
+									if(res.json.hasOwnProperty('location')){
+										//導頁
+										location.href=res.json.location;
+										}//if end
+									}//if end
+								//反之為非json,且要將dom取代當前頁面的內容
+								else if(replaceCurrentPageToDomResponse==true){
+									//清空畫面
+									document.replaceChildren();
-									//導頁
+									//建立html
+									var html=document.createElement('html');
+									//建立head
+									var head=document.createElement('head');
+									//建立body
+									var body=document.createElement('body');
+									//將回應的dom放到body
+									body.append(res.dom);
+									//將head放到html裡面
+									html.append(head);
+									//將body放到html裡面
+									html.append(body);
+									//置換畫面為新的內榮
-									location.href=res.json.location;
+									document.replaceChildren(html);
 									}//if end
 								}//if end
 							});//function end
 						}//for end
+					//如果允許關閉選單
+					if(fakeScrollingList.mother.disallowClose==false){
-					//建立 close icon
+						//建立 close icon
-					var closeIcon = document.createElement('img');
+						var closeIcon = document.createElement('img');
-					//設置 close icon 的樣式
+						//設置 close icon 的樣式
-					closeIcon.style['position']='fixed';
+						closeIcon.style['position']='fixed';
-					closeIcon.style['top']='15%';
+						closeIcon.style['top']='15%';
-					closeIcon.style['left']='85%';
+						closeIcon.style['left']='85%';
-					closeIcon.style['width']='5%';
+						closeIcon.style['width']='5%';
-					closeIcon.style['min-width']='30px';
+						closeIcon.style['min-width']='30px';
-					closeIcon.style['max-width']='50px';
+						closeIcon.style['max-width']='50px';
-					closeIcon.style['cursor']='pointer';
+						closeIcon.style['cursor']='pointer';
-					//設置 close icon img 的 src 屬性
+						//設置 close icon img 的 src 屬性
-					closeIcon.src=fakeScrollingList.mother.closeIcon;
+						closeIcon.src=fakeScrollingList.mother.closeIcon;
-					//設置 close icon img 的id
+						//設置 close icon img 的id
-					closeIcon.id='qbpwcfScrollingListCloseIcon';
+						closeIcon.id='qbpwcfScrollingListCloseIcon';
-					//取得 scrollingList 的 root div
+						//取得 scrollingList 的 root div
-					var slrd=document.getElementById('scrollingListRootDiv');
+						var slrd=document.getElementById('scrollingListRootDiv');
-					//將 close icon outer div 放到 scrollingList 的 root div 裡面
+						//將 close icon 放到 scrollingList 的 root div 裡面
-					document.getElementById('scrollingListRootDiv').appendChild(closeIcon);
+						document.getElementById('scrollingListRootDiv').appendChild(closeIcon);
-					//取得 close icon img
+						//取得 close icon img
-					var closeIcon=document.getElementById('qbpwcfScrollingListCloseIcon');
+						var closeIcon=document.getElementById('qbpwcfScrollingListCloseIcon');
-					//新增 close icon img 的點擊事件
+						//新增 close icon img 的點擊事件
-					closeIcon.addEventListener('click',function(){
+						closeIcon.addEventListener('click',function(){
-						//取得要移除 scrolling list 的 div
+							//取得要移除 scrolling list 的 div
-						var divToDel=document.getElementById('scrollingListRootDiv');
+							var divToDel=document.getElementById('scrollingListRootDiv');
-						//移除 scrolling list div
+							//移除 scrolling list div
-						divToDel.remove();
+							divToDel.remove();
-						//復原下拉式選單
+							//復原下拉式選單
-						inputSelect.style.opacity='unset';
+							inputSelect.style.opacity='unset';
-						});//addEventLister
+							});//addEventLister
-					//如果有啟用且只有一個選項則自動點擊最後一個選項
+						//如果有啟用且只有一個選項則自動點擊最後一個選項
-					if(fakeScrollingList.mother.sendOnClickWhenOnly2options && opLen===2){
+						if(fakeScrollingList.mother.sendOnClickWhenOnly2options && opLen===2){
-						//debug
+							//debug
-						console.log('try auto click last option');
+							console.log('try auto click last option');
-						//取得選項們的外框
+							//取得選項們的外框
-						var optionOutBoderDiv=document.querySelector('div#scrollingListRootDiv').children[0].children[0];
+							var optionOutBoderDiv=document.querySelector('div#scrollingListRootDiv').children[0].children[0];
-						//點擊最後一個選項
+							//點擊最後一個選項
-						optionOutBoderDiv.children[1].click();
+							optionOutBoderDiv.children[1].click();
+							}//if end
 						}//if end
 					});//function end
+				//如果要自動觸發
+				if(this.autoStart===true){
+					//觸發之
+					this.targetEle.click();
+					}//if end
-				}//function end
+				}//function active end
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
 		/*
 		設置 window.qbpwcf.ajaxP 函數
 		說明：
 		傳送ajax,指定傳送前要做什麼事情,然後回傳一個Promise.
+		await完成後的回傳結果為一物件(res).
+		res.dom,content of html which can be directly access.
+		res.json,json string
+		res.compliantJson,true代表合法的json;false代表不合法的.
+		res.text,plain test
 		參數：
 		params={};
 		params.method='POST' or 'GET' or 'HEAD' or 'OPTIONS';
 		params.headers={name:value};
 		params.url='url to request';
 						//debug
 						if(window.debug){
 							//提示傳送 ajax 前
 							console.log('before sand request...');
 							}//if end
 						};//funcitno end
 					}//if end
 				//檢查參數 params.data
 				if(params.data===undefined){
 					//初始化變數q
 					key1='q';
 					//初始化變數q的數值內容為'test by qbpwcf'
 					v1='test by qbpwcf';
 					//初始要傳送的參數
 					params.data=key1+'='+encodeURIComponent(v1);
 					}//if end
 				//如果支援 ajax
 				if(window.XMLHttpRequest){
 					// code for IE7+, Firefox, Chrome, Opera, Safari
 					var xmlhttp=new XMLHttpRequest();
 								//記錄錯誤訊息
 								res.json=exception;
+								}
+							//設置回應內容為合規的json
+							res.compliantJson=true;
+							//如果json的回應有name屬性
+							if(res.json.hasOwnProperty('name')){
+								//如果是 SyntaxError
+								if(res.json.name=='SyntaxError'){
+									//設置回應內容不為合規的json
+									res.compliantJson=false;
+									}//if end
+								}//if end
 							//receive
 							resolve(res);
 							}//if end
 						//傳送要求
 						xmlhttp.send(params.data);
 						}//if end
 					//反之data存在資料
 					else{
 						//傳送要求,POST為空
 						xmlhttp.send();
 						}//else end
 					}//if end
 				//反之是 GET 或 HEAD 或 OPTIONS
 				else if(params.method==='GET' || params.method==='HEAD' || params.method==='OPTIONS'){
 					//直接傳送要求
 					xmlhttp.send();
 					}//else end
 				});//Promise end
 			}//function window.qbpwcf.ajaxP end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 			//如果變數 element 不是 object 或 thumbUrl 跟 oriImg 其中一個不是 string
 			if( typeof(element)!=='object' || typeof(thumbUrl)!=='string' || typeof(oriImgUrl)!=='string' ){
 				//提示錯誤訊息
 				console.error('element is not a object');
 				//提示錯誤訊息
 				console.error('thumbUrl is not a string');
 				//提示錯誤訊息
 				console.error('oriImgUrl is not a string');
 				}//if end
 			//載入低解析度的圖片,將Promise儲存到res裡面
 			var res = await fetch(thumbUrl);
 			//如果沒有讀取成功
 			if(await res.status!==200){
 				//回傳失敗
 				return false;
 			params.url=this.url;
 			params.preAc=function(){
 				//取得 xmlhttp物件
 				var xmlhttp=this;
 				//設置過了 params.timeout 秒中後要做的事情.
 				params.checkServiceBlockTimeout=setTimeout(function(){
 					//中斷連線
 					xmlhttp.abort();
 				//隱藏 iframe
 				iframe.style.display='none';
 				//放置 iframe
 				document.body.appendChild(iframe);
 				//取得 iframe 的 document
 				var documentInIframe=iframe.contentDocument;
 				//讓 iframe 開始接收內容
 				//讓 iframe 接收指定內容
 				documentInIframe.write(dom.outerHTML);
 				//讓 iframe 結束接收內容
 				documentInIframe.close();
 				});//回傳 Promise end
 			}//window.qbpwcf.slide.loadDom end
 		//將多個 dom 給 ifrmae 執行完後,回傳其 document 集合
 					//記錄排序順序
 					iframeDoc.order=key;
 					//儲存
 					iframeDocs.push(iframeDoc);
 					//如果每個都解析成 dom 了
 					if(iframeDocs.length===doms.length){
 						//初始化要尋找的索引
 		$conf["javaScript::toScript"]["script"]=
+		"
 		params={};
 		params.url='".$conf["url"]."';
 		".$countdownSec."
-		window.redirectURL.call(this,params);
+		window.qbpwcf.redirectURL.call(this,params);
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 	#$conf["resDiv"]="";
 	#參考資料:
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function postDataAttr(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 if1.contentDocument.getElementById('run');
 #設置過了3秒中後要做的事情.
 setTimeout(function()
+{
-	do something...
+	do something
 },3000);
 #新增網頁元素
 var node = document.createElement('li');                // Create a <li> node
 var textnode = document.createTextNode('Water');        // Create a text node
 //狀態1代表正常可通訊
 conn.readyState=1;
 //建立與當連線成功後
 conn.onopen = function(e)
 {
+}
 //當有收到訊息時
 conn.onmessage = function(e)
 {
 	//將訊息顯現在console
 	console.log(e.data);
 	//傳送訊息
 	conn.send('mag');
+}
 //當連線斷開後, 每秒重新嘗試一次.
 conn.onclose = function(e)
 {
 	//指定1秒刷新一次
 	setTimeout('window.webSock.connWebSock.call(this)',1000);
+}
 //所有內容跑完之後再執行的事件
 //產生uuid
 crypto.randomUUID();
 //參考資料 https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
+置換網頁整體內容 - start
+//清空當前頁面的dom
+document.replaceChildren();
+//建立html
+var html=document.createElement('html');
+//建立head
+var head=document.createElement('head');
+//建立body
+var body=document.createElement('body');
+//將回應的dom放到body,res.dom為透過ajax取得的回應內容.
+body.append(res.dom);
+//將head放到html裡面
+html.append(head);
+//將body放到html裡面
+html.append(body);
+//置換畫面為新的內榮
+document.replaceChildren(html);
+置換網頁整體內容 - en
+//參考資料
+//https://developer.mozilla.org/en-US/docs/Web/API/Document/replaceChildren
 */
 ?>

Subversion Repositories php-qbpwcf

(root)/trunk/usr/lib64/qbpwcf/javaScript.php – Rev 165 → 174