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

 <?php
 /*
 	QBPWCF, Quick Build PHP website Component base on Fedora Linux.
-    Copyright (C) 2015~2024 Min-Jhin,Chen
+    Copyright (C) 2014~2025 MIN ZHI, CHEN
     This file is part of QBPWCF.
     QBPWCF is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
 				#函式說明:
 				#將檔案的位置名稱變成網址,也可以取得檔案位於伺服器上檔案系統的絕對位置.
 				#回傳結果:
 				#$result["status"],"true"爲建立成功,"false"爲建立失敗.
 				#$result["error"],錯誤訊息陣列.
 				#$result["function"],函數名稱.
 				#$result["argu"],使用的參數.
 				#$result["content"],網址,若是在命令列執行,則為"null".
 				#$result["webPathFromRoot"],相對於網頁根目錄的路徑.
 				#$result["fileSystemAbsoulutePosition"],針對伺服器端的絕對位置，亦即從網頁「document_root」目錄開始的路徑.
 				#必填參數:
 					#回傳結果
 					return $result;
 					}#if end
 				#用成網路位置
 				$conf["jsPosition"]=$getInternetAddressV2["content"];
 				#檢查要匯入的js檔案是否存在
 				#函式說明:檢查多個檔案與資料夾是否存在.
 				#回傳結果:
 				#$result["status"],執行正常與否,"true"代表正常,"false"代表不正常.
 				#$result["error"],錯誤訊息陣列.
 				#參考資料來源：
 				#http://php.net/manual/en/function.file-exists.php
 				#http://php.net/manual/en/control-structures.foreach.php
 				$checkMultiFileExist=fileAccess::checkMultiFileExist($conf["fileAccess::checkMultiFileExist"]);
 				unset($conf["fileAccess::checkMultiFileExist"]);
 				#debug
 				#var_dump($checkMultiFileExist);
 				#如果檢查要匯入的js檔案失敗
 				if($checkMultiFileExist["status"]=="false"){
 					#設置錯誤狀態
 					$result["status"]="false";
 					#設置沒有找到 js 檔案
 					$result["founded"]="false";
 					#如果不允許 server 端找不到 js 檔案
 					if($conf["allowNotExist"]==="false"){
 						#設置錯誤狀態
 						$result["status"]="false";
 						#設置錯誤提示
 						$result["error"][]="要匯入的js檔案「".$checkMultiFileExist["varName"][0]."」不存在";
 		#debug
 		#var_dump($result);
 		#如果有是找到js檔案的識別
 		if(isset($result["founded"])){
 			#如果找不到js檔案,且沒有要求也要輸出匯入js的標籤
 			if( $result["founded"]==="false" && $conf["importWhenExist"]==="true" ){
 				#清空匯入js的標籤
 				$conf["jsPosition"]="";
 				}#if end
 			}#if end
 		#設置要回傳javascript語法
 		$result["content"]="<script type=\"text/javascript\" ".$conf["jsPosition"]." >";
 	#$result["function"],當前執行的函數名稱
 	#必填參數:
 	#$conf["alertSentence"],字串,爲要彈出式視窗的內容,"\\n"代表換行.
 	$conf["alertSentence"]="";
 	#可省略參數:
 	#無.
 	#參考資料:
 	#無.
 	#備註:
 	#無.
 	*/
 			#函式說明:
 			#將檔案的位置名稱變成網址,也可以取得檔案位於伺服器上檔案系統的絕對位置.
 			#回傳結果:
 			#$result["status"],"true"爲建立成功,"false"爲建立失敗.
 			#$result["error"],錯誤訊息陣列.
 			#$result["function"],函數名稱.
 			#$result["argu"],使用的參數.
 			#$result["content"],網址,若是在命令列執行,則為"null".
 			#$result["webPathFromRoot"],相對於網頁根目錄的路徑.
 			#$result["fileSystemAbsoulutePosition"],針對伺服器端的絕對位置，亦即從網頁「document_root」目錄開始的路徑.
 			#$result["fileSystemRelativePosition"],針對伺服器檔案系統的相對位置.
 			$getInternetAddressV2=fileAccess::getInternetAddressV2($conf["fileAccess::getInternetAddressV2"]);
 			unset($conf["fileAccess::getInternetAddressV2"]);
 			#如果執行失敗
 			if($getInternetAddressV2["status"]==="false"){
 				#設置執行不正常
 				$result["status"]="false";
 				#設置錯誤訊息
 				$result["error"]=$getInternetAddressV2;
 				#回傳結果
 				return $result;
 				}#if end
 			#取得網頁位置
 			$jsLocation=$getInternetAddressV2["content"];
 			#var_dump($jsLocation);
 			#函式說明:
 			}#if end
 		#如果不要script標籤
 		if($conf["noScriptTag"]==="true"){
 			#如果存在 $conf["globalJs"]
 			if(isset($conf["globalJs"])){
 				#針對每個全域js
 				foreach($conf["globalJs"] as $jsSection){
 					#取得javaScript開始的語法
 					$result["content"]=$result["content"].$jsSection;
 					}#foreach end
 				}#if end
 			#如果存在 $conf["jsFunciton"]
 			if(isset($conf["jsFunciton"])){
 				#針對每個js函式
 				foreach($conf["jsFunciton"] as $jsSection){
 					#取得javaScript開始的語法
 					$result["content"]=$result["content"].$jsSection;
 					}#foreach end
 				}#if end
 			#如果 $conf["onReady"] 為 "true"
 			if($conf["onReady"]==="true"){
 				#用ready條件包住要執行的script內容
 				$conf["script"]=
 				#串接要執行的script
 				$result["content"]=$result["content"].$conf["script"];
 				}#if end
 			}#if end
 		#反之
 		else{
 			#javaScript開始
 			$conf["javaScript"]["start"]["include"]="false";#是否要匯入外部js庫。"true"爲要匯入；"false"爲沒有要匯入。
 			#$conf["fileArgu"],字串,php變數__FILE__的內容,亦即該檔案在檔案系統的絕對路徑,請與參數"jsPosition"一起設置.
 			#$conf["javaScript"]["start"]["fileArgu"]=$conf["fileArgu"];
 			$javaScriptStart=javaScript::start($conf["javaScript"]["start"]);
 					$result["content"]=$result["content"].$jsFunc;
 					}#foreach end
 				}#if end
 			#如果 $conf["onReady"] 為 "true"
 			if($conf["onReady"]==="true"){
 				#用ready條件包住要執行的script內容
 				$conf["script"]=
 				}#elsd end
 			#串接 <script>
 			$result["content"]=$result["content"].javaScript::end();
 			}#else end
 		#設置執行正常
 		$result["status"]="true";
 			}#if end
 		#轉換 $conf["scriptTag"] 給 javaScript::addScriptTag 使用
 		if($conf["scriptTag"]==="true"){
 			$conf["scriptTag"]="false";
 			}#if end
 		else if($conf["scriptTag"]==="false"){
 			$conf["scriptTag"]="true";
 			}#if end
 		#to js
 		#函式說明:
 		#依據需要加上<script></script>標籤,並且可以指定要匯入的js檔案.
 			}#else end
 		#如果有指定要儲存到window中的變數
 		if(isset($conf["returnWindowVarName"])){
 			#設置儲存到指定的window中變數
 			$conf["returnWindowVarName"]="window.".$conf["returnWindowVarName"]."=";
 			}#if end
 		#反之
 		else{
 			#設置直接return
 			$conf["returnWindowVarName"]="return ";
 			}#else end
 		#開新視窗的js function
 		$js="
 			//open window functino ".$conf["function"]."
 			#回傳結果
 			return $result;
 			}#if end
 		#如果檢查不通過
 		if($checkArguments["passed"]==="false"){
 			#設置錯誤狀態
 			$result["status"]="false";
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//debug
 		console.log('override addEventListener');
 		//參考資料 https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-when-debugging-or-from-the-javascript
 		//override addEventListener, when not native code
 		if(Element.prototype.addEventListener.toString().includes('native code')!==true){
 			Element.prototype._addEventListener = Element.prototype.addEventListener;
 			Element.prototype.addEventListener = function(a,b,c){
 				this._addEventListener(a,b,c);
 				if(!this.eventListenerList) {
 					this.eventListenerList = {};
 					this.eventListenerList[a] = [];
+					}
 				this.eventListenerList[a].push(b);
 				};
 			}//if end
 		//debug
 		//console.log('add scrollingListMiddleEvent');
 		//新增當視窗大小改變時的事件
 		window.scrollingListMiddleEvent();
 		//托移的事件
 		window.dragEventHandler.func.call();
 		//如果沒有 window.qbpwcf
 		if(window.qbpwcf===undefined){
 			//初始化為空物件
 			window.qbpwcf={};
 			}//if end
 		//close Icon
 		window.qbpwcf.closeIcon='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpvc2I9Imh0dHA6Ly93d3cub3BlbnN3YXRjaGJvb2sub3JnL3VyaS8yMDA5L29zYiIKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjEwNS43ODE3Mm1tIgogICBoZWlnaHQ9IjEwNS4zNDM0NG1tIgogICB2aWV3Qm94PSIwIDAgMTA1Ljc4MTcyIDEwNS4zNDM0NCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnOCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45MitkZXZlbCB1bmtub3duIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjbG9zZUljb24uc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiI+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlkPSJsaW5lYXJHcmFkaWVudDQzMTUiCiAgICAgICBvc2I6cGFpbnQ9InNvbGlkIj4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6IzAwMDAwMDtzdG9wLW9wYWNpdHk6MTsiCiAgICAgICAgIG9mZnNldD0iMCIKICAgICAgICAgaWQ9InN0b3A0MzEzIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXI0MzkxIgogICAgICAgeD0iLTAuMDY4OTc3MTAzIgogICAgICAgd2lkdGg9IjEuMTM3OTU0MiIKICAgICAgIHk9Ii0wLjA3NTI5OTk5MyIKICAgICAgIGhlaWdodD0iMS4xNTA2Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIxLjAwNjI1NDMiCiAgICAgICAgIGlkPSJmZUdhdXNzaWFuQmx1cjQzOTMiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXI0NDM4IgogICAgICAgeD0iLTAuMDIyNjIyOTA0IgogICAgICAgd2lkdGg9IjEuMDQ1MjQ1OCIKICAgICAgIHk9Ii0wLjAyNTU1NTYxNCIKICAgICAgIGhlaWdodD0iMS4wNTExMTEyIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIwLjIyMTcwNjAxIgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI0NDQwIiAvPgogICAgPC9maWx0ZXI+CiAgICA8ZmlsdGVyCiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiCiAgICAgICBpZD0iZmlsdGVyNDQ0NiIKICAgICAgIHg9Ii0wLjAyMzIzMjg0NyIKICAgICAgIHdpZHRoPSIxLjA0NjQ2NTgiCiAgICAgICB5PSItMC4wMjQ4MTk1NDUiCiAgICAgICBoZWlnaHQ9IjEuMDQ5NjM5MSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMC4yMjIwOTQyOCIKICAgICAgICAgaWQ9ImZlR2F1c3NpYW5CbHVyNDQ0OCIgLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMS40IgogICAgIGlua3NjYXBlOmN4PSIxMzAuNTY4NjgiCiAgICAgaW5rc2NhcGU6Y3k9IjIwMS4zNDg0NSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzQ0ODgiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTYwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI4MzYiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgc3R5bGU9ImRpc3BsYXk6aW5saW5lIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MC4wNTQwMzQsLTg5LjA0MzUyMikiPgogICAgPGcKICAgICAgIGlkPSJnNDQ4OCIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDIuNjU1MDQ0MywwLDAsMi44NTQ2OTA3LC0xMTAuOTk1MTgsLTMyNi45MjY1MikiPgogICAgICA8ZWxsaXBzZQogICAgICAgICByeT0iMTYuMDM1OTI3IgogICAgICAgICByeD0iMTcuNTA1ODg0IgogICAgICAgICBjeT0iMTY0LjE2NTUxIgogICAgICAgICBjeD0iODAuNTc4NzIiCiAgICAgICAgIGlkPSJwYXRoMzQ3NCIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MC4zO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC4yNjQ5OTk5OTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO2ZpbHRlcjp1cmwoI2ZpbHRlcjQzOTEpO2ltYWdlLXJlbmRlcmluZzphdXRvIiAvPgogICAgICA8cmVjdAogICAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNDIuODA4OTU1KSIKICAgICAgICAgcnk9IjAiCiAgICAgICAgIHk9IjE3NC41NTY0OSIKICAgICAgICAgeD0iLTY3LjM5ODc1OCIKICAgICAgICAgaGVpZ2h0PSIyLjE1MjIwNjQiCiAgICAgICAgIHdpZHRoPSIyOS4yNzk2NDgiCiAgICAgICAgIGlkPSJyZWN0NDQxMyIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmZmMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjA7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtmaWx0ZXI6dXJsKCNmaWx0ZXI0NDQ2KSIgLz4KICAgICAgPHJlY3QKICAgICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTEzOS4wMzQ0MikiCiAgICAgICAgIHJ5PSIwIgogICAgICAgICB5PSItNzMuMDUwOTQ5IgogICAgICAgICB4PSItMTgyLjk2MjUyIgogICAgICAgICBoZWlnaHQ9IjIuMTUyMjA2NCIKICAgICAgICAgd2lkdGg9IjI5LjI3OTY0OCIKICAgICAgICAgaWQ9InJlY3Q0NDEzLTMiCiAgICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZjAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7ZmlsdGVyOnVybCgjZmlsdGVyNDQzOCkiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K';
 			//如果是火狐瀏覽器
 			if(navigator.userAgent.includes('Firefox')){
 				//設置選項內框與選單外框的高度，已便讓選項列表上下置中於選單外框
 				rootDiv.children[0].children[0].style.marginTop=marginTop;
 				}//if end
 			}//function scrollingListMiddleFunction end
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 			//初始化 window qbpwcf 物件
 			window.qbpwcf={};
 			}//if end
 		/*
 		涵式說明:
 		將同 data-form-id 的input/textarea內容用表單的方式傳送出去(POST)
 		params.ele, 要綁定事件的元素.
 		params.formId, 用來識別表單群體的名稱.
 		params.url, 表單要傳送到的地方.
 		params.method, GET or POST.
 		*/
 		window.qbpwcf.sendByDataFormId=function(params){
 			//如果沒有ele
 			if(params.ele===undefined){
 				//結束執行
 				return;
 				}//if end
 			//取得要取得的ele
 			var ele=params.ele;
 			//如果沒有formId
 			if(params.formId===undefined){
 				//預設為 'qbpwcf_form'
 				params.formId='qbpwcf_form';
 				}//if end
 			//取得要取得的formId
 			var formId=params.formId;
 			//如果沒有formId
 			if(params.url===undefined){
 				//預設為當前網址
 				params.url=location.href;
 				}//if end
 			//取得表單要傳送到的地方
 			var url=params.url;
 			//如果沒有method
 			if(params.method===undefined){
 				//預設為post
 				params.method='POST';
 				}//if end
 			//限定為post
 			var method=params.method;
 			//綁定點擊事件
 			params.ele.addEventListener('click',async function(event){
 				//如果沒有鎖頭
 				if(this.dataset.lock===undefined){
 					//設置為上鎖
 					this.dataset.lock==='false';
 					}//if end
 				//如果已經上鎖了
 				if(this.dataset.lock==='true'){
 					//結束執行
 					return false;
 					}//if end
 				//上鎖
 				this.dataset.lock='true';
 				//取得所有 inputs
 				var dataFormId='data-form-id=\"'+formId+'\"';
 				dataFormId='input['+dataFormId+']';
 				eval('var inputDataFormId=\''+dataFormId+'\'');
 				var inputs=document.querySelectorAll(inputDataFormId);
 				//取得所有 textarea
 				var dataFormId='data-form-id=\"'+formId+'\"';
 				dataFormId='textarea['+dataFormId+']';
 				eval('var textareaDataFormId=\''+dataFormId+'\'');
 				var textareas=document.querySelectorAll(textareaDataFormId);
 				//debug
 				console.log(inputs,textareas);
 				//初始化查詢的字串
 				var queryStr='';
 				//如果有input
 				if(inputs.length!==0){
 					//針對每個input
 					for(var i=0;i<inputs.length;i++){
 						//如果不是空的
 						if(queryStr!==''){
 							//串接'&'
 							queryStr=queryStr+'&';
 							}//if end
 						//加上查詢內容
 						queryStr=queryStr+inputs[i].name+'='+encodeURIComponent(inputs[i].value);
 						}//for end
 					}//if end
 				//如果有textarea
 				if(textareas.length!==0){
 					//針對每個textarea
 					for(var i=0;i<textareas.length;i++){
 						//如果不是空的
 						if(queryStr!==''){
 							//串接'&'
 							queryStr=queryStr+'&';
 							}//if end
 						//加上查詢內容
 						queryStr=queryStr+textareas[i].name+'='+encodeURIComponent(textareas[i].value);
 						}//for end
 					}//if end
 				//初始化查詢的字串
 				console.log('queryStr='+queryStr);
 				//如果沒有任何input
 				if(inputs.length===0  && textareas.length===0){
 					//結束執行
 					return;
 					}//if end
 				//debug
 				console.log('params.method='+params.method);
 				console.log('params.url='+params.url);
 				//傳送表單
 				/*
 				設置 window.qbpwcf.ajaxP 函數
 				說明：
 				傳送ajax,指定傳送前要做什麼事情,然後回傳一個Promise.
 				ajaxP_params={};
 				ajaxP_params.data=queryStr;
 				ajaxP_params.method=params.method;
 				ajaxP_params.url=params.url;
 				var res = await window.qbpwcf.ajaxP.call(this,ajaxP_params);
 				//debug
 				console.log(res);
 				//解鎖
 				this.dataset.lock='false';
 				});
+			}
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//如果 window.qbpwcf 不存在
 			//初始化 window qbpwcf 物件
 			window.qbpwcf={};
 			}//if end
 		//初始化物件
 		window.qbpwcf.postDataAttr={};
 		/*
 		函式說明:
 		設置點擊元素後會傳遞data屬性為名稱與其數值為表單數值給特定url,然後依照片段show到當前頁面.
 		參數說明:
 		element,要綁定事件的元素.
 		url,表單要傳送到的位置.
 		method,傳送的方法,有POST跟GET兩種
 		範例用法:
 		element=document.getElementsByClassName('quickDayLog')[0];
 		window.qbpwcf.postDataAttr.func.call(this,element,'logRes.php','POST','rootDiv');
 		*/
 		window.qbpwcf.postDataAttr.func=function(element,url,method,rootDiv){
 			//綁定事件到元素上
 			element.addEventListener('click',function(event){
 				//取得目標url
 				window.qbpwcf.postDataAttr.url=url;
 				//取得表單傳遞方式
 				window.qbpwcf.postDataAttr.method=method;
 				//取得抓取回應並要放置到哪個id的div裡面
 				window.qbpwcf.postDataAttr.rootDiv=rootDiv;
 				//初始化要傳送的表單物件
 				window.qbpwcf.postDataAttr.params={};
 				//取得元素的data
 				dataset=element.dataset;
 				//針對每個表單名稱
 				for(i=0;i<Object.keys(dataset).length;i++){
 					//取得表單的內容
 					eval('window.qbpwcf.postDataAttr.params.'+key+'='+val);
 					}//for end
 				//遞迴取得回應並放在特定div裡面
 				window.qbpwcf.tailAny.func.call(this,window.qbpwcf.postDataAttr.params,window.qbpwcf.postDataAttr.url,window.qbpwcf.postDataAttr.method,window.qbpwcf.postDataAttr.rootDiv);
 				});//function end
 			};
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
 		涵式說明:
 		統一處理托移事件
 		*/
 		// drag event handler start
 		window.dragEventHandler={};
 		//儲存被拖移的元素
 		window.dragEventHandler.dragged={};
 		//儲存被壓住的元素
 		window.dragEventHandler.dropped={};
 			color: white;
 			background: blue;
 			margin-bottom: 10px;
+			}
 		</style>
 		<div class='dropzone'>
 		  <div draggable='true'>
 		    This div is draggable
 		  </div>
 		</div>
+		<div class='dropzone'></div>
 		<div class='dropzone'></div>
-		<div class='dropzone'></div>
 		<div class='dropzone'></div>
 		*/
 		/*
 		處理被拖移元素壓住其他元素後的事件處理函式,宣告即可設定如何處理.
 		被壓住的元素
 		obj.dropped
 		window.dragEventHandler.handler=function(param){};
 		若不宣告則，如果被壓住的div有 'dropzone' 類別，才會動作.
 		*/
 		/*
 		參考資料:
 		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) {
 				});
 				//讓被托移的目標可以被被看到
 				event.dataTransfer.setData('text/plain',null);
 				// store a ref. on the dragged elem
 				window.dragEventHandler.dragged = event.target;
 				// make it half transparent
 				event.target.style.opacity = .5;
 				});
 			//在被托移物品上移動時.
 			/* events fired on the drop targets */
 			document.addEventListener('dragover', function(event) {
 				// prevent default to allow drop
 				event.preventDefault();
 				});
 			//移到別的元素時觸發
 			document.addEventListener('dragenter', function(event) {
 				// highlight potential drop target when the draggable element enters it
 				if (event.target.className == 'dropzone'){
 					event.target.style.opacity = .5;
+					}
 				});
 			//移開移動到的元素時觸發
 			document.addEventListener('dragleave', function(event) {
 				// unhighlight of potential drop target when the draggable element leaves it
 				if (event.target.className == 'dropzone') {
 					//設置不透明
 					event.target.style.opacity = 1.0;
+					}
 				});
 			//放開移動中的元素時觸發
 			document.addEventListener('drop', function(event) {
 				// prevent default action (open as link for some elements)
 				event.preventDefault();
 				// 取得被壓的元素
 				window.dragEventHandler.dropped=event.target
 				// move dragged elem to the selected drop target
 				if (event.target.className == 'dropzone') {
 					//設置不透明
 					event.target.style.opacity = 1.0;
+			  		}
 				});
+			}
 			//托移結束
 			document.addEventListener('dragend', function(event) {
 				// reset the transparency
 				event.target.style.opacity = '';
 				//初始化要回傳的元素
 				obj={};
 				//設置被托移的元素
 				obj.dragged=window.dragEventHandler.dragged;
 				//設置被壓住的元素
 				obj.dropped=window.dragEventHandler.dropped;
 				//debug
 				console.log(obj);
 				if(window.dragEventHandler.handler!==undefined){
 					if(typeof(window.dragEventHandler.handler)==='function'){
 						window.dragEventHandler.handler.call(this,obj);
+						}
+					}
 				//採用預設的做法
 				else{
 					//被壓住的不是div就停止
 					if(window.dragEventHandler.dropped.tagName!=='DIV'){
 						return false;
+						}
 					//目標div有幾個類別就執行幾次
 					for(i=0;i<window.dragEventHandler.dropped.classList.length;i++){
 						//如果被壓住的div有 'dropzone' 類別，才會動作.
 						if(window.dragEventHandler.dropped.classList[i]==='dropzone'){
 							//覆蓋到目標元素
 							window.dragEventHandler.dropped.innerHTML=window.dragEventHandler.dragged.outerHTML;
 							//移除被移開的元素
 							window.dragEventHandler.dragged.innerHTML='';
 							//結束迴圈
 							break;
+							}
+						}
+					}
 				});
 				// drag event handler end
 		導頁的函式:
 		*/
 		//如果沒有 window.qbpwcf.redirectURL
 		if(window.qbpwcf.redirectURL===undefined){
 			//宣告 window.qbpwcf.`redirectURL 為空物件
 			window.qbpwcf.redirectURL={};
 			}//if end
 			//反之
 			else{
 				//設置過了 params.countdownSec 秒後要做的事情.
 				setTimeout(function(){
 					//導頁到 params.url
 					window.location.href=params.url;
 					},params.countdownSec*1000);
 				}//else end
 			}//if end
 			}//if end
 		//初始化 window.tailAny 物件
 		window.qbpwcf.tailAny={};
 		//初始化 window.qbpwcf.tailAny.continue 為 true,代表遞迴執行.
 		window.qbpwcf.tailAny.continue=true;
 		//初始化 將結果輸出到畫面上的函式
 		//res，為ajax抓到的結果json.
 		//rootDivId,為回應要放到id為rootDivId的div裡面.
 		window.qbpwcf.tailAny.outputFunc=function(res,rootDivId){
 			//針對每個輸出的行
 			for(var i=0;i<res.lines.length;i++){
 				//如果內容不為空
 				if(res.lines[i]!==''){
 					//set output line
 					div=document.createElement('div');
 					text=document.createTextNode(res.lines[i]);
 					div.appendChild(text);
 					}//if end
 				//反之
 				else{
 					//set output line
 					div=document.createElement('div');
 					//建立換行語法
 					p=document.createElement('p');
 					//放置換行語法
 					div.appendChild(p);
 					}//else end
 				//show output line
 				rootDiv=document.getElementById(xmlhttp.mother.rootDivId);
 				rootDiv.prepend(div);
 				}//for end
 			}//function window.qbpwcf.tailAny.outputFunc end
 		//初始化 window.tailAny 函式
 		window.qbpwcf.tailAny.func=function(params,url,method,resRootDivId){
 			//取得使用的參數 params
 			this.params=params;
 			//初始化儲存新的get and post變數
 			this.newParams='';
 			//初始化要查尋的 url
 			this.url=url;
 			//取得method
 			this.method=method;
 			//初始化持續執行
 			this.continue=window.qbpwcf.tailAny.continue;
 			//放置回應的 div id 字串
 			this.rootDivId=resRootDivId;
 			//取得query參數長度
 			pl=Object.keys(params).length;
 			//針對每隔 query 參數
 			for(var i=0;i<pl;i++){
 				//&符號字串
 				var andStr='&';
 				//如果是第一個 query 參數
 				if(i===0){
 					//&符號字串
 					andStr=''
 					}//if end
 				//串接查詢字串,並 url encode
 				this.newParams=this.newParams+andStr+encodeURIComponent(Object.keys(params)[i])+'='+encodeURIComponent(Object.values(params)[i]);
 				}//for end
 			//如果是 GET 方法
 			if(method==='GET'){
 				//設置查詢的url
 				this.url=this.url+'?'+this.newParams;
 				}//if end
 			xmlhttp=new XMLHttpRequest();
 			xmlhttp.mother=this;
 			xmlhttp.responseType='json';
 			xmlhttp.open(method,this.url,true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//將結果放到畫面上
 					window.qbpwcf.tailAny.outputFunc.call(this,res,xmlhttp.mother.rootDivId);
 					//如果有新的識別欄位與數值
 					if(res.id!==undefined){
 						//取消舊的識別欄位
 						xmlhttp.mother.params={};
 						//如果有新的識別欄位
 						for(i=0;i<Object.keys(res.id).length;i++){
 							//取得識別欄位
 							}//for end
 						}//if end
 					//如果要繼續
 					if(xmlhttp.mother.continue){
 						//遞迴
 						window.qbpwcf.tailAny.func(xmlhttp.mother.params,xmlhttp.mother.url,xmlhttp.mother.method,xmlhttp.mother.rootDivId);
 						}//if end
 					//反之要暫停
 					else{
 						//設置無限等待
 						var intervalTail = window.setInterval(function(){
 							//console.log(window.qbpwcf.tailAny.continue);
 							//如果要繼續了
 							if(xmlhttp.mother.continue){
 								//清除無限等待
 								clearInterval(intervalTail);
 								//遞迴
 								window.qbpwcf.tailAny.func(xmlhttp.mother.params,xmlhttp.mother.url,xmlhttp.mother.method,xmlhttp.mother.rootDivId);
 								}//if end
 							},1000);
 						}//else end
 					}//if end
 				}//function end
 			//如果是 GET 方法
 			if(method==='GET'){
 				//不夾帶內容
 				xmlhttp.send();
 				}//if end
 			//反之是 POST 方法
 			else{
 				//夾帶內容
 				xmlhttp.send(this.newParams);
 				}//else end
 			}//function end
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//如果未設定 window.qbpwcf 物件
 		window.qbpwcf.gatDataDynamic.func.call(this,element,8,params,'/logRes.php','POST','rootDiv');
 		*/
 		//設置當前函式的變數
 		window.qbpwcf.gatDataDynamic.func=function(element,length,params,url,method,rootDiv){
 			//debug
 			//console.log(element,length,params,url,method,rootDiv);
 			//儲存內容長度要為多少
 			window.qbpwcf.gatDataDynamic.length=length;
 			//儲存要傳遞的條件
 			window.qbpwcf.gatDataDynamic.params=params;
 			//儲存回應的div id
 			window.qbpwcf.gatDataDynamic.rootDiv=rootDiv;
 			//初始化暫存的物件
 			window.qbpwcf.gatDataDynamic.tmp={};
 			//初始化暫存最新表單數值的長度
 			window.qbpwcf.gatDataDynamic.tmp.latestValueLength=0;
 			//綁定事件到該元素身上
 			element.addEventListener('keyup',function(event){
 				//取得使用的參數名稱
 				paramName=Object.keys(window.qbpwcf.gatDataDynamic.params)[0];
 				//取得事件觸發後的參數數值
 				eval('window.qbpwcf.gatDataDynamic.params.'+paramName+'=\''+event.target.value+'\'');
 				//誤觸
 				if(event.isComposing || event.keyCode === 229) {
 					//取消執行
 					return false;
  					}//if end
 				//如果長度跟之前比沒有變化,且按下的不為Enter鍵
 				if(event.target.value.length===window.qbpwcf.gatDataDynamic.tmp.latestValueLength && event.keyCode !== 13){
 					//取消執行
 					return false;
 					}//if end
 				//反之長度有變化
 				else{
 					//更新最新變化後的數值長度
 					window.qbpwcf.gatDataDynamic.tmp.latestValueLength=event.target.value.length;
 					}//else end
 				//如果長度不對
 				if(event.target.value.length!==window.qbpwcf.gatDataDynamic.length){
 					//取消執行
 					return false;
 			name:'console.log',
 			params:'debug',
 		};
 		window.qbpwcf.sequenceQuery.func.call(this,url,name,queue,callback);
 		*/
 		//設置當前函式的變數
 		window.qbpwcf.sequenceQuery.func=function(url,name,queue,callback){
 			//如果網址未指定
 			if(url===undefined){
 				//結束執行
 				return false;
 				}//if end
 			//save url to global
 			window.qbpwcf.sequenceQuery.url=url;
 			//save callback to global
 			window.qbpwcf.sequenceQuery.callback={};
 			window.qbpwcf.sequenceQuery.callback.name=callback.name;
 			window.qbpwcf.sequenceQuery.callback.params=callback.params;
 			//debug
 			//console.log(window.qbpwcf.sequenceQuery.callback);
 			//初始化參數
 			params={};
 			//設置參數
 			eval('params.'+name+'=queue');
 			//debug
 			//console.log(params);
 			//初始化參數 window.tailAny.params 字串
 			window.qbpwcf.sequenceQuery.params='';
 				//&符號字串
 				andStr='';
 				//如果參數目前不為空
 				if(window.qbpwcf.sequenceQuery.params!==''){
 					//&符號字串
 					andStr='\&';
 					}//if end
 				//串接查詢字串,並 url encode
 				window.qbpwcf.sequenceQuery.params=window.qbpwcf.sequenceQuery.params+andStr+encodeURIComponent(key)+'='+encodeURIComponent(eval('params.'+key));
 				});
 			//debug
 			//console.log(window.qbpwcf.sequenceQuery.params);
 			xmlhttp=new XMLHttpRequest();
 			xmlhttp.responseType='json';
 			xmlhttp.timeout=60000;
 			xmlhttp.open('POST',url,true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//debug
 					//console.log(res);
 					//如果執行失敗
 					if(res.status==='false'){
 						//結束執行
 						return false;
 						}//if end
 					//取得回應的內容
 					content=res.content;
 					//debug
 					//console.log(content);
 					//如果遇到null元素
 					if(content[0]==='null'){
 						//callback
 						eval(window.qbpwcf.sequenceQuery.callback.name+'.call(this,window.qbpwcf.sequenceQuery.callback.params)');
 						//結束執行
 						return true;
 						}//if end
 					//遞迴
 					window.qbpwcf.sequenceQuery.func.call(this,window.qbpwcf.sequenceQuery.url,window.qbpwcf.sequenceQuery.name,content,window.qbpwcf.sequenceQuery.callback);
 					}//if end
 				}//function end
 			//夾帶內容
 			xmlhttp.send(window.qbpwcf.sequenceQuery.params);
 			};
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 			}//if end
 		//設置 window.qbpwcf.modal 物件
 		window.qbpwcf.modal={};
 		//預設的 modal 標題是由 div 組成
 		window.qbpwcf.modal.title=document.createElement('div');
 		//預設的 modal 標題
 		window.qbpwcf.modal.title.innerText='Confirm window';
 		//預設的 modal 標題樣式
 		window.qbpwcf.modal.title.style.fontWeight='bold';
 		//預設的 modal 標題背景顏色
 		window.qbpwcf.modal.bgColor='#DDDDFF';
 		//預設的 modal 內文
 		window.qbpwcf.modal.content=document.createTextNode('Are you sure?');
 		//預設的 取消 按鈕內容
 		window.qbpwcf.modal.cancle='Cancel';
 		//預設的 取消 按鈕背景顏色
 		window.qbpwcf.modal.cancleBgColor='#FFDDDD';
 		//預設的取消按鈕點擊後要做的事情
 		window.qbpwcf.modal.cancelAction=function(e)
+		{
 			//delete whole confirm window
 			document.getElementById('qbpwcf.bgDiv').remove();
 			document.getElementById('qbpwcf.modalRootDiv').remove();
+		}
 		//預設的 確認 按鈕內容
 		window.qbpwcf.modal.confirm='Confirm';
 		//預設的 確認 按鈕背景顏色
 		window.qbpwcf.modal.confirmBgColor='#DDFFFF';
 		//預設的確認按鈕要做的事情
 		window.qbpwcf.modal.confirmAction=function(e)
+		{
 			alert('you click confirm');
 			window.qbpwcf.modal.cancelAction.call(this);
+		}
 		//modal的最寬高設定物件
 		window.qbpwcf.modal.RootDiv={};
 		//modal的寬度比例,1~99
 		window.qbpwcf.modal.RootDiv.width='80';
 		//modal距離高度的比例
 		window.qbpwcf.modal.RootDiv.top='10';
 		//建立顯示 qbpwcf modal 的函式
 		window.qbpwcf.modal.show=function(){
 			//建立背景div
 			bgDiv=document.createElement('div');
 			//設定樣式為全螢幕
 			bgDiv.style.width='100vw';
 			bgDiv.style.height='100vh';
 			bgDiv.style.backgroundColor='grey';
 			bgDiv.style.opacity='0.7';
 			bgDiv.style.position='fixed';
 			bgDiv.style.top='0px';
 			bgDiv.style.left='0px';
 			bgDiv.style.zIndex='10000';
 			//設定id
 			bgDiv.id='qbpwcf.bgDiv';
 			//確認視窗的div
 			modalRootDiv=document.createElement('div');
 			//設定id
 			modalRootDiv.id='qbpwcf.modalRootDiv';
 			//確認視窗的modal樣式
 			modalRootDiv.style.width=window.qbpwcf.modal.RootDiv.width+'vw';
 			modalRootDiv.style.top=window.qbpwcf.modal.RootDiv.top+'vh';
 			modalRootDiv.style.backgroundColor='white';
 			modalRootDiv.style.position='fixed';
 			modalRootDiv.style.left=((100-window.qbpwcf.modal.RootDiv.width)/2)+'vw';
 			modalRootDiv.style.zIndex='10001';
 			modalRootDiv.style.borderRadius='10px';
 			//modal title div
 			modalTitleDiv=document.createElement('div');
 			//set modal title content
 			modalTitleDiv.appendChild(window.qbpwcf.modal.title);
 			//set modal title bg color
 			modalTitleDiv.style.backgroundColor=window.qbpwcf.modal.bgColor;
 			//set modal title line height attr
 			modalTitleDiv.style.minHeight='20px';
 			//set modal title line height attr
 			modalTitleDiv.style.borderRadius='inherit';
 			//set modal title line height attr
 			modalTitleDiv.style.paddingLeft='5px';
 			//put modal title to modal root div
 			modalRootDiv.appendChild(modalTitleDiv);
 			//modal content div
 			modalContentDiv=document.createElement('div');
 			//set modal content text
 			modalContentDiv.appendChild(window.qbpwcf.modal.content);
 			//set modal content style
 			modalContentDiv.style.textAlign='center';
 			modalContentDiv.style.lineHeight=(window.qbpwcf.modal.RootDiv.height-10)+'vh';
 			//put modal content to modal root div
 			modalRootDiv.appendChild(modalContentDiv);
 			//modal bottom div
 			modalBottomDiv=document.createElement('div');
 			//set modal bottom line height
 			modalBottomDiv.style.lineHeight='6vh';
 			//set modal bptton text align style to right
 			modalBottomDiv.style.textAlign='right';
 			//set modal bottom 圓角
 			modalBottomDiv.style.borderRadius='5px';
 			//set modal bottom background color
 			modalBottomDiv.style.backgroundColor=modalRootDiv.style.backgroundColor;
 			//modal close button
 			cancleSpan=document.createElement('span');
 			//字體為粗體字
 			cancleSpan.style.fontWeight='bold';
 			//set model close button text content
 			cancleSpan.innerText=window.qbpwcf.modal.cancle;
 			//set cancle button background color
 			cancleSpan.style.backgroundColor=window.qbpwcf.modal.cancleBgColor;
 			//cancle button 元素間的距離
 			cancleSpan.style.marging='5vw';
 			//cancle button 元素的範圍
 			cancleSpan.style.padding='1vh';
 			//cancle button 不超出範圍
 			cancleSpan.style.position='relative';
 			cancleSpan.style.bottom='4vh';
 			//cancle button 圓角
 			cancleSpan.style.borderRadius='100px';
 			//cancle button pointer
 			cancleSpan.style.cursor='pointer';
 			//okSpan button right top & bottom
 			cancleSpan.style.top='0px';
 			cancleSpan.style.bottom='0px';
 			//設置點擊 cancle button 要做的事情.
 			cancleSpan.addEventListener('click',function(e)
+			{
 				window.qbpwcf.modal.cancelAction(e);
 			});
 			//modal ok button
 			okSpan=document.createElement('span');
 			//字體為粗體字
 			okSpan.style.fontWeight='bold';
 			//set model ok button text content
 			okSpan.innerText=window.qbpwcf.modal.confirm;
 			//set ok button background color
 			okSpan.style.backgroundColor=window.qbpwcf.modal.confirmBgColor;
 			//okSpan button 元素間的距離
 			okSpan.style.marginLeft='5vw';
 			okSpan.style.marginRight='5vw';
 			//okSpan button 元素的範圍
 			okSpan.style.padding='1vh';
 			//okSpan button 不超出範圍
 			okSpan.style.position='relative';
 			okSpan.style.bottom='4vh';
 			//okSpan button 圓角
 			okSpan.style.borderRadius='100px';
 			//okSpan button pointer
 			okSpan.style.cursor='pointer';
 			//okSpan button right top & bottom
 			okSpan.style.top='0px';
 			okSpan.style.bottom='0px';
 			//設置點擊 cancle button 要做的事情.
 			okSpan.addEventListener('click',function(e)
+			{
 				window.qbpwcf.modal.confirmAction(e);
 			});
 			//put cancle and ok button to modal bottom div
 			modalBottomDiv.appendChild(cancleSpan);
 			modalBottomDiv.appendChild(okSpan);
 			//put modal bottom div to modal root div
 			modalRootDiv.appendChild(modalBottomDiv);
 			//bgDiv放置到當前 window
 			document.body.appendChild(bgDiv);
 			//put root modal div to body
 			document.body.appendChild(modalRootDiv);
 			}//if end
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//如果未設定 window.qbpwcf 物件
 		if(window.qbpwcf===undefined){
 			//設置 window.qbpwcf.form  為空物件
 			window.qbpwcf.form={};
 			}//if end
 		/*
 		如果回覆的結果是json,且具有error屬性,則會進行需要手動消除的提示.
 		如果回覆的結果是json,且具有content性,則會進行會自動消失的提示.
 		如果回覆的結果是json,且具有location屬性,則會進行導頁.
 		window.qbpwcf.form.fakeScrollingList(),建構子,初始化fakeScrollingList.
 		window.qbpwcf.from.replaceCurrentPageToDomResponse,布林,預設為true,代表得到ajax回應為非json的dom時,會將其結果呈現到當前畫面;反之為false.
 		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.noActionOption={name:'Please select one option',value:''};
 			//布林值,預設為false,不啟用;反之為true代表點選元素後就直接送出最後一個選項的數值.啟用條件為window.qbpwcf.form.options只有一個元素.
 			this.sendOnClickWhenOnly2options=false;
 			//預設選擇了要傳送的項目後,會傳送表單,設置為true代表不會傳送表單只會將選項對應的數值內容交給 this.callback 陣列中的 callback 處理.
 			this.donotSendFrom=false;
 			//fake scrolling list 選單傳送出去時要加上的隱藏變陣列
 			this.hiddenVar=[];
 			//fake scrolling list 選單傳送出去時要加上的隱藏變數名稱與內容,預設為hiddenVarName數值為hiddenVarValue
 			this.hiddenVar.push({name:'hiddenVarName',value:'hidenVarValue'});
 			//fake scrolling list 選項的預設項目
 			this.defaultOption=this.noActionOption;
 			//fake scrolling list 的選項資訊
 			this.options=[];
 			//預設只有一個選擇了不會送出的選項
 			this.options.push(this.noActionOption);
 			//接受要求的頁面,預設為當前頁面
 			this.recPage=location.href;
 			//傳送表單時的選項對應的變數名稱,預設為'variable'.
 			this.sendVarName='variable';
 			//選項送出後,取得的回應要作為參數呼叫哪些 callback
 			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.redirectAfterClose=false;
 			//取得目標元素的涵式
 			this.getTarget=function(){
 				//如果有設置目標id
 				if(this.eleId!==''){
 					//設置 targetEle
 					this.targetEle=document.getElementById('this.eleId');
 					}//if end
 				//如果元素變數為空字串的話
 				if(this.targetEle===''){
 					//設置要自動觸發
 					this.autoStart=true;
 					}//if end
 				//反之元素如果是body
 				else if(this.targetEle.tagName==='BODY'){
 					//提示錯誤
 					console.error('Please define targetEle other than BODY');
 					//結束執行
 					return false;
 					}//if end
 				//如果要自動觸發
 				if(this.autoStart===true){
 					//建立div元素
 					this.targetEle=document.createElement('div');
 					}//if end
 				//存元素參考
 				var fakeScrollingList=this.targetEle;
 				//回傳點擊要觸發fakeScrollingList效果的元素
 				return fakeScrollingList;
 				}//function end
 			//啟用 fake scrolling list
 			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';
 					//設置最外層div的id
 					root.id='scrollingListRootDiv';
 					//移除重複的選單
 					if(document.getElementById('scrollingListRootDiv')!==null){
 						//移除之
 						document.getElementById('scrollingListRootDiv').remove();
 						}//if end
 					//設置最外層div的樣式
 					root.classList.add('__qbpwcf_scrollingListRootDiv');
 					//初始化記錄選擇的選項index
 					var selectedOptionIndex=0;
 					//針對每個選項
 					for(var i=0;i<opLen;i++){
 						//取得選項實際數值
 						var opVal=optionsInfo[i].value;
 						//取得選項顯示名稱
 						var opShow=optionsInfo[i].name;
 						//讓選項上下置中
 						opDiv.style.paddingTop='15px';
 						//如果是不可以點選的選項
 						if(fakeScrollingList.mother.noActionOption.name==opShow && fakeScrollingList.mother.noActionOption.value==opVal){
 							//設置選項div的class
 							opDiv.setAttribute('class','__qbpwcf_inputSelect');
 							}//if end
 						//反之為可以點選的選項
 						else{
 							//設置選項div的class
 							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){
 							//設置選項div底色為藍色
 							opDiv.style.backgroundColor='CCCCFF';
 							}//if end
 						//反之為奇數欄位
 						else{
 							//設置選項div底色為紅色
 							opDiv.style.backgroundColor='FFCCCC';
 							}//else end
 						//解析選項的資訊
 						var oriOptionsInfo=this.options;
 						//將文字放進選項的div
 						opDiv.appendChild(textnode);
 						//設置選項對應的實際數值
 						opDiv.dataset.val=opVal;
 						//設置選項對應的索引
 						opDiv.dataset.index=i;
 						//將選項放進為了上下左右置中的div
 						divForMiddle.appendChild(opDiv);
 						}//for end
 							//取得點擊到的選項名稱
 							var clickedName=clickedOption.innerHTML;
 							//如果不需要傳送表單
 							if(this.mother.donotSendFrom){
 								//取得要移除 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);
 									}//for end
 								//復原下拉式選單
 								inputSelect.style.opacity='unset';
 								//結束執行
 								return true;
 								}//if end
 							//如果不是不需要傳送數值的選項
 							if(fakeScrollingList.mother.noActionOption.name!==clickedName && fakeScrollingList.mother.noActionOption.value!==clickedValue){
 								//建立表單物件
 								var queryStr='';
 								//新增表單的名稱與對應的數值
 								queryStr=queryStr+fakeScrollingList.mother.sendVarName+'='+encodeURIComponent(clickedValue);
 								//針對每個隱藏的表單變數
 								for(var j=0;j<fakeScrollingList.mother.hiddenVar.length;j++){
 									//附加到要傳算的表單變數裡面
 									queryStr=queryStr+'&'+fakeScrollingList.mother.hiddenVar[j].name+'='+encodeURIComponent(fakeScrollingList.mother.hiddenVar[j].value);
 									}//for end
 								//復原下拉式選單
 								inputSelect.style.opacity='unset';
 								/*
 								設置 window.qbpwcf.ajaxP 函數
 								說明：
 								傳送ajax,指定傳送前要做什麼事情,然後回傳一個Promise.
 								參數：
 								*/
 								var params={};
 								params.method='POST';
 								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 func
 								for(var j=0;j<fakeScrollingList.mother.callback.length;j++){
 									//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屬性
 									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);
 									//置換畫面為新的內榮
 									document.replaceChildren(html);
 									}//if end
 								}//if end
 							});//function end
 						}//for end
 					//如果允許關閉選單
 					if(fakeScrollingList.mother.disallowClose==false){
 						//建立 close icon
 						var closeIcon = document.createElement('img');
 						//設置 close icon 的樣式
 						closeIcon.style['position']='fixed';
 							//移除 scrolling list div
 							divToDel.remove();
 							//復原下拉式選單
 							inputSelect.style.opacity='unset';
 							//如果有設置要到導頁到的位置
 							if(fakeScrollingList.mother.redirectAfterClose!=false){
 								//進行導頁
 								window.location.href=fakeScrollingList.mother.redirectAfterClose;
 								}//if end
 							});//addEventLister
 						//如果有啟用且只有一個選項則自動點擊最後一個選項
 						if(fakeScrollingList.mother.sendOnClickWhenOnly2options && opLen===2){
 							//debug
 							console.log('try auto click last option');
 							//取得選項們的外框
 							var optionOutBoderDiv=document.querySelector('div#scrollingListRootDiv').children[0].children[0];
 							//點擊最後一個選項
 							optionOutBoderDiv.children[1].click();
 							}//if end
 						}//if end
 					});//function end
 				//如果要自動觸發
 				if(this.autoStart===true){
 					//觸發之
 					this.targetEle.click();
 					}//if end
 				}//function active end
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//如果未設定 window.qbpwcf 物件
 			//設置 window.qbpwcf.ajax  為空物件
 			window.qbpwcf.ajax={};
 			}//if end
 		/*
 		設置 window.qbpwcf.ajax 函數
 		說明：
 		傳送ajax,指定傳送前要做什麼事情，傳送後要做什麼事情.
 		參數：
 		params.preAc='function name to call before send request';
 		params.aftAc='function name to call after send request,default params is data to send';
 		params.data='data to contain','key1=encodeURIComponent(val1)&key2=encodeURIComponent(val2)';if no data please use {};
 		*/
 		window.qbpwcf.ajax=function(params){
 			//檢查參數 params.method
 			if(params.method===undefined){
 				//初始化為 'POST'
 				params.method='POST';
 				}//if end
 			//檢查參數 params.url
 			if(params.url===undefined){
 				//初始化為當前頁面
 				params.url=location.href;
 				}//if end
 			//檢查參數 params.resType
 			if(params.resType===undefined){
 				//初始化為'json'
 				params.resType='json';
 				}//if end
 			//檢查參數 params.preAc
 			if(params.preAc===undefined){
 				//初始化為提示傳送 ajax 前
 				params.preAc=function(){
 					//debug
 					if(window.debug){
 						//提示傳送 ajax 前
 						console.log('before sand request...');
 						}//if end
 					};//funcitno end
 				}//if end
 			//檢查參數 params.aftAc
 			if(params.aftAc===undefined){
 				//初始化為提示傳送 ajax 後
 				params.aftAc=function(){
 					//debug
 					if(window.debug){
 						//提示傳送 ajax 後
 						console.log('after 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();
 					if(xmlhttp.status==200){
 						//得到回傳結果後要做的事情,參數為回傳的結果.
 						params.aftAc.call(this,xmlhttp.response);
 						}//if end
 					//反之回傳狀態碼
 					else{
 						//得到回傳結果後要做的事情,參數為回傳的結果.
 						params.aftAc.call(this,xmlhttp.status);
 						}//else end
 					}//if end
 				}//function end
 			//設定回傳的資料形態
 			xmlhttp.responseType=params.resType;
 			//如果是 'GET'
 			if(params.method==='GET'){
 				//如果data不為空物件
 				if(params.data.toString()!=='[object Object]'){
 					//加上get用的'?'
 					params.url=params.url+'?'+params.data;
 					}//if end
 				}//if end
 			//設定要用get傳送的數值
 			xmlhttp.open(params.method,params.url,true);
 			//如果有設置 header
 			if(params.headers!==undefined){
 				//儲存迴圈的次數
 				var count=Object.keys(params.headers).length;
 				//針對每個自己加的 header
 				for(var i=0;i<count;i++){
 					//加上自定的 header
 					xmlhttp.setRequestHeader(Object.keys(params.headers)[i],Object.values(params.headers)[i]);
 					}//for end
 				}//if end
 			//設定 header
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			//設定要求為ajax 的 header
 			xmlhttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
 			//如果是 'POST'
 			if(params.method==='POST'){
 				//如果data不為空物件
 				if(params.data.toString()!=='[object Object]'){
 					//傳送要求
 					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
 			}//function window.qbpwcf.ajax end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 			//設置 window.qbpwcf.ajax  為空物件
 			window.qbpwcf.ajaxP={};
 			}//if end
 		/*
 		設置 window.qbpwcf.ajaxP 函數
 		說明：
 		傳送ajax,指定傳送前要做什麼事情,然後回傳一個Promise.
 		await完成後的回傳結果為一物件(res).
 		參考資料:
 		https://eyesofkids.gitbooks.io/javascript-start-es6-promise/content/contents/ch11_snippets.html
 		https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
 		*/
 		window.qbpwcf.ajaxP=function(params){
 			return new Promise(function(resolve, reject){
 				//檢查參數 params.method
 				if(params.method===undefined){
 					//初始化為 'POST'
 					params.method='POST';
 					}//if end
 				//檢查參數 params.url
 				if(params.url===undefined){
 					//初始化為當前頁面
 					params.url=location.href;
 					}//if end
 				//檢查參數 params.preAc
 				if(params.preAc===undefined){
 					//初始化為提示傳送 ajax 前
 					params.preAc=function(){
 						//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();
 						//且response code為200
 						if(xmlhttp.status===200){
 							var tmp=document.createElement('div');
 							tmp.innerHTML=xmlhttp.response;
 							//初始化記錄結果的變數
 							var res={};
 							//記錄指定解讀格式的內容
 							res.dom=tmp;
 							//記錄得到的純文字內容
 							res.text=xmlhttp.responseText;
 							//嘗試
 							try{
 								//記錄json格式的內容
 								res.json=JSON.parse(res.text);
+								}
 							//抓取例外
 							catch(exception){
 								//記錄錯誤訊息
 								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
 						//反之回傳狀態碼
 						else{
 							//reject
 							reject(xmlhttp.status);
 							}//else end
 						}//if end
 					}//function end
 				//如果是 'GET'
 				if(params.method==='GET'){
 					//如果data不為空物件
 					if(params.data.toString()!=='[object Object]'){
 						//加上get用的'?'
 						params.url=params.url+'?'+params.data;
 						}//if end
 					}//if end
 				//設定要用get傳送的數值
 				xmlhttp.open(params.method,params.url,true);
 				//如果有設置 header
 				if(params.headers!==undefined){
 					//儲存迴圈的次數
 					var count=Object.keys(params.headers).length;
 					//針對每個自己加的 header
 					for(var i=0;i<count;i++){
 						//加上自定的 header
 						xmlhttp.setRequestHeader(Object.keys(params.headers)[i],Object.values(params.headers)[i]);
 						}//for end
 					}//if end
 				//設定 header
 				xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 				//設定要求為ajax 的 header
 				xmlhttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
 				//如果是 'POST'
 				if(params.method==='POST'){
 					//如果data不為空物件
 					if(params.data.toString()!=='[object Object]'){
 						//傳送要求
 						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"][]=
+		"
 		window.qbpwcf.tail.url, 提供連線內容的頁面,預設為當前頁面.
 		window.qbpwcf.tail.continue ,true代表繼續執行;false代表暫停.
 		window.qbpwcf.tail.rootDiv.id ,儲存回應的div其id,預設為'qbbpwcfTailRootDivID'.
 		window.qbpwcf.tail.ajax(line2start) ,啟用該功能的函式,參數line2start為要從第幾行開始讀取,-1代表從最尾端開始.
 		*/
 		//initial window.qbpwcf
 		if(window.qbpwcf===undefined){
 			//初始化 window.qbpwcf
 			window.qbpwcf={};
 			}//if end
 		//initial window.qbpwcf.tail
 		if(window.qbpwcf.tail===undefined){
 			//初始化 window.qbpwf.tail
 			window.qbpwcf.tail={};
 			//初始化繼續執行
 			window.qbpwcf.tail.continue=true;
 			}//if end
 		//如果沒有指定要求內容的頁面
 		if(window.qbpwcf.tail.url===undefined){
 			//初始化為當前頁面
 			window.qbpwcf.tail.url=location.href;
 			}//if end
 		//create root div
 		window.qbpwcf.tail.rootDiv = document.createElement('div');
 		//如果位指定div id
 		if(window.qbpwcf.tail.rootDiv.id===undefined || window.qbpwcf.tail.rootDiv.id==='')
+		{
 			//預設為 qbbpwcfTailRootDivID
 			window.qbpwcf.tail.rootDiv.id='qbpwcfTailRootDivID';
 		}//if end
 		//設置周期執行的涵式
 		window.qbpwcf.tail.ajax = function(line2start){
 			console.log(window.qbpwcf.tail.rootDiv.id);
 			//初始化 root div 的 selector
 			var selector='div.'+window.qbpwcf.tail.rootDiv.id;
 			//若 root div 不存在
 			if(document.querySelector(selector)===null){
 				//建立之
 				document.body.appendChild(window.qbpwcf.tail.rootDiv);
 				}//if end
 			xmlhttp=new XMLHttpRequest();
 			//xmlhttp.responseType='json';
 			xmlhttp.open('POST',window.qbpwcf.tail.url,true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//try parse res to json
 					//參考資料
 					//https://stackoverflow.com/questions/4467044/proper-way-to-catch-exception-from-json-parse
 					try{
 						json=JSON.parse(res);
+					 	}
 					catch(e){
 						//console.log(e);
+					 	}
 					console.log(json);
 					//如果json不存在
 					if(json===undefined || json===null){
 						//取得文字結果
 						res=xmlhttp.responseText
 						//如果輸出有逗號.
 						if(res.includes(',')){
 							//用逗號分割回應
 							res=res.split(',');
 							//取得回應的陣列長度
 							rLength=res.length;
 							}//if end
 						//儲存最新的行內容
 						window.qbpwcf.tail.latsLineContent=null;
 						//針對每個回應
 						for(i=0;i<rLength-1;i++){
 							//解密內容
 							res[i]=JSON.parse(decodeURIComponent(atob(res[i])).replaceAll('+',' '));
 							//取得讀取到的行數.
 							window.qbpwcf.tail.lineNum=res[i].lineNum;
 							//針對每行輸出
 							for(var j=0;j<res[i].lines;j++){
 								//如果內容跟上一行相同.
 								if(window.qbpwcf.tail.latsLineContent===res[i].content[j]){
 									//跳過
 									continue;
 									}//if end
 								//反之
 								else{
 									//更新最新一列的內容
 									window.qbpwcf.tail.latsLineContent=res[i].content[j];
 									}//else end
 								//set output line
 								var div=document.createElement('div');
 								var text=document.createTextNode(res[i].content[j]);
 								div.appendChild(text);
 								//如果內容為空
 								if(res[i].content[j]==='')
+								{
 									//建立<br>
 									var br=document.createElement('br');
 									//遷入<br>
 									div.appendChild(br);
+								}
 								//show output line
 								var rootDiv=document.getElementById(window.qbpwcf.tail.rootDiv.id);
 								rootDiv.prepend(div);
 								}//for end
 							}//for end
 						}//if end
 					//反之有pasrer出json
 					else{
 						//取得json
 						res=json;
 						//取得真實內容
 						res=res.content;
 						//取得回應的陣列長度
 						rLength=res.length;
 						//針對每筆輸出
 						for(var i=0;i<rLength;i++){
 							//針對每行輸出
 							for(var j=0;j<rLength;j++){
 								//set output line
 								var div=document.createElement('div');
 								var text=document.createTextNode(res[j]);
 								div.appendChild(text);
 								//如果內容為空
 								if(res[j]==='')
+								{
 									//建立<br>
 									var br=document.createElement('br');
 									//遷入<br>
 									div.appendChild(br);
+								}
 								//show output line
 								var rootDiv=document.getElementById(window.qbpwcf.tail.rootDiv.id);
 								rootDiv.prepend(div);
 								}//for end
 							}//for end
 						}//else end
 					//if json !=null
 					if(json!=null){
 						console.log(json.lineNum);
 						//遞迴
 						window.qbpwcf.tail.ajax.call(this,json.lineNum+1);
 						//清空變數
 						json=null;
 						}//if end
 					else{
 						//如果當前行數不等於空
 						if(window.qbpwcf.tail.lineNum!==undefined && window.qbpwcf.tail.lineNum!==null){
 							//遞迴
 							window.qbpwcf.tail.ajax.call(this,window.qbpwcf.tail.lineNum);
 							}//if end
 						else{
 							//遞迴
 							window.qbpwcf.tail.ajax.call(this,-1);
 							}//else end
 						}//else end
 					}//if end
 				}//function end
 			//如果要繼續
 			if(window.qbpwcf.tail.continue){
 				//繼續
 				xmlhttp.send('line2start='+line2start);
 				}//if end
 			//反之要暫停
 			else{
 				//設置無限等待
 				var intervalTail = window.setInterval(function(){
 					//提示已經暫停
 					console.log('paused');
 					//如果要繼續了
 					if(window.qbpwcf.tail.continue){
 						//清除無限等待
 						clearInterval(intervalTail);
 						//繼續
 						xmlhttp.send('line2start='+line2start);
 						}//if end
 					},1000);
 				}//else end
 			}//function end
 		";
 		#js function
 			//初始化 window.qbpwcf
 			window.qbpwcf={};
 			}//if end
 		//initial window.qbpwcf.screenShare
 		if(window.qbpwcf.screenShare===undefined){
 			//初始化 window.qbpwcf.screenShare
 			window.qbpwcf.screenShare={};
 			}//if end
 		/*
 		函式說明:
 		分享螢幕畫面.
 		參數說明:
 		parmas={};
 		https://developer.mozilla.org/zh-TW/docs/Web/API/Blob
 		#備註:
 		#錄製好的畫面無法在別的畫面播放.
 		*/
 		window.qbpwcf.screenShare.init=function(params){
 			//初始化參數
 			if(params.startEle===undefined){
 				params.startEle='';
 				}//if end
 			//初始化參數
 			if(params.displayOptions===undefined){
 				//參數
 				params.displayOptions={
   					video: {
     						cursor: 'always',
   						},
   						echoCancellation: true,
     						noiseSuppression: true,
     						sampleRate: 44100,
 						},
 					};
 				}// if end
 			//全域化 displayOptions
 			window.qbpwcf.screenShare.displayOptions=params.displayOptions;
 			//如果無指定點擊後開始分享畫面的元素
 			if(params.startEle==='')
+			{
 				//移除既有的分享畫面div
 				screenShareBtn=document.getElementById('window.qbpwcf.screenShare.startId');
 				//如果有該按鈕
 				if(screenShareBtn!==null)
+				{
 					//移除之
 					screenShareBtn.remove();
+				}
 				//建立 div 物件
 				div=document.createElement('div');
 				//綁定點擊事件
 				div.addEventListener('click',function()
+				{
 					window.qbpwcf.screenShare.startCapture();
 				});
 				//設置固位置的 css 樣式
 				div.style.position='fixed';
 				div.style.bottom='10px';
 				div.style.right='10px';
 				//設置背景顏色為藍色
 				div.style.backgroundColor='#AAAAFF';
 				//設置滑鼠指標過去為 pointer
 				div.style.cursor='pointer';
 				//設置 div 的 id
 				div.id='window.qbpwcf.screenShare.startId';
 				//給予提文字
 				div.innerText='按我開始分享畫面';
 				//取得預設的開始錄影參數;
 				params.startEle=div;
 				//放置 div
 				document.body.appendChild(div);
 			}//if end
 			//反之
 			else
+			{
 				//設置點擊就開始分享畫面的事件
 				params.startEle.addEventListener('click',function()
+				{
 					window.qbpwcf.screenShare.startCapture();
 				});
 			}//else end
 			//建立 video div 物件
 			window.qbpwcf.screenShare.videoElem=document.createElement('video');
 			window.qbpwcf.screenShare.videoElem.autoplay=true;
 			window.qbpwcf.screenShare.videoElem.style.width='100vw';
 			window.qbpwcf.screenShare.videoElem.style.height='100vh';
 			window.qbpwcf.screenShare.videoElem.style.border='solid 1px silver';
 			window.qbpwcf.screenShare.videoElem.id='video';
 			//放置 video div
 			document.body.appendChild(window.qbpwcf.screenShare.videoElem);
 			}//function window.qbpwcf.screenShare.init end
 		//開始截取畫面
 		window.qbpwcf.screenShare.startCapture = async function(){
 			//try start
 			try{
 				//顯示畫面
 				window.qbpwcf.screenShare.videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(window.qbpwcf.screenShare.displayOptions);
 				window.qbpwcf.screenShare.dumpOptionsInfo();
 				//設定錄製畫面的設定
 				var options = { mimeType: 'video/webm; codecs=vp8' };
 				window.qbpwcf.screenShare.mediaRecorder = new MediaRecorder(window.qbpwcf.screenShare.videoElem.srcObject, options);
 				//初始化儲存錄影的片段
 				window.qbpwcf.screenShare.recordedChunks=[];
 				//當有資料可以錄製時
 				window.qbpwcf.screenShare.mediaRecorder.ondataavailable=window.qbpwcf.screenShare.handleDataAvailable;
 				//開始錄製
 				window.qbpwcf.screenShare.mediaRecorder.start();
 				//設置每1秒就要求一次錄取的資料
 				window.qbpwcf.screenShare.interval = setInterval(function(){
 					//debug
 					if(window.debug){
 						console.log(window.qbpwcf.screenShare.mediaRecorder);
 						}//if end
 					//如果停止錄影了
 					if(window.qbpwcf.screenShare.mediaRecorder.state==='inactive'){
 						//結束循環要求錄取的資料
 						clearInterval(window.qbpwcf.screenShare.interval);
 						}//if end
 					//手動要求目前錄製
 					window.qbpwcf.screenShare.mediaRecorder.requestData();
 					//如果要繼續了
 					if(window.qbpwcf.screenShare.continue){
 						//清除無限等待
 						clearInterval(window.qbpwcf.screenShare.interval);
 						}//if end
 					},1000);
 				} //try end
 			//catch error
 			catch(err){
 				//debug
 				console.error(err);
 	 			}//catch end
 			}//function end
 		//結束截取畫面跟音訊
 		window.qbpwcf.screenShare.stopCapture = function(){
 			let tracks = window.qbpwcf.screenShare.videoElem.srcObject.getTracks();
 			tracks.forEach(track => track.stop());
 			videoElem.srcObject = null;
 			}//funciton end
 		//輸出當前錄影的各項資訊
 		window.qbpwcf.screenShare.dumpOptionsInfo = function(){
 			//debug
 			if(window.debug){
 				//debug
 				console.log(window.qbpwcf.screenShare.videoElem.srcObject);
 				}//if end
 			const videoTrack = window.qbpwcf.screenShare.videoElem.srcObject.getVideoTracks()[0];
 			//debug
 			if(window.debug){
  				console.log('Track settings:');
   				console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
   				console.log('Track constraints:');
   				console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
 				}//if end
 			}//function end
 		//ondataavailable event 要執行的函式
 		window.qbpwcf.screenShare.handleDataAvailable = function(e){
 			//debug
 			if(window.debug){
 				console.log('data-available');
 				}//if end
 			//如果有資料
 			if (e.data.size > 0){
 				//記錄資料
 				window.qbpwcf.screenShare.recordedChunks.push(e.data);
 				//debug
 				if(window.debug){
 					console.log(window.qbpwcf.screenShare.recordedChunks);
 					}//if end
 				//取得最舊的資料
 				blob=window.qbpwcf.screenShare.recordedChunks.shift();
 				//debug
 				if(window.debug){
 					//blob.type='video/webm; codecs=vp8'
 					console.log(blob);
 					}//if end
 				//建立 reader 物件
 				reader = new FileReader();
 				//如果開啟完畢
 				reader.addEventListener('loadend',function(e){
 					//debug
 					if(window.debug){
 						console.log(e);
 						}//if end
 					//取得 arrayBUffer
 					buf=e.originalTarget.result;
 					//debug
 					if(window.debug){
 						console.log(buf);
 						}//if end
 					//用8位數2進位來表示
 					intArray = new Int8Array(buf);
 					//儲存成json字串
 					json = JSON.stringify(intArray);
 					//初始化要傳遞的變數物件內容
 					toDb={};
 					toDb.dbAddr='localhost';
 					toDb.dbName='qbpwcf';
 					toDb.dbUser='root';
 					toDb.dbPass='dolbyhometheater';
 					toDb.dtName='int8array';
 					toDb.cols=['json'];
 					toDb.vals=[json];
 					//加密要傳輸的變數
 					toDb=btoa(encodeURIComponent(JSON.stringify(toDb)));
 					//儲存到資料庫
 					params={};
 					params.method='POST';
 					params.url='/qbpwcf/db/toDb.php';
 					params.resType='json';
 					//params.preAc='function name to call before send request';
 					//params.aftAc='function name to call after send request';
 					params.data='params='+toDb;
 					window.qbpwcf.ajax(params);
 					});//funciton  end
 				//讀取 blob 成 arrayBuffer
 				reader.readAsArrayBuffer(blob);
 				}//if end
 			}//function end
 		//用戶觀賞分享的畫面
 		window.qbpwcf.screenShare.client=function(){
 			//建立 videoR div 物件
 			window.qbpwcf.screenShare.videoR=document.createElement('video');
 			window.qbpwcf.screenShare.videoR.autoplay=true;
 			window.qbpwcf.screenShare.videoR.style.width='100vw';
 			window.qbpwcf.screenShare.videoR.style.height='100vh';
 			window.qbpwcf.screenShare.videoR.style.border='solid 1px silver';
 			window.qbpwcf.screenShare.videoR.id='videoR';
 			//放置 videoR div
 			document.body.appendChild(window.qbpwcf.screenShare.videoR);
 			//建立 media source 物件
 			window.qbpwcf.screenShare.mediaSourceForR = new MediaSource();
 			//設置 video tag 的內容來源
 			//window.qbpwcf.screenShare.videoR.src=URL.createObjectURL(window.qbpwcf.screenShare.mediaSourceForR); //old method
 			window.qbpwcf.screenShare.videoR.srcObject=window.qbpwcf.screenShare.mediaSourceForR; //new method
 			//初始化用戶取得的最新視訊片段id
 			window.qbpwcf.screenShare.clientDataId=0;
 			//建立當打開媒體來源時
 			window.qbpwcf.screenShare.mediaSourceForR.addEventListener('sourceopen',window.qbpwcf.screenShare.clientRecursive);
 			}//functino end
 		//用戶觀賞分享的畫面用的遞回函式
 		window.qbpwcf.screenShare.clientRecursive=function(event){
 			//debug
 			if(window.debug){
 				console.log(event);
 				}//if end
 			//如果尚無資料
 			if(window.qbpwcf.screenShare.clientDataId===0){
 				//設置輸出的編碼
 				window.qbpwcf.screenShare.sourceBuffer = window.qbpwcf.screenShare.mediaSourceForR.addSourceBuffer('video/webm; codecs=vp8');
 				}//if end
 			//初始化要傳遞的變數物件內容
 			toDb={};
 			toDb.dbAddr='localhost';
 			toDb.dbName='qbpwcf';
 			toDb.dbUser='root';
 			toDb.ascORdesc='desc';
 			toDb.numLimit='1';
 			//toDb.WhereColumnName=['id'];
 			//toDb.WhereColumnOperator=['>'];
 			//toDb.WhereColumnValue=[window.qbpwcf.screenShare.clientDataId+''];
 			//debug
 			if(window.debug){
 				console.log(toDb);
 				}//if end
 			//加密要傳輸的變數
 			toDb=btoa(encodeURIComponent(JSON.stringify(toDb)));
 			//從Server取得資料
 			params={};
 			params.method='POST';
 			params.url='/qbpwcf/db/dbOut.php';
 			params.resType='json';
 			params.preAc=function(res){
 				//debug
 				if(window.debug){
 					console.log('loading');
 					}//if end
 				};
 			params.aftAc=function(res){
 				//debug
 				if(window.debug){
 					console.log(res);
 					}//if end
 				//如果尚無資料
 				if(res.dataContent===null){
 					//debug
 					if(window.debug){
 						//提示讀取到結尾了
 						console.log('read EOL');
 						}//if end
 					//遞迴
 					window.qbpwcf.screenShare.clientRecursive();
 					//結束執行
 					return true;
 					}//if end
 				//取得id
 				id=res.dataContent.id[0];
 				//如果id有變
 				if(window.qbpwcf.screenShare.clientDataId!==id){
 					//取得新id
 					window.qbpwcf.screenShare.clientDataId=id;
 					//讀取片段資料
 					json=res.dataContent.json[0];
 					//debug
 					if(window.debug){
 						console.log(json);
 						}//if end
 					//parse json
 					json=JSON.parse(json);
 					//debug
 					if(window.debug){
 						console.log(json);
 						}//if end
 					//用int8Array的方式儲存
 					intArray=new Int8Array(Object.values(json));
 					//debug
 					if(window.debug){
 						console.log(intArray);
 						}//if end
 					//debug
 					if(window.debug){
 						console.log(intArray.buffer);
 						}//if end
 					//轉換成blob
 					blob=new Blob(intArray,{type:'video/webm'});
 					//debug
 					if(window.debug){
 						console.log(blob);
 						}//if end
 					//建立 reader 物件
 					readerR = new FileReader();
 					//如果開啟完畢
 					readerR.addEventListener('loadend',function(e){
 						//debug
 						if(window.debug){
 							console.log(e);
 							}//if end
 						//取得 arrayBUffer
 						buf=e.originalTarget.result;
 						//debug
 						if(window.debug){
 							console.log(buf);
 							}//if end
 						//debug
 						if(window.debug){
 							console.log(window.qbpwcf.screenShare.sourceBuffer);
 							}//if end
 						//append buffer
 						window.qbpwcf.screenShare.sourceBuffer.appendBuffer(buf);
 						// Wait for the sourcebuffer to be ready to load all other chunks
 						window.qbpwcf.screenShare.sourceBuffer.addEventListener('updateend',window.qbpwcf.screenShare.clientRecursive);
 						//debug
 						if(window.debug){
 							console.log(window.qbpwcf.screenShare.sourceBuffer);
 							}//if end
 						});//addEventListener end
 					//讀取 blob 成 arrayBuffer
 					readerR.readAsArrayBuffer(blob);
 					//遞迴
 					window.qbpwcf.screenShare.clientRecursive();
 					}//if end
 				//反之
 				else{
 					//遞迴
 					window.qbpwcf.screenShare.clientRecursive();
 					}//else end
 				}//function end
 			params.data='params='+toDb;
 			window.qbpwcf.ajax(params);
 			}//function end
 		";
 		/*
 		desc:
 		等待既有圖片讀取完畢後，再讀取更清楚的圖片,取代之.
 		參考資料:
 		https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 		*/
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//img thumbnails 效果
 		window.qbpwcf.imgThumbnails=function(thumbnails,oriImgUrl){
 			//如果變數 thumbnails 跟 oriImg 其中一個不是 object
 			if( typeof(thumbnails)!=='object' || typeof(oriImgUrl)!=='string' ){
 				//提示錯誤訊息
 				console.error('thumbnails not a object');
 				//提示錯誤訊息
 				console.error('oriImgUrl not a string');
 				//結束執行
 				return false;
 				}//if end
 			//event只跑一次的設定參數
 			var Optional={};
 			Optional.once=true;
 			//事件,當圖片檔案讀取完畢後執行
 			thumbnails.addEventListener('load',function(e){
 				/*
 				設置 window.qbpwcf.ajax 函數
 				說明：
 				傳送ajax,指定傳送前要做什麼事情，傳送後要做什麼事情.
 				參數：
 				params={};
 				params.method='GET';
 				params.url=oriImgUrl;
 				params.resType='blob';
 				//帶入 img obj
 				params.imgObj=e.target;
 				params.aftAc=function(res){
 					//new reader obj
 					var reader = new FileReader();
 					//reader evevnt
 					reader.addEventListener('loadend', function(e){
 						//置換圖片位置為 base64 data url
 						reader.imgObj.src=e.target.result;
 					});
 					//帶入 img obj
 					reader.imgObj=params.imgObj;
 					//讀取圖片為 data url
 					reader.readAsDataURL(res);
 					};
 				window.qbpwcf.ajax(params);
 				},Optional);//functino end
 			}//function end
 		";
 		/*
 		desc:
 		低解析度的指定圖片讀取完畢後，再讀取更清楚的圖片,取代之.
 		參考資料:
 		https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
 		*/
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//img thumbnails 效果,用 async 實作
 		window.qbpwcf.imgThumbAsync=async function(element,thumbUrl,oriImgUrl){
 			//如果變數 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');
 				//結束執行
 				return false;
 				}//if end
 			//載入低解析度的圖片,將Promise儲存到res裡面
 			var res = await fetch(thumbUrl);
 			//如果沒有讀取成功
 			if(await res.status!==200){
 				//回傳失敗
 				return false;
 				}//if end
 			//顯示低解析度的圖片
 			element.src=URL.createObjectURL(await res.blob());
 			//載入原始圖片,將Promise儲存到res裡面
 			var res = await fetch(oriImgUrl);
 			//如果沒有讀取成功
 			if(await res.status!==200){
 				//回傳失敗
 				return false;
 				}//if end
 			//顯示原始的圖片
 			element.src=URL.createObjectURL(await res.blob());
 			//回傳正確
 			return true;
 			}//function end
 		";
 		/*
 		desc:
 		低解析度的多個指定圖片讀取完畢後，再讀取更清楚的圖片,取代之,且同步執行.
 		參考資料:
 		https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
 		*/
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//多張img thumbnails 效果,用 async 實作
 		window.qbpwcf.multiImgThumbAsync=async function(element,thumbUrl,oriImgUrl){
 			//儲存要同步執行的工作
 			var tasks=[];
 			//針對每個陣列元素做事情,不需要中斷.
 			element.forEach(function(value,key)
+			{
 				//不等待結果趕緊執行下一個
 				tasks.push(window.qbpwcf.imgThumbAsync(value,thumbUrl[key],oriImgUrl[key]));
 			});
 			//等待每個工作執行結束
 			await Promise.all(tasks);
 			//回傳正確
 			return true;
 			}//function end
 		";
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		偷偷摸摸地傳送表單,並觸發事件
 		params.target='';為表單要傳送到的目的地.
 		params.successFunc='';為表單回覆為成功時要做的事情,回應為一物件,有一屬性為'status',其數值為'true'.
 		params.failedFunc='';為表單回覆為失敗時要做的事情,回應為一物件,有一屬性為'status',其數值為'false'.
 		*/
 		window.qbpwcf.slientSubmit=function(params){
 			//取得表單元素的key
 			var formKeys=Object.keys(params.formEle);
 			//取得表單key的數量
 			var formLength=formKeys.length;
 			//針對每個 key
 			for(var i=0;i<formLength;i++){
 				//該表單，綁定失去焦點的事件,看其來沒有效果
 				params.formEle[i].addEventListener('focusout',function(e){
 					//如果輸入內容為空
 					if(e.target.value===''){
 						//聚焦選單
 						e.target.focus();
 						}//if end
 					});//event blur end
 				//該表單，綁定內容變化的事件
 				params.formEle[i].addEventListener('change',function(e){
 					//針對每個表單
 					for(var j=0;j<formLength;j++){
 						//如果有表單未填寫
 						if(params.formEle[j].value===''){
 							//結束迴圈
 							break;
 							}//if end
 						//到這邊代表表單都有填寫
 						if(j===formLength-1){
 							//驗證表單 - start
 							//初始化表單變數
 							var post='';
 							//針對每個表單
 							for(var k=0;k<formLength;k++){
 								//記錄表單名稱
 								var formName=params.formEle[k].name;
 								//記錄表單數值
 								var formValue=params.formEle[k].value;
 								//當是第一個表單時
 								if(k==0){
 									//串接變數
 									post=post+formName+'='+encodeURIComponent(formValue);
 									}//if end
 								//中間的表單
 								else{
 									//串接變數
 									post=post+'&'+formName+'='+encodeURIComponent(formValue);
 									}//else end
 								}//for end
 							/*
 							設置 window.qbpwcf.ajax 函數
 							說明：
 							傳送ajax,指定傳送前要做什麼事情，傳送後要做什麼事情.
 							參數：
 							ajParams.method='POST';
 							ajParams.url=params.target;
 							ajParams.resType='json';
 							ajParams.data=post;
 							ajParams.aftAc=function(res){
 								//驗證正確
 								if(res.status==='true'){
 									//運行驗證成功的函式
 									params.successFunc(res);
 									}//if end
 								//反之驗證失敗
 								else if(params.failedFunc!==undefined){
 									//運行驗證失敗的函式
 									params.failedFunc(res);
 									}//if end
 								};
 							window.qbpwcf.ajax(ajParams);
 							//驗證表單 - end
 							}//if end
 						}//for end
 					//結束程式
 					return false;
 					});//event blur end
 				}//for end
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		params.timeout,偵測的毫秒數上限.
 		params.callback,偵測完服務後要執行的函式,參數為偵測的結果可以連線為true,不可連線為false.
 		*/
 		window.qbpwcf.connectable={};
 		window.qbpwcf.connectable.func=function(params){
 			//如果 url 未定義
 			if(params===undefined){
 				//回傳 false
 				return false;
 				}//if end
 			//如果 url 未定義
 			if(params.url===undefined){
 				//初始化為 https://www.google.com
 				this.url='https://www.google.com';
 				}//if end
 			//反之
 			else{
 				//設置 url
 				this.url=params.url;
 				}//else end
 			//如果 timeout 未定義
 			if(params.timeout===undefined){
 				//初始化為1秒鐘
 				this.timeout=1000;
 				}//if end
 			//反之
 			else{
 				//設置 timeout
 				this.timeout=params.timeout;
 				}//else end
 			//如果 callback 未定義
 			if(params.callback===undefined){
 				//初始化 callback
 				this.callback=function(res){
 					console.log(res);
 					}//function end
 				}//if end
 			//反之
 			else{
 				//設置 callback
 				this.callback=params.callback;
 				}//else end
 			//預設尚未偵測完成 params.url 的服務狀況
 			this.detectServiceFin=false;
 			//預設 params.url 的服務狀況為正常
 			this.serviceBlock=false;
 			//儲存timeout物件
 			this.checkServiceBlockTimeout={};
 			/*
 			說明：
 			傳送ajax,指定傳送前要做什麼事情，傳送後要做什麼事情.
 			參數：
 			params={};
 			params.callback=this.callback;
 			params.method='GET';
 			params.data={};
 			params.url=this.url;
 			params.preAc=function(){
 				//取得 xmlhttp物件
 				var xmlhttp=this;
 				//設置過了 params.timeout 秒中後要做的事情.
 				params.checkServiceBlockTimeout=setTimeout(function(){
 					//中斷連線
 					xmlhttp.abort();
 					//提示目標被封鎖了
 					console.log(params.url+' is blocked');
 					//設置服務不正常,被阻擋了
 					params.serviceBlock=true;
 					//設置偵測google連線完畢
 					params.detectServiceFin=true;
 					},params.timeout,xmlhttp);
+				}
 			params.aftAc=function(res){
 				//debug
 				console.log('res='+res);
 				//清除 timeout 的 flag
 				clearTimeout(params.checkServiceBlockTimeout);
 				//設置偵測google連線完畢
 				params.detectServiceFin=true;
+				}
 			window.qbpwcf.ajax(params);
 			//設置無限等待
 			var intervalTail = window.setInterval(function(){
 				//如果已經偵測好google的連線狀況
 				if(params.detectServiceFin){
 					//清除無限等待
 					clearInterval(intervalTail);
 					console.log(params.callback);
 					//如果存在要callback的函式
 					if(params.callback!==undefined){
 						//debug
 						console.log('beafore callback');
 						//callback
 						params.callback.call(this,params.serviceBlock);
 						}//if end
 					}//if end
 				},100);
 			}//function window.qbpwcf.connectable end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/fromBase64 => bytes array from base64 encode string
 		#備註:
 		#server必須要有該字形.
 		*/
 		window.qbpwcf.fonts={};
 		//default font binary
 		window.qbpwcf.fonts.bufferArray=new ArrayBuffer();
 		//load font function
 		window.qbpwcf.fonts.load=async function(){
 			//建立font物件
 			var font = new FontFace('qbpwcfFont', window.qbpwcf.fonts.bufferArray);
 			//告訴瀏覽器載入字形,並等待其執行完再往下執行
 			//因為 FontFace 類別的 load 方法回傳為 Promise ，因此要等待其回傳結果所以要用 await 關鍵字.
 			await font.load();
 			//新增字形到網頁文件
 			document.fonts.add(font);
 			//新增 qbpwcfFont 類別的網頁字形
 			document.styleSheets[0].insertRule("."'.qbpwcfFont {font-family:qbpwcfFont;}'".");
 			//避免重複新增class,先移除之
 			document.body.classList.remove('qbpwcfFont');
 			//套用字形
 			document.body.classList.add('qbpwcfFont');
 			}//function end
 		//list aviable fonts
 		window.qbpwcf.fonts.list=function(){
 			//開發中
 			console.log('list fonts');
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		//記錄點擊當下的用戶資訊
 		window.qbpwcf.recordClientInfo=function(){
 			console.log('建構中');
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		解析cookie資料
 		*/
 		window.qbpwcf.cookie={};
 		//記錄原始cookie
 		window.qbpwcf.cookie.ori=document.cookie;
 		//如果有 cookie 存在
 		if(window.qbpwcf.cookie.ori!=''){
 			//記錄cookie的數量
 			window.qbpwcf.cookie.count=document.cookie.split(';').length;
 			//初始化用名稱來記錄cookie的內容
 			window.qbpwcf.cookie.byName={};
 			//有幾個cookie就執行幾次
 			for(var i=0;i<window.qbpwcf.cookie.count;i++){
 				//取得cookie
 				var cookieStr=document.cookie.split(';')[i];
 				//取得cookie名稱
 				var cookieName=cookieStr.split('=')[0];
 				//取得cookie內容
 				var cookieValue=cookieStr.split('=')[1];
 				//記錄coockie
 				eval('window.qbpwcf.cookie.byName[\''+cookieName+'\']=cookieValue');
 				//如果有經過編碼
 				if(cookieValue!==decodeURIComponent(cookieValue)){
 					/*
 					設置 window.qbpwcf.ajax 函數
 					說明：
 					傳送ajax,指定傳送前要做什麼事情，傳送後要做什麼事情.
 					參數：
 					params.data='data to contain','key1=encodeURIComponent(val1)&key2=encodeURIComponent(val2)';if no data please use {};
 					*/
 					params={};
 					params.method='POST';
 					params.url='/qbpwcf/unserialize/';
 					//帶入 cookieName
 					params.cookieName=cookieName;
 					params.aftAc=function(res){
 						//如果有json回應
 						if(res!==null){
 							//取得cookie解析後的結果
 							eval('window.qbpwcf.cookie.byName.'+params.cookieName+'=res');
 							}//if end
 						};
 					params.data='data='+cookieValue;
 					window.qbpwcf.ajax.call(this,params);
 					}//if end
 				}//for end
 			}//if end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		dialog,類似modal的方法.
 		*/
 		window.qbpwcf.dialog={};
 		/*
 		用dialog確認要做的事情
 		*/
 		//初始化儲存 confirm dialog 物件
 		window.qbpwcf.dialog.confirm={};
 		//初始化相關屬性
 		window.qbpwcf.dialog.confirm.clear=function(){
 			//初始化儲存 confirm dialog 的實體
 			window.qbpwcf.dialog.confirm.instance=null;
 			//初始化儲存 confirm dialog 結束後取得的內容
 			window.qbpwcf.dialog.confirm.result={};
 			//初始化儲存 confirm dialog 詢問的內容文字
 			window.qbpwcf.dialog.confirm.text='Are you sure?';
 			//初始化儲存 confirm dialog 取消按鈕的顯示文字
 			window.qbpwcf.dialog.confirm.cancelBtnText='Cancel';
 			//初始化儲存 confirm dialog 確定按鈕的顯示文字
 			window.qbpwcf.dialog.confirm.okBtnText='Confirm';
 			//初始化 confirm dialog 的內容
 			window.qbpwcf.dialog.confirm.content='';
 			//初始化 confirm dialog 的 dom 內容
 			window.qbpwcf.dialog.confirm.customDom={};
 			}//function end
 		//立刻初始化相關屬性
 		window.qbpwcf.dialog.confirm.clear();
 		//初始化設置好 confirm dialog 後要觸發的函式
 		window.qbpwcf.dialog.confirm.prepareCallback=function(){
 			//取得 cancel 的按鈕
 			var cancel_btn=document.querySelector('button#dialog_cancel_btn');
 			//按鈕的事件
 			cancel_btn.addEventListener('click',function(){
 				//設置結果為 'false'
 				window.qbpwcf.dialog.confirm.result='false';
 				//關閉dialog
 				window.qbpwcf.dialog.confirm.instance.close();
 				});
 			//取得 confirm 的按鈕
 			var confirm_btn=document.querySelector('button#dialog_confirm_btn');
 			//按鈕的事件
 			confirm_btn.addEventListener('click',function(){
 				//設置結果為 'true'
 				window.qbpwcf.dialog.confirm.result='true';
 				//關閉dialog
 				window.qbpwcf.dialog.confirm.instance.close();
 				});
 			}//function end
 		/*
 		初始化關閉 confirm dialog 後要觸發的函式
 		params為取得的內容結果.
 		*/
 		window.qbpwcf.dialog.confirm.closeCallback=function(params){
 			//debug
 			console.log(params);
 			}//fucntion end
 		//顯示 confirm dialog
 		window.qbpwcf.dialog.confirm.func=function(){
 			//回傳 Promise
 			return new Promise(function(resolve, reject){
 				//建立dialog物件
 				var dialog=document.createElement('dialog');
 				//取得參考
 				window.qbpwcf.dialog.confirm.instance=dialog;
 				//dialog的確認內容
 				var dialogConfirmText=document.createTextNode(window.qbpwcf.dialog.confirm.text);
 				//建立放置按鈕的div
 				var divDialogButton=document.createElement('div');
 				//建立放置取消按鈕的span
 				var spanCancelButton=document.createElement('span');
 				//設置取消按鈕靠左對齊
 				spanCancelButton.style.float='left';
 				//建立dialog cancel按鈕
 				var buttonDialogCancel=document.createElement('button');
 				//設置dialog cancel按鈕的id
 				buttonDialogCancel.id='dialog_cancel_btn';
 				//設置dialog cancel按鈕的文字內容
 				buttonDialogCancel.innerText=window.qbpwcf.dialog.confirm.cancelBtnText;
 				//將取消按鈕放置到span
 				spanCancelButton.appendChild(buttonDialogCancel);
 				//放置取消按鈕span到div
 				divDialogButton.append(spanCancelButton);
 				//建立放置確認按鈕的span
 				var spanConfirmButton=document.createElement('span');
 				//設置確認按鈕靠右對齊
 				spanConfirmButton.style.float='right';
 				//建立dialog confirm按鈕
 				var buttonDialogConfirm=document.createElement('button');
 				//設置dialog confirm按鈕的id
 				buttonDialogConfirm.id='dialog_confirm_btn';
 				//設置dialog confirm按鈕的文字內容
 				buttonDialogConfirm.innerText=window.qbpwcf.dialog.confirm.okBtnText;
 				//將確認鈕放置到span
 				spanConfirmButton.appendChild(buttonDialogConfirm);
 				//放置確認按鈕span到div
 				divDialogButton.append(spanConfirmButton);
 				//建立要作為dialog內容的div
 				var divDialogConent=document.createElement('div');
 				//建立dialog確認內容的div
 				var divDialogConfrimText=document.createElement('div');
 				//設置dialog確認內容的文字要置中
 				divDialogConfrimText.style.textAlign='center';
 				//設置dialog確認內容的文字
 				divDialogConfrimText.appendChild(dialogConfirmText);
 				//放置dialog的確認內容
 				divDialogConent.appendChild(divDialogConfrimText);
 				//放置dialog的按鈕
 				divDialogConent.appendChild(divDialogButton);
 				//如果有指定 dom 內容
 				if(window.qbpwcf.dialog.confirm.customDom.outerHTML!=undefined){
 					//建立 div
 					var div=document.createElement('div');
 					//將dom放置到div裡面
 					div.appendChild(window.qbpwcf.dialog.confirm.customDom);
 					//設置 div dom 內容在前
 					divDialogConent.prepend(div);
 					}//if end
 				//更新 confirm dialog 的內容
 				window.qbpwcf.dialog.confirm.content=divDialogConent;
 				//設置dialog的內容
 				dialog.appendChild(window.qbpwcf.dialog.confirm.content);
 				//設置id
 				dialog.id='qbpwcf_dialog';
 				//放置dialog
 				document.body.appendChild(dialog);
 				//呼叫 window.qbpwcf.dialog.confirm.prepareCallback
 				window.qbpwcf.dialog.confirm.prepareCallback.call(this);
 				//取得dialog
 				var qbpwcf_dialog=document.querySelector('dialog#qbpwcf_dialog');
 				//顯示modal
 				qbpwcf_dialog.showModal();
 				//當dialog關閉時觸發
 				qbpwcf_dialog.addEventListener('close',function(event){
 					//取得dialog回傳的結果
 					var result=window.qbpwcf.dialog.confirm.result;
 					//將回傳結果交給函式 window.qbpwcf.dialog.confirm.callback處理
 					window.qbpwcf.dialog.confirm.closeCallback.call(this,result);
 					//回傳結果給Promise
 					resolve(result);
 					//移除dialog元素
 					qbpwcf_dialog.remove();
 					});
 				});
 			}//function end
 		/*
 		用dialog取得密碼.
 		*/
 		//初始化儲存 getPassword dialog 的物件
 		window.qbpwcf.dialog.getPassword={};
 		//初始化儲存 getPassword dialog 的實體
 		window.qbpwcf.dialog.getPassword.instance=null;
 		//初始化儲存 getPassword dialog 結束後取得的內容
 		window.qbpwcf.dialog.getPassword.result={};
 		//初始化儲存 getPassword dialog 確認輸入的按鈕顯示文字
 		window.qbpwcf.dialog.getPassword.text='Next';
 		//初始化getPassword dialog的內容
 		window.qbpwcf.dialog.getPassword.content='';
 		//初始化設置好getPassword dialog內容要觸發的函式
 		window.qbpwcf.dialog.getPassword.prepareCallback=function(){
 			//取得輸入的密碼
 			var password=document.querySelector('input#dialog_pass');
 			//如果輸入內容改變
 			password.addEventListener('change',function(){
 				//儲存輸入的密碼
 				window.qbpwcf.dialog.getPassword.result=password.value;
 				});
 			//取得關閉的按鈕
 			var closeBtn=document.querySelector('button#dialog_btn');
 			//關閉按鈕的事件
 			closeBtn.addEventListener('click',function(){
 				//關閉dialog
 				window.qbpwcf.dialog.getPassword.instance.close();
 				});
 			}//function end
 		/*
 		初始化關閉getPassword dialog後要觸發的函式
 		params為取得的內容結果.
 		*/
 		window.qbpwcf.dialog.getPassword.closeCallback=function(params){
 			//debug
 			console.log(params);
 			}//fucntion end
 		//顯示 getPassword dialog
 		window.qbpwcf.dialog.getPassword.func=function(){
 			//建立dialog物件
 			var dialog=document.createElement('dialog');
 			//取得參考
 			window.qbpwcf.dialog.getPassword.instance=dialog;
 			//更新 dialog 的內容
 			window.qbpwcf.dialog.getPassword.content='<input type=\'password\' value=\'\' autocomplete=\'off\' id=\'dialog_pass\'><button id=\'dialog_btn\'>'+window.qbpwcf.dialog.getPassword.text+'</button>';
 			//設置dialog的內容
 			dialog.innerHTML=window.qbpwcf.dialog.getPassword.content;
 			//設置id
 			dialog.id='qbpwcf_dialog';
 			//放置dialog
 			document.body.appendChild(dialog);
 			//呼叫 window.qbpwcf.dialog.getPassword.prepareCallback
 			window.qbpwcf.dialog.getPassword.prepareCallback.call(this);
 			//取得dialog
 			var qbpwcf_dialog=document.querySelector('dialog#qbpwcf_dialog');
 			//顯示modal
 			qbpwcf_dialog.showModal();
 			//當dialog關閉時觸發
 			qbpwcf_dialog.addEventListener('close',function(event){
 				//取得輸入的密碼
 				var password=document.querySelector('input#dialog_pass');
 				//儲存輸入的密碼
 				window.qbpwcf.dialog.getPassword.result=password.value;
 				//取得dialog回傳的結果
 				var result=window.qbpwcf.dialog.getPassword.result;
 				//將回傳結果交給函式 window.qbpwcf.dialog.getPassword.callback處理
 				window.qbpwcf.dialog.getPassword.closeCallback.call(this,result);
 				//移除dialog元素
 				qbpwcf_dialog.remove();
 				});
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		sleep
 		*/
 		//初始化
 		window.qbpwcf.sleep={};
 		//執行的定義
 		//參數sec代表要sleep多久,單位為秒.
 		window.qbpwcf.sleep.func=function(sec){
 			//回傳 Promise
 			return new Promise(resolve => {
 				//sec秒後才會結束
 				setTimeout(() => {
 					resolve(sec);
 					}, sec*1000);
 				});
 			}//window.qbpwcf.sleep.func end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		slide,輪播任何東西.
 		*/
 		//初始化
 		window.qbpwcf.slide={};
 		//初始化要播放的內容 html、css、javaScript 字串.
 		//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal
 		window.qbpwcf.slide.eles=[];
 		//初始化放置投影片的div區域
 		window.qbpwcf.slide.displayDivByQuerySelector='div#slide';
 		//初始化投影片的滯留時間,預設為3秒,時間到就換下一個投影片.
 		window.qbpwcf.slide.showTime=3;
 		//說明:
 		//將 html、css、javaScript 轉換為 dom
 		//參數:
 		//htmlStr 內容必須有此結構 html > body > div > anyTag(content to show)
 		window.qbpwcf.slide.toDom=function(htmlStr){
 			//回傳 Promise
 			return new Promise(resolve => {
 				//debug
 				//console.log(htmlStr);
 				//initial DOMParser
 				var domParser = new DOMParser();
 				//確保內容格式正確,若為影片,則播放結束後才會結束.
 				//script start
 				htmlStr=htmlStr+'\<script\>';
 				//綁定 load 事件
 				htmlStr=htmlStr+'window.addEventListener(\'load\',function(event){';
 				//debug
 				//htmlStr=htmlStr+'console.log(document.querySelector(\'div\'));';
 				//取得第一個div
 				htmlStr=htmlStr+'var containerDiv=document.querySelector(\'div\');';
 				//debug
 				//htmlStr=htmlStr+'console.log(event);';
 				//htmlStr=htmlStr+'console.log(containerDiv);';
 				//如果不存在,則提示錯誤
 				htmlStr=htmlStr+'if(containerDiv===null){console.error(\'containerDiv div not exixt\');}';
 				//設置container div 的 id 為 window_qbpwcf_slide
 				htmlStr=htmlStr+'containerDiv.id=\'window_qbpwcf_slide\';';
 				//設置container div 為背景
 				htmlStr=htmlStr+'containerDiv.style.zIndex=-1;';
 				//設置container div 為透明
 				htmlStr=htmlStr+'containerDiv.style.opacity=0;';
 				//設置container div 為相對位置
 				htmlStr=htmlStr+'containerDiv.style.position=\'absolute\';';
 				//設置最小寬度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.style.minWidth=\'inherit\';';
 				//設置最大寬度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.style.maxWidth=\'inherit\';';
 				//設置最小高度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.style.minHeight=\'inherit\';';
 				//設置最大高度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.style.maxHeight=\'inherit\';';
 				//如果有里層元素 - start
 				htmlStr=htmlStr+'if(containerDiv.children.length!==0){';
 				//設置最小寬度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.children[0].style.minWidth=\'inherit\';';
 				//設置最大寬度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.children[0].style.maxWidth=\'inherit\';';
 				//設置最小高度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.children[0].style.minHeight=\'inherit\';';
 				//設置最大高度跟父元素一樣
 				htmlStr=htmlStr+'containerDiv.children[0].style.maxHeight=\'inherit\';';
 				//取得要呈現的內容
 				htmlStr=htmlStr+'var contentToShow=containerDiv.children[0];';
 				//如果有里層元素 - end
 				htmlStr=htmlStr+'}';
 				//反之裡層不為element,可能為textNode - start
 				htmlStr=htmlStr+'else{';
 				//取得要呈現的內容
 				htmlStr=htmlStr+'var contentToShow=containerDiv.childNodes[0];';
 				//設置內容左右置中
 				htmlStr=htmlStr+'containerDiv.style.textAlign=\'center\';';
 				//設置內容高度為 100vh
 				htmlStr=htmlStr+'containerDiv.style.lineHeight=\'100vh\';';
 				//反之裡層不為element,可能為textNode - end
 				htmlStr=htmlStr+'}';
 				//若內容是不為video,設置可立即換頁.
 				htmlStr=htmlStr+'if(contentToShow.tagName!==\'VIDEO\'){containerDiv.dataset.canChangeNow=true;}';
 				//反之內容為video
 				htmlStr=htmlStr+'else{';
 				//設置不可立即換頁
 				htmlStr=htmlStr+'containerDiv.dataset.canChangeNow=false;';
 				//設置影片靜音
 				htmlStr=htmlStr+'contentToShow.muted=true;';
 				//禁止影片自動播放
 				htmlStr=htmlStr+'contentToShow.autoplay=false;';
 				//新增影片播放完之後的事件
 				htmlStr=htmlStr+'contentToShow.addEventListener(\'ended\',function(){';
 				//設置可立即換頁
 				htmlStr=htmlStr+'containerDiv.dataset.canChangeNow=true;';
 				//ended 事件結束
 				htmlStr=htmlStr+'});';
 				//else end
 				htmlStr=htmlStr+'}';
 				//若內容是img,設置按照比例自動縮放
 				//https://code-boxx.com/keep-image-aspect-ratio/
 				htmlStr=htmlStr+'if(contentToShow.tagName===\'IMG\'){contentToShow.style.objectFit=\'scale-down\';}';
 				//load 事件結束
 				htmlStr=htmlStr+'});';
 				//script end
 				htmlStr=htmlStr+'\</script\>';
 				//html to dom
 				var dom=domParser.parseFromString(htmlStr,'text/html');
 				//回傳轉成 dom 的 html
 				resolve(dom.documentElement);
 				});
 			}//window.qbpwcf.slide.toDom end
 		//將多個 html、css、javaScript 轉換為 dom
 		window.qbpwcf.slide.toDoms=function(htmlStrArray){
 			//回傳 Promise
 			return new Promise(resolve => {
 				//初始化要回傳的內容
 				var doms=[];
 				//初始化用來存放排序後的 doms
 				var tempDoms=[];
 				//針對每個要輪播的內容
 				htmlStrArray.forEach(async function(value,key){
 					//將 html to dom
 					var dom=await window.qbpwcf.slide.toDom.call(this,value);
 					//記錄排序順序
 					dom.order=key;
 					//保存到 doms 陣列裡面
 					doms.push(dom);
 					//如果每個都解析成 dom 了
 					if(doms.length===htmlStrArray.length){
 						//初始化要尋找的索引
 						var indexToFind=0;
 						//初始化最後的索引
 						var maxlidex=htmlStrArray.length-1;
 						//按照 order 重新排序
 						for(var i=0;i<=maxlidex;i++){
 							//如果是要找的索引
 							if(doms[i].order===indexToFind){
 								//放置dom
 								tempDoms.push(doms[i]);
 								//要尋找的索引+1
 								indexToFind++;
 								//重新搜尋
 								i=-1;
 								//繼續迴圈
 								continue;
 								}//if end
 							}//for end
 						//回傳轉成 dom 的 array
 						resolve(tempDoms);
 						}//if end
 					});//forEach end
 				});//回傳 Promise end
 			}//window.qbpwcf.slide.toDoms end
 		//將 dom 給 ifrmae 執行完後,回傳其 document
 		window.qbpwcf.slide.loadDom=function(dom){
 			//回傳 Promise
 			return new Promise(resolve => {
 				//建立 iframe
 				var iframe=document.createElement('iframe');
 				//隱藏 iframe
 				iframe.style.display='none';
 				//放置 iframe
 				document.body.appendChild(iframe);
 				//取得 iframe 的 document
 				var documentInIframe=iframe.contentDocument;
 				//讓 iframe 開始接收內容
 				documentInIframe.open();
 				//綁定 iframe load 事件
 				iframe.addEventListener('load',function(){
 					//回傳 iframe document
 					resolve(documentInIframe.documentElement);
 					});
 				//讓 iframe 接收指定內容
 				documentInIframe.write(dom.outerHTML);
 				//讓 iframe 結束接收內容
 				documentInIframe.close();
 				});//回傳 Promise end
 			}//window.qbpwcf.slide.loadDom end
 		//將多個 dom 給 ifrmae 執行完後,回傳其 document 集合
 		window.qbpwcf.slide.loadDoms=function(doms){
 			//回傳 Promise
 			return new Promise(resolve => {
 				//初始化儲存 iframe document
 				var iframeDocs=[];
 				//初始化儲存排序過後的 iframe document
 				var tempIframeDocs=[];
 				//針對每個dom
 				doms.forEach(async function(value,key){
 					//取得 iframe document
 					var iframeDoc=await window.qbpwcf.slide.loadDom.call(this,value);
 					//記錄排序順序
 					iframeDoc.order=key;
 					//儲存
 					iframeDocs.push(iframeDoc);
 					//如果每個都解析成 dom 了
 					if(iframeDocs.length===doms.length){
 						//初始化要尋找的索引
 						var indexToFind=0;
 						//初始化最後的索引
 						var maxlidex=doms.length-1;
 						//按照 order 重新排序
 						for(var i=0;i<=maxlidex;i++){
 							//如果是要找的索引
 							if(iframeDocs[i].order===indexToFind){
 								//放置iframeDoc
 								tempIframeDocs.push(iframeDocs[i]);
 								//要尋找的索引+1
 								indexToFind++;
 								//重新搜尋
 								i=-1;
 								//繼續迴圈
 								continue;
 								}//if end
 							}//for end
 						//回傳各個 iframe document
 						resolve(tempIframeDocs);
 						}//if end
 					});//forEach end
 				});//回傳 Promise end
 			}//window.qbpwcf.slide.loadDoms end
 		//執行的定義
 		window.qbpwcf.slide.func=async function(){
 			//取得要輪播的元素
 			var eles=window.qbpwcf.slide.eles;
 			//如果沒有要輪播的內容
 			if(eles.length===0){
 				//提示錯誤訊息
 				console.error('Array(window.qbpwcf.slide.eles) should not be empty');
 				//結束執行
 				return false;
 				}//if end
 			//取得放置輪播的div QuerySelectorString
 			var displayDivByQuerySelector=window.qbpwcf.slide.displayDivByQuerySelector;
 			//取得放置輪播的div
 			var displayDiv=document.querySelector(displayDivByQuerySelector);
 			//如果沒有找到放置輪播內容的div
 			if(displayDiv===null){
 				//提示錯誤訊息
 				console.error('result of querySelector by '+displayDivByQuerySelector+' is null');
 				//結束執行
 				return false;
 				}//if end
 			//取得每個slide的最小播放時間
 			var showTime=window.qbpwcf.slide.showTime;
 			//將輪播內容轉換為doms
 			var doms = await window.qbpwcf.slide.toDoms.call(this,eles);
 			//debug
 			//console.log(doms);
 			//取得每個 iframe 的 document
 			var iframeDocs = await window.qbpwcf.slide.loadDoms.call(this,doms);
 			//debug
 			//console.log(iframeDocs);
 			//放置讀取好的投影片
 			for(var i=0;i<iframeDocs.length;i++){
 				//取得容器 div
 				var containerDiv=iframeDocs[i].querySelector('div');
 				//放置要播放的內容
 				displayDiv.appendChild(containerDiv);
 				}//for end
 			//初始化索引為0
 			i=0;
 			//無窮迴圈
 			while(true){
 				//如果目標不存在
 				if(iframeDocs[i]===undefined){
 					//重新計數
 					i=0;
 					//下一輪
 					continue;
 					}//if end
 				//取得所有投影片
 				var slides=displayDiv.querySelectorAll('div#window_qbpwcf_slide');
 				//針對每個投影片
 				for(var j=0;j<slides.length;j++){
 					//設置放在背景
 					slides[j].style.zIndex=-1;
 					//設置為透明
 					slides[j].style.opacity=0;
 					//設置為absolute,不占用空間
 					slides[j].style.position='absolute';
 					}//for end
 				//取得當前播放的內容
 				var prePlayContent=displayDiv.querySelectorAll('div#window_qbpwcf_slide')[i];
 				//當前要播放的內容移到前景
 				prePlayContent.style.zIndex='unset';
 				//顯示當前要播放的內容
 				prePlayContent.style.opacity='unset';
 				//設置為unset,要占用空間
 				prePlayContent.style.position='unset';
 				//如果有子元素
 				if(prePlayContent.children.length>0){
 					//如果是影片
 					if(prePlayContent.children[0].tagName==='VIDEO'){
 						//播放之
 						prePlayContent.children[0].play();
 						}//if end
 					}//if end
 				//播放 showTime 秒
 				await window.qbpwcf.sleep.func(showTime);
 				//如果尚不行置換slide
 				while(prePlayContent.dataset.canChangeNow==='false'){
 					//多播放 1 秒
 					await window.qbpwcf.sleep.func(1);
 					}//while end
 				//如果有子元素
 				if(prePlayContent.children.length>0){
 					//如果是影片
 					if(prePlayContent.children[0].tagName==='VIDEO'){
 						//設置下次要等待影片播放完才能換頁
 						prePlayContent.dataset.canChangeNow=false;
 						}//if end
 					}//if end
 				//執行到這邊代表可以置換slide了
 				//計數增加
 				i++;
 				}//while end
 			}//window.qbpwcf.slide.func end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		取得用戶端的檔案.
 		回傳結果:
 		result.data,取得檔案的 base64 data
 		result.mime,取得檔案的 mime
 		result.base64,取得檔案的純 base64 部分
 		參考資料:
 		https://developer.mozilla.org/en-US/docs/Web/API/File
 		https://developer.mozilla.org/en-US/docs/Web/API/FileList
 		https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
 		https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static
 		https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
 		*/
 		//初始化
 		window.qbpwcf.clientFile={};
 		//取得用戶端檔案的參數設定
 		window.qbpwcf.clientFile.params={};
 		//初始化multiple參數為false
 		window.qbpwcf.clientFile.params.multiple=false;
 		//初始化accept參數為''
 		window.qbpwcf.clientFile.params.accept='';
 		//設置只接受video
 		window.qbpwcf.clientFile.acceptVideoOnly=function(){
 			//設置accept為'video/*'
 			window.qbpwcf.clientFile.params.accept='video/*';
 			}//function end
 		//設置只接受audio
 		window.qbpwcf.clientFile.acceptAudioOnly=function(){
 			//設置accept為'audio/*'
 			window.qbpwcf.clientFile.params.accept='audio/*';
 			}//function end
 		//設置只接受image
 		window.qbpwcf.clientFile.acceptImageOnly=function(){
 			//設置accept為'image/*'
 			window.qbpwcf.clientFile.params.accept='image/*';
 			}//function end
 		//累加允許的檔案類型
 		window.qbpwcf.clientFile.acceptAppend=function(type){
 			//如果已經有內容
 			if(window.qbpwcf.clientFile.params.accept!=''){
 				//增加允許的類型
 				window.qbpwcf.clientFile.params.accept=window.qbpwcf.clientFile.params.accept+','+type;
 				}//if end
 			//反之尚無設定
 			else{
 				//設置允許的類型
 				window.qbpwcf.clientFile.params.accept=type;
 				}//else end
 			}//function end
 		//觸發選擇檔案的視窗後，若沒有選擇到的檔案，會強制使用者再度選擇,預設為'false'不啟用；反之為'true'要啟用.
 		window.qbpwcf.clientFile.forceSelectFileAfterTrigger='false';
 		//取得用戶端的檔案,使用時前面請加上 await 才能取得回應.
 		window.qbpwcf.clientFile.init=async function(){
 			//建立 input
 			var input=document.createElement('input');
 			//設置 type 為檔案
 			input.type='file';
 			//設置multiple參數
 			input.multiple=window.qbpwcf.clientFile.params.multiple;
 			//設置multiple參數
 			input.accept=window.qbpwcf.clientFile.params.accept;
 			//初始化要回傳的結果物件
 			input.result={};
 			//預設使用者尚未取消選取檔案
 			input.canceled='false';
 			//當選擇的檔案有異動
 			input.onchange=function(){
 				//轉換與取得ObjectURL
 				input.result.url=URL.createObjectURL(input.files[0]);
 				//初始化 FileReader
 				var reader = new FileReader();
 				//讀取檔案
 				reader.readAsDataURL(input.files[0]);
 				//當檔案讀取完畢後
 				reader.onload=function(){
 					//取得檔案的 base64 data
 					input.result.data = reader.result;
 					//取得檔案的 mime
 					input.result.mime = input.result.data.split(':')[1].split(';')[0];
 					//取得檔案的純 base64 部分
 					input.result.base64 = input.result.data.split(',')[1];
 					}//function end
 				};//function end
 			//綁定使用按下取消的事件
 			//參考資料:
 			//https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/cancel_event
 			input.addEventListener('cancel',function(event){
 				//debug
 				//console.log(event,Object.keys(input.result).length);return false;
 				//如果沒有結果
 				if(Object.keys(input.result).length===0){
 					//設置被按下cancel了
 					input.canceled='true';
 					}//if end
 				});
 			//觸發使用者選擇檔案
 			input.click();
 			//無窮迴圈
 			while(true){
 				//如果使用者取消了
 				if(input.canceled==='true'){
 					//回傳結果
 					return input.result;
 					}//if end
 				//休息一秒
 				await window.qbpwcf.sleep.func(1);
 				//debug
 				console.log('wait file selected');
 				//如果有結果
 				if(input.result!={}){
 					//如果
 					if(
 						//url存在
 						input.result.url!=undefined
 						&&
 						//data存在
 						input.result.data!=undefined
 						&&
 						//mime存在
 						input.result.mime!=undefined
 						&&
 						//base64存在
 						input.result.base64!=undefined
 						){
 						//執行到這代表資料都有了
 						//結束迴圈
 						break;
 						}//if end
 					}//if end
 				}//while end
 			//回傳結果
 			return input.result;
 			};
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		text_editor,編輯文字.
 		*/
 		//初始化
 		window.qbpwcf.text_editor={};
 		//用於取得顯示輸入內容的區塊
 		window.qbpwcf.text_editor.selector='';
 		//執行
 		window.qbpwcf.text_editor.init=function(){
 			//取得用來顯示輸入內容的 selector
 			var displayTag=document.querySelector(window.qbpwcf.text_editor.selector);
 			//取得一開始的內容,用一個div代表一行.
 			var lines=displayTag.children;
 			//關注用來顯示輸入內容的元素後
 			displayTag.addEventListener('focus',function(event){
 				//取得觸發的元素
 				var eTarget=event.target;
 				//debug
 				console.log(eTarget);
 				//建立暫存的textInput
 				var tempInput=document.createElement('input');
 				//設置為單行輸入
 				tempInput.type='text';
 				//break point
 				return;
 				//初始化內容
 				tempInput.value=contentOfTag;
 				//關注之
 				tempInput.focus();
 				//若內容有改變
 				tempInput.addEventListener('change',function(event){
 					//更新用來顯示輸入的內容
 					displayTag.innerText=this.value;
 					});
 				});
+			}
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		openWindow,由javaScript開啟可管控的視窗,甚至存取其內容.
 		範例:
 		//第一段
 		var script=document.createElement('script');
 		script.src='https://latest.qbpwcf.org/qbpwcf/javaScript/qbpwcf.php';
 		document.head.appendChild(script);
 		//第二段
 		window.qbpwcf.openWindow.params.url=window.location.href;
 		window.qbpwcf.openWindow.saveSourceAtTheEnd='true';
 		await window.qbpwcf.openWindow.func();
 		參考資料:
 		https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
 		https://developer.mozilla.org/en-US/docs/Web/API/File/File
 		*/
 		//初始化物件
 		window.qbpwcf.openWindow={};
 		//初始化參數
 		window.qbpwcf.openWindow.init=function(){
 			//初始化參數物件
 			window.qbpwcf.openWindow.params={};
 			//初始化目標網址
 			window.qbpwcf.openWindow.params.url='https://sourceforge.net/projects/qbpwc/';
 			//初始化要將window.open()儲存到哪個全域變數裡面.
 			window.qbpwcf.openWindow.params.varName='qbpwcf_openWindow_instance';
 			//初始化給予 window.open() 的第三個參數.
 			window.qbpwcf.openWindow.params.windowFeatures='';
 			//初始化window.open()後，其回應的html source
 			window.qbpwcf.openWindow.resSource='';
 			//初始化window.open()後，要執行什麼操作,參數Window為其opened的Window的.
 			window.qbpwcf.openWindow.actionAfterOpen=function(Window){
 				//預設的提示訊息
 				console.log('do something after window.oepn()');
 				}//actionAfterOpen end
 			//預設window.open()後經過處理後結果不要下載下來
 			window.qbpwcf.openWindow.saveSourceAtTheEnd='false';
 			}//funciton end
 		//初始化參數
 		window.qbpwcf.openWindow.init();
 		//window.open
 		window.qbpwcf.openWindow.func=async function(){
 			//window.open()並儲存回傳的結果
 			window[window.qbpwcf.openWindow.params.varName]=await window.open(window.qbpwcf.openWindow.params.url,'_blank',window.qbpwcf.openWindow.params.windowFeatures);
 			//如果執行失敗
 			if(!(window[window.qbpwcf.openWindow.params.varName])){
 				//提示錯誤訊息
 				console.error('The window wasn\'t allowed to open. This is likely caused by built-in popup blockers.');
 				//結束執行
 				return;
 				}//if end
 			//加入load事件
 			window[window.qbpwcf.openWindow.params.varName].addEventListener('load',function(event){
 				//debug
 				//console.log(this);
 				//呼叫開啟後要做度事情
 				window.qbpwcf.openWindow.actionAfterOpen(this);
 				//取得html原始碼
 				window.qbpwcf.openWindow.resSource='<html>'+window[window.qbpwcf.openWindow.params.varName].document.head.outerHTML+window[window.qbpwcf.openWindow.params.varName].document.body.outerHTML+'</html>';
 				//如果要下載內容
 				if(window.qbpwcf.openWindow.saveSourceAtTheEnd=='true'){
 					//建立檔案File
 					var filed2download=new File([window.qbpwcf.openWindow.resSource],'filed2download');
 					//建立用來讀取檔案的FileReader
 					var fileReader=new FileReader();
 					//檔案讀取完畢後
 					fileReader.addEventListener('load',function(event){
 						//取得dataUrl
 						dataUrl=fileReader.result;
 						//建立 a
 						var a=document.createElement('a');
 						//設置連結為dataUrl
 						a.href=dataUrl;
 						//點擊開始下載
 						a.click();
 						});
 					//讀取檔案為 dataUrl]
 					fileReader.readAsDataURL(filed2download);
 					}//if end
 				});
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		儲存當前頁面的原始碼
 		範例:
 		window.qbpwcf.saveSource();
 		*/
 		//儲存當前頁面原始碼
 		window.qbpwcf.saveSource=async function(){
 			//取得原始碼
 			var sourceStr='<html>'+document.head.outerHTML+document.body.outerHTML+'</html>';
 			//建立File,檔案名稱隨機產生.
 			var file2download=new File([sourceStr],'file2download');
 			//建立用來讀取檔案的FileReader
 			var fileReader=new FileReader();
 			//檔案讀取完畢後
 			fileReader.addEventListener('load',function(event){
 				//取得dataUrl
 				dataUrl=fileReader.result;
 				//建立 a
 				var a=document.createElement('a');
 				//設置連結為dataUrl
 				a.href=dataUrl;
 				//點擊開始下載
 				a.click();
 				});
 			//讀取檔案為 dataUrl
 			fileReader.readAsDataURL(file2download);
 			}//function end
 		";
 		#js function
 		$conf["javaScript::toScript"]["jsFunciton"][]=
+		"
 		/*
 		說明:
 		將要執行的任務交由 web socket 處理.
 		範例:
 		//初始化參數
 		var params={};
 		//設定websocket位置
 		params.url='wss://'+location.hostname+':443/wss';
 		//要傳輸的資料
 		params.data={};
 		//用來識別是所需要資料的id
 		params.data.id=crypto.randomUUID();
 		//取得對應的回應
 		var response=await window.qbpwcf.ws.init(params);
 		*/
 		//該方法的物件
 		window.qbpwcf.ws={};
 		//連線到web socket,並傳輸資料,會回傳promise.亦即要在 async function 中使用,且使用 await 來取得結果.
 		//params,參數物件.
 		//params.url,web socket的url,加密的連線為wss://url,預設為當前頁面的 domain name/wss
 		//params.callback,函式,參數為收到的訊息,收到訊息後要怎麼處理.
 		//params.data,要傳輸的資料物件.
 		//params.data.id,用於識別wss連線是屬於誰的id資訊,預設為自動產生.
 		window.qbpwcf.ws.init=async function(params){
 			//回傳 Promise
 			return new Promise(function(resolve, reject){
 				//若無參數
 				if(Object.keys(params).length==0){
 					//初始化參數
 					params={};
 					//設定websocket位置
 					params.url='wss://'+location.hostname+':443/';
 					//要傳輸的資料
 					params.data={};
 					//用來識別是所需要資料的id
 					params.data.id=crypto.randomUUID();
 					//收到資料後要做的事情
 					params.callback=function(msg){
 						//debug
 						console.log('run callback');
 						}//function end
 					}//if end
 				//如果沒有 url 參數
 				if(params.url==undefined){
 					//初始化要回傳的結果
 					var result={};
 					//設置錯誤訊息
 					result.error='missing param url';
 					//設置執行失敗
 					result.status='false';
 					//回傳結果, await 可以有結果.
 					reject(result);
 					}//if end
 				//如果無 params.data 參數
 				if(params.data==undefined){
 					//初始化要回傳的結果
 					var result={};
 					//設置錯誤訊息
 					result.error='missing param data';
 					//設置執行失敗
 					result.status='false';
 					//回傳結果, await 可以有結果.
 					reject(result);
 					}//if end
 				//如果沒有儲存所有wss連線的變數存在
 				if(this.qbpwcf.ws.wss==undefined){
 					//初始化為空物件
 					this.qbpwcf.ws.wss={};
 					}//if end
 				//設置 既有的 web socket 實體清單 參考
 				var wsList={
 					//取得本函式的參數參考
 					'params':params,
 					//取得既有的 web socket 實體清單
 					'list':Object.keys(window.qbpwcf.ws.wss),
 					}//wsList end
 				//針對每個實體清單
 				for(key in wsList.list){
 					//如果有同樣目標的連線
 					if(key==params.url){
 						//使用既有的連線
 						var conn=value;
 						//如果有要傳遞資料
 						if(params.data!={}){
 							//傳遞資料
 							conn.send(JONS.toString(params.data));
 							//如果更新要識別的id?
 							//...
 							}//if end
 						//結束for
 						break;
 						}//if end
 					}//for end
 				//如果尚無可用的ws連線
 				if(conn==undefined){
 					//設定webSocket的連線目標
 					var conn = new WebSocket(params.url);
 					//設置上層參考
 					conn.mother=this.qbpwcf.ws;
 					//設置本函式參數的參考
 					conn.params=params;
 					//儲存可以使用的連線
 					window.qbpwcf.ws.wss[params.url]=conn;
 					//當有收到訊息時
 					conn.onmessage = async function(e){
 						//debug
 						console.log(e);
 						//解析成json
 						var revJson=JSON.parse(e.data);
 						//如果有 id
 						if(revJson.id!=undefined){
 							//如果id符合
 							if(revJson.id==params.data.id){
 								//卸除Object revJson的id屬性
 								delete revJson.id;
 								//resolve, await 可以有結果.
 								resolve(revJson);
 								}//if end
 							}//if end
 						//如果有 callback
 						if(this.params.callback!=undefined){
 							//callback,收到資料後要做的事情,參數為收到的訊息.
 							this.params.callback(e.data);
 							}//if end
 						//反之
 						else{
 							//直接resolve結果
 							resolve(e.data);
 							}//else end
 						}//function end
 					//當連線斷開後
 					conn.onclose = async function(e){
 						//debug
 						console.log('onclose');
 						//等待1秒
 						await window.qbpwcf.sleep.func(1);
 						//重新嘗試一次.
 						this.mother.init(this.params);
 						}//function end
 					//當遇到錯誤時
 					conn.onerror = async function(e){
 						//初始化要回傳的結果
 						var result={};
 						//設置錯誤訊息
 						result.error=e;
 						//設置執行失敗
 						result.status='false';
 						//回傳結果, await 可以有結果.
 						reject(result);
 						}//function end
 					//建立與當連線成功後
 					conn.onopen = async function(e){
 						//如果無要傳遞資料
 						if(params.data==undefined){
 							//結束
 							return;
 							}//if end
 						//如果有要傳遞資料
 						if(params.data!={}){
 							//debug
 							console.log(params.data);
 							//將訊息顯現在console
 							console.log('send:'+JSON.stringify(params.data));
 							//傳遞資料
 							conn.send(JSON.stringify(params.data));
 							}//if end
 						}//function end
 					}//if end
 				//Promise must return something
 				resolve(null);
 				});//Promise end
 			}//function end
 		";
 		#$conf["noScriptTag"],字串,是否不要輸出<script></script>,預設為"false",代表要輸出;反之為"true",代表不要輸出.
 		$conf["javaScript::toScript"]["noScriptTag"]=$conf["noScriptTag"];
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#回傳結果
 		return $result;
 		}#function conDownload end
 	/*
 	#函式說明:
 	#建立rwd的置頂menu,橫向span選單遇到寬度不足會變成div選單,其中第一個元素爲Logo.
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	#必填參數:
 	#$conf["firstEleId"],字串,選單的擡頭元素id.
 	$conf["firstEleId"]="";
 	#$conf["otherEleClass"],字串,除擡頭選單外項目的共同類別名稱.
 	$conf["otherEleClass"]="";
 	#可省略參數:
 	#$conf["bgColor"],字串,選單的背景顏色,預設爲"#FFFFFF".
 	#$conf["bgColor"]="";
 	#參考資料:
 	#無.
 	#備註:
 	#bgColor尚未實作
 	#固定在頂端或底端的功能未實作
 	*/
 	public static function rwdMenu($conf){
 		return css::rwdMenu($conf);
 		}#function rwdMenu end
 	/*
 	#函式說明:
 	#建立廣告幻燈片,實際上為div的背景會隨着時間變化.
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	$conf["divId"]="";
 	#$conf["divClass"],字串,廣告區域用於套用動畫效果的div class名稱.
 	$conf["divClass"]="";
 	#$conf["adImg"],字串陣列,廣告圖片的網站陣列.
 	$conf["adImg"]=array();
 	#可省略參數:
 	#無.
 	#參考資料:
 	#無.
 	#備註:
 	#bgColor尚未實作
 	#固定在頂端或底端的功能未實作
 	*/
 	public static function adImg($conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			#回傳結果
 			return $result;
 			}#if end
 		#初始化要回傳的語法
 		$result["content"]="";
 		#ad bar
 		#函式說明:
 		#<div>區塊,裡面可以指定css的class樣式,可以指定提示文字.
 		#$result["status"],字串,執行否正常,"true"代表正常,"false"代表不正常.
 		#$result["functin"],字串,當前函數的名稱.
 		$divSection=css::divSection($conf["css::divSection"]);
 		unset($conf["css::divSection"]);
 		#如果建立div區塊失敗
 		if($divSection["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$divSection;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$divSection["content"];
 		#儲存廣告圖片的計數
 		$adImgCount=count($conf["adImg"]);
 		#函式說明:
 		#製作針對 css class 的動畫,請套用在div上,才會有效果
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 		#$result["content"],css動畫設定的語法
 		#$conf["delay"],字串,動畫要延遲幾秒開始,例如"0s".
 		$conf["css::animation"]["delay"]="0s";
 		#$conf["speedMode"],字串,動畫執行過程的速度要用什麼模式來執行,"linear"代表等速,"ease"代表起始跟結尾是靜止的,中間是最快的.
 		$conf["css::animation"]["speedMode"]="linear";
 		#可省略參數:
 		#每個廣告圖片的依存時間百分比.
 		$perImgPercentage=(int)(100/$adImgCount/2);
 		#$conf["keyFrameStartPoint"],字串陣列,各個動畫單位開始的時間百分比,"0%"與"from"代表一開始,"100%"與"to"代表時間結束.
 		#$conf["css::animation"]["keyFrameStartPoint"]=array("0%","10%","30%","70%","90%","100%");
 		#針對每個廣告圖片
 		for($i=1;$i<=$adImgCount*2;$i=$i+2){
 			#如果是第一個
 			if($i===1){
 				#起始點
 				$conf["css::animation"]["keyFrameStartPoint"][]="0%";
 				$conf["css::animation"]["keyFrameStartPoint"][]=$perImgPercentage*$i."%";
 				}#if end
 			#反之如果是最後一個
 			else if($i===$adImgCount*2-1){
 				#最後一點
 				$conf["css::animation"]["keyFrameStartPoint"][]=$perImgPercentage*($i)."%";
 				$conf["css::animation"]["keyFrameStartPoint"][]="100%";
 				}#if end
 			#其他狀況
 			else{
 				#擺兩個點，在區間內呈現
 				$conf["css::animation"]["keyFrameStartPoint"][]=$perImgPercentage*($i-1)."%";
 				#$i多加1
 				$conf["css::animation"]["keyFrameStartPoint"][]=$perImgPercentage*($i+1)."%";
 				}#else end
 			}#for end
 		#debug
 		#var_dump($conf["css::animation"]["keyFrameStartPoint"]);
 		#$conf["keyFrameCssMoveAttribute"],二維字串陣列,各個動畫影格子的與動畫相關的css屬性.
 		#$conf["keyFrameCssMoveAttribute"][]=array();
 		#$conf["keyFrameCssMoveValue"],二維字串陣列,各個動畫影格子的與動畫相關的css屬性.
 		#$conf["keyFrameCssMoveValue"][]=array();
 		#$conf["keyFrameCssAttribute"],二維字串陣列,各個動畫影格子的一般非動畫的css屬性.
 		#跑 $adImgCount*2 的次數
 		for($i=0;$i<$adImgCount*2;$i++){
 			$conf["css::animation"]["keyFrameCssAttribute"][]=array("background-image");
 			}#for end
 		#$conf["keyFrameCssValue"],二維字串陣列,各個動畫格子的css屬性數值.
 		#跑 $adImgCount 的次數
 		for($i=0;$i<$adImgCount;$i++){
 			#兩個點的圖片要一致
 			$conf["css::animation"]["keyFrameCssValue"][]=array("url('".$conf["adImg"][$i]."')");
 			$conf["css::animation"]["keyFrameCssValue"][]=array("url('".$conf["adImg"][$i]."')");
 			}#for end
 		#參考資料:
 		#css動畫,http://blogger.gtwang.org/2013/12/using-css3-animation.html
 		#w3c的animation-keyframes,http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
 		$animation=css::animation($conf["css::animation"]);
 		unset($conf["css::animation"]);
 		#如果建立動畫失敗
 		if($animation["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$animation;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$animation["content"];
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//debug
 		console.log('loaded');
 		//get scroll div
 		var scrollDiv=document.getElementById('".$conf["divId"]."');
 		//set click one to 0
 		scrollDiv.dataset.clickOnce=0;
 		//scrolliv click event
 		scrollDiv.addEventListener('click',function(e){
 			//set scroll div id
 			var scrollDivId='".$conf["divId"]."';
 			//get scroll div
 			var scrollDiv=document.getElementById(scrollDivId);
 			//如果已經點擊過一次了
 			if(scrollDiv.dataset.clickOnce==='1'){
 				//結束事件
 				return true;
 				}//if end
 			//觸發者非div
 			if(e.target.id!==scrollDivId){
 				//debug
 				console.log(e.target.id+'!=='+scrollDivId);
 				//debug
 				console.log(e.target);
 				//end function
 				return false;
 				}//if end
 			//debug
 			console.log(e.target);
 			//get target computed style
 			var tcs=window.getComputedStyle(e.target,null);
 			//debug
 			console.log(tcs);
 			//get style background image url
 			var tcsBg=tcs.backgroundImage;
 			//debug
 			console.log(tcsBg);
 			//split by '/'
 			var splitedStr=tcsBg.split('/');
 			//debug
 			for(i=0;i<splitedStr.length;i++){
 				//show each section str
 				console.log(splitedStr[i]);
 				}//for end
 			//get clicked image file name
 			var clickedImgName=splitedStr[splitedStr.length-1].split('\")')[0];
 			//debug
 			console.log(clickedImgName);
 			//split by '\"'
 			var splitedStr=tcsBg.split('\"');
 			//get clickedImgUrl
 			var clickedImgUrl=splitedStr[1];
 			//debug
 			console.log(clickedImgUrl);
 			//delete applied class
 			scrollDiv.classList={};
 			//set clicked image
 			scrollDiv.style.backgroundImage='url('+clickedImgUrl+')';
 			//設置點擊過一次了
 			scrollDiv.dataset.clickOnce='1';
 			//scrolliv click event
 			scrollDiv.addEventListener('click',function(e){
 				//set scroll div id
 				var scrollDivId='".$conf["divId"]."';
 				//get scroll div
 				var scrollDiv=document.getElementById(scrollDivId);
 				//如果已經點擊過一次了
 				if(scrollDiv.dataset.clickOnce!=='1'){
 					//結束執行
 					return true;
 					}//if end
 				//debug
 				console.log('should change to next pic');
 				//debug
 				console.log(e.target);
 				//get target computed style
 				var tcs=window.getComputedStyle(e.target,null);
 				//debug
 				console.log(tcs);
 				//get style background image url
 				var tcsBg=tcs.backgroundImage;
 				//debug
 				console.log(tcsBg);
 				//split by '/'
 				var splitedStr=tcsBg.split('/');
 				//debug
 				for(i=0;i<splitedStr.length;i++){
 					//show each section str
 					console.log(splitedStr[i]);
 					}//for end
 				//get clicked image file name
 				var clickedImgName=splitedStr[splitedStr.length-1].split('\")')[0];
 				//debug
 				console.log(clickedImgName);
 				//split by '\"'
 				var splitedStr=tcsBg.split('\"');
 				//get clickedImgUrl
 				var clickedImgUrl=splitedStr[1];
 				//debug
 				console.log(clickedImgUrl);
 				//set img array
 				var imgArray=".json_encode($conf["adImg"]).";
 				//無窮迴圈
 				for(i=0;i<".$adImgCount.";i++){
 					//如果找到點擊的圖片
 					if(clickedImgUrl.includes(imgArray[i])){
 						//debug
 						console.log(i+'<".$adImgCount."');
 						//如果是最後一張圖片
 						if(i===".$adImgCount."-1){
 							//設置為第一張圖片
 							i=0;
+							}
 						//反之+1
 						else{
 							i++;
 							}//else end
 						//debug
 						console.log('set img to '+imgArray[i]);
 						//set clicked image
 						scrollDiv.style.backgroundImage='url('+imgArray[i]+')';
 						//debug
 						console.log('end for');
 						//end for
 						break;
 						}//if end
 					}//for end
 				});//scrollDiv addEventListener end
 			});//scrollDiv click event end
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立 script 語法失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}//function adImg end
 	/*
 	#函式說明:
 	#區塊輪播的效果
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	#必填參數:
 	#$conf["place"],字串,輪播區塊要在哪個元素裡面呈現,其區塊特徵為何?(請參閱javascript的querySelector函式).
 	$conf["place"]="";
 	#$conf["slideDiv"],字串陣列,每個投影片的div區塊特徵(請參閱javascript的querySelector函式).
 	$conf["slideDiv"]=array("");
 	#可省略參數:
 	#$conf["sec"],字串,過幾秒就要置換成下一張投影片,預設為"5",代表每5秒就換一張投影片.
 	#$conf["sec"]="5";
 	#參考資料:
 	#無.
 	#備註:
 			#回傳結果
 			return $result;
 			}#if end
 		#初始化要回傳的語法
 		$result["content"]="";
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//取得內部要放置投影片內容的區塊
 		var displayArea=document.querySelector('".$conf["place"]."');
 		//get left value
 		var leftP=displayArea.offsetLeft+'px';
 		//get top value
 		var topP=displayArea.offsetTop+'px';
 		//get width value
 		var widthP=displayArea.clientWidth;
 		//get height value
 		var heightP=displayArea.clientHeight;
 		//不顯示原始內容
 		displayArea.style.opacity=0;
 		displayArea.style.zIndex=-1;
 		//取得投影片的數量
 		var slideCount=".count($conf["slideDiv"])."
 		//宣告儲存投影片陣列的變數
 		var slide=[];
 		";
 		#針對每個投影片
 		foreach($conf["slideDiv"] as $index=>$slide)
+		{
 			#串接js內容
 			$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"].
+			"
 			//取得投影片的區塊元素
 			var content=document.querySelector('".$slide."');
 			//強制設定其位置為看不到的地方
 			content.style.position='absolute';
 			content.style.left='-100vw';
 			content.style.top='-100vh';
 			//設置投影片的資訊
 			var info={};
 			//設置投影片的left資訊
 			info.left=getComputedStyle(content).left;
 			//設置投影片的top資訊
 			info.top=getComputedStyle(content).top;
 			//初始化儲存單一投影片的結構
 			var slideObject={};
 			//設置投影片的內容
 			slideObject.content=content;
 			//設置投影片的資訊
 			slideObject.info=info;
 			//儲存投影片到陣列
 			slide.push(slideObject);
 			";
+		}
 		#串接js的內容.
 		$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"].
+		"
 		//debug
 		//console.log(slide);
 		//設置投影片置換的等待秒數
 		var sec=".$conf["sec"].";
 		//設置等待時間的函式
 		var timeout=function(sec)
+		{
 			return new Promise(resolve =>
+			{
 				setTimeout(() =>
+				{
 					resolve(sec);
 				}, sec*1000);
 			});
+		}
 		//建立與執行隨着畫面大小改變而更新播放區域資訊的函式
 		var updateDisplayInfo=window.addEventListener('resize',function()
+		{
 			//更新投影區域資訊
 			leftP=displayArea.offsetLeft+'px';
 			topP=displayArea.offsetTop+'px';
 			widthP=displayArea.clientWidth+'px';
 			heightP=displayArea.clientHeight+'px';
 			//初始化要更新的投影片索引為-1
 			var showedSlideIndex=-1;
 			//針對每個投影片
 			for(var i=0;i<slideCount;i++)
+			{
 				//如果是正在顯示的投影片
 				if(slide[i].content.dataset.show==='true')
+				{
 					//取得當前播放的投影片索引
 					showedSlideIndex=i;
+				}
+			}
 			//如果有抓取到正在播放的投影片索引
 			if(showedSlideIndex!==-1)
+			{
 				//更新正在投影的投影片
 				slide[showedSlideIndex].content.style.top=topP;
 				slide[showedSlideIndex].content.style.left=leftP;
 				slide[showedSlideIndex].content.style.width=widthP;
 				slide[showedSlideIndex].content.style.height=heightP;
+			}
 		});
 		//宣告置換投影片的函式
 		var changeSlide=async function(page)
+		{
 			//debug
 			//console.log('start chaneg slide');
 			//如果要顯示的投影片編號超出範圍
 			if(page > slideCount - 1)
+			{
 				//代表是要顯示第一張投影片
 				page=0;
+			}
 			//取得要隱藏的投影片編號
 			var lastSlideNo=page-1;
 			//如果要隱藏的投影片編號是負的
 			if(lastSlideNo < 0)
+			{
 				//代表要隱藏的投影片編號最後一張
 				lastSlideNo = slideCount - 1;
+			}
 			//隱藏上一張投影片
 			slide[lastSlideNo].content.style.top=slide[lastSlideNo].info.top;
 			slide[lastSlideNo].content.style.left=slide[lastSlideNo].info.left;
 			slide[lastSlideNo].content.dataset.show='false';
 			//顯示下一張投影片
 			slide[page].content.style.top=topP;
 			slide[page].content.style.left=leftP;
 			slide[page].content.style.width=widthP;
 			slide[page].content.style.height=heightP;
 			slide[page].content.dataset.show='true';
 			//等待時間
 			await timeout.call(this,sec);
 			//呼叫自己
 			changeSlide.call(this,page+1);
+		}
 		//每過了 sec 秒後就置換投影片
 		changeSlide.call(this,0);
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 		#$conf["globalJs"]=array();
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		#備註:
 		#無.
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立 script 語法失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 	}#function slideDiv end
 	/*
 	#函式說明:
 	#簡易版區塊輪播的效果,要輪播的內容為$conf["place"]特徵區塊的children元素.
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	#$result["function"],當前執行的函數名稱.
 	#$result["content"],語法.
 	#必填參數:
 	#$conf["place"],字串,輪播區塊要在哪個元素裡面呈現,其區塊特徵為何?(請參閱javascript的querySelector函式).
 	$conf["place"]="";
 	#可省略參數:
 	#$conf["sec"],字串,過幾秒就要置換成下一張投影片,預設為"5",代表每5秒就換一張投影片.
 	#$conf["sec"]="5";
 	#參考資料:
 	#無.
 	#備註:
 			#回傳結果
 			return $result;
 			}#if end
 		#初始化要回傳的語法
 		$result["content"]="";
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//取得要放置投影片內容的區塊
 		var displayArea=document.querySelector('".$conf["place"]."');
 		//如果無投影片的內容存在
 		if(displayArea.children.length<1){
 			//提示錯誤
 			console.error('無投影片內容');
 			//結束執行
 			return;
 			}//if end
 		//設置投影片的數量
 		var slideCount=displayArea.children.length;
 		//設置投影片置換的等待秒數
 		var sec=".$conf["sec"].";
 		//設置等待時間的函式
 		var timeout=function(sec)
+		{
 			return new Promise(resolve =>
+			{
 				setTimeout(() =>
+				{
 					resolve(sec);
 				}, sec*1000);
 			});
+		}
 		//宣告置換投影片的函式
 		var changeSlide=async function(page)
+		{
 			//隱藏所有投影片
 			for(var i=0;i<slideCount;i++)
+			{
 				//隱藏投影片
 				displayArea.children[i].style.display='none';
 			}//for end
 			//如果page超過上限
 			if(page===slideCount)
+			{
 				//設置為第1個投影片
 				page=0;
+			}
 			//顯示投影片
 			displayArea.children[page].style.display='inline-block';
 			//等待時間
 			await timeout.call(this,sec);
 			//呼叫自己
 			changeSlide.call(this,page+1);
+		}
 		//每過了 sec 秒後就置換投影片
 		changeSlide.call(this,0);
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		#備註:
 		#無.
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立 script 語法失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
+	}
 	/*
 	#函式說明:
 	#建立點擊後會移到最頂端的 span icon,位於頂端時則會隱藏.
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	#$result["function"],當前執行的函數名稱.
 	#$result["content"],語法.
 	#必填參數:
 	#$conf["id"],字串,廣告區域的span id.
 	$conf["id"]="";
 	#可省略參數:
 	#$conf["img"],字串,gotop的icon位置與名稱,預設爲base64加密svg圖檔.
 	#$conf["img"]="";
 	#$conf["mimeType"],字串,圖檔的mime type,預設爲image/*.
 	#$conf["mimeType"]="image/*";
 	#$conf["fileArgu"],字串, __FILE__ 的內容,若有設置img參數,則也要設置該參數.
 	#備註:
 	#bgColor尚未實作
 	#固定在頂端或底端的功能未實作
 	*/
 	public static function goTopIcon(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			#回傳結果
 			return $result;
 			}#if end
 		#如果有設置 $conf["img"] 跟 $conf["fileArgu"]
 		if( isset($conf["img"]) && isset($conf["fileArgu"]) ){
 			#移到最上面的icon
 			#函式說明:
 			#用data:mimeType;base64,imgVar的形式來提供圖片的連結,亦即圖片儲存在變數裡面,本函式包含顯示圖片的語法.
 			#回傳結果:
 			#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#$result["error"],錯誤訊息
 			#$result["content"],圖片的連結資訊
 			#$result["function"],當前執行的函數名稱
 			#必填參數:
 			#$conf["imgPosition"],要轉存成2元碼的圖片檔案位置與名稱
 			$conf["img::data"]["imgPosition"]=$conf["img"];
 			#$conf["fileArgu"],字串,php變數__FILE__的內容,亦即該檔案在檔案系統的絕對路徑.
 			$conf["img::data"]["fileArgu"]=$conf["fileArgu"];
 			#$conf["alt"]="";
 			#$conf["style"],字串陣列,要使用的style,key為樣式名稱,value為樣式值.
 			#$conf["style"]=array();
 			#$conf["class"],圖片要套用的css樣式名稱.
 			#$conf["class"]="";
 			#如果有設置 $conf["mimeType"]
 			if(isset($conf["mimeType"])){
 				#$conf["mimeType"],2元碼的內容是什麼,預設為"image/*".
 				$conf["img::data"]["mimeType"]=$conf["mimeType"];
 				}#if end
 			#$conf["compressType"],2元碼壓縮的方式,預設為"base64".
 			#$conf["compressType"]="base64";
 			#$conf["delImg"],讀取完圖片檔案後,要移除圖片嗎？"true"代表要移除,"false"代表不要移除,預設為"false".
 			#$conf["delImg"]="false";
 			#參考資料:
 			$data=img::data($conf["img::data"]);
 			unset($conf["img::data"]);
 			#如果建立 span section 失敗
 			if($data["status"]==="false"){
 				#設置執行失敗
 				$result["status"]="false";
 				#設置執行錯誤訊息
 				$result["error"]=$data;
 				#回傳結果
 				return $result;
 				}#if end
 			}#if end
 		#反之設置爲
 		else{
 			#預設的 go top svg base64 encode
 			$data["content"]="<img src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iOTAiCiAgIGhlaWdodD0iOTAiCiAgIHZpZXdCb3g9IjAgMCA4OS45OTk5OSA4OS45OTk5OTkiCiAgIGlkPSJzdmcyIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTEgcjEzNzI1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJ0b3Auc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2xpdmV1c2VyL3B1YmxpY19odG1sL3NhbXBsZVBhZ2UvZmFjdG9yeS9pbWcvdG9wLnN2Zy5wbmciCiAgIGlua3NjYXBlOmV4cG9ydC14ZHBpPSI5MCIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjkwIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzNCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMS40IgogICAgIGlua3NjYXBlOmN4PSI0NS4xMDA5NjYiCiAgICAgaW5rc2NhcGU6Y3k9IjEzMS45NjQ5MiIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzMzNTkiCiAgICAgc2hvd2dyaWQ9InRydWUiCiAgICAgc2hvd2d1aWRlcz0iZmFsc2UiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjMiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMxIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgdW5pdHM9InB4Ij4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMzNjQiIC8+CiAgPC9zb2RpcG9kaTpuYW1lZHZpZXc+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtOTYyLjM2MjIyKSI+CiAgICA8ZwogICAgICAgaWQ9ImczMzU5IgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMC45OTkzNzg1OCwwLDAsMS4wNDIxOTk3LC0zMTIuODc2ODUsNzkwLjE2OTMxKSI+CiAgICAgIDxnCiAgICAgICAgIGlkPSJnMzMzOCIKICAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMC45OTE2NDk1LDAsMCwxLjAyNDkzNTQsMi42MzA5MTk2LC01LjU1NTczMDYpIj4KICAgICAgICA8cmVjdAogICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjIuNjY5MTU5NjUiCiAgICAgICAgICAgaWQ9InJlY3QzMzQ1IgogICAgICAgICAgIHdpZHRoPSI4OC4zMzA4NDEiCiAgICAgICAgICAgaGVpZ2h0PSI4MS41NTk4NDUiCiAgICAgICAgICAgeD0iMzEzLjY5MTI1IgogICAgICAgICAgIHk9IjE2OC4yODE3NyIKICAgICAgICAgICByeT0iNDEuNjY1NDA1IgogICAgICAgICAgIHJ4PSI0NC4xNjU0MjEiIC8+CiAgICAgICAgPHRleHQKICAgICAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIgogICAgICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgICAgeD0iMzI1LjcxNDI5IgogICAgICAgICAgIHk9IjIyMi4zNjIyIgogICAgICAgICAgIGlkPSJ0ZXh0MzM0NyIKICAgICAgICAgICBzb2RpcG9kaTpsaW5lc3BhY2luZz0iMTI1JSI+PHRzcGFuCiAgICAgICAgICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIgogICAgICAgICAgICAgaWQ9InRzcGFuMzM0OSIKICAgICAgICAgICAgIHg9IjMyNS43MTQyOSIKICAgICAgICAgICAgIHk9IjIyMi4zNjIyIj5Ub3A8L3RzcGFuPjwvdGV4dD4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==\">";
 			}#else end
 		#移到最上面的icon div
 		#函式說明:
 		#<span>區塊,裡面可以指定css的class樣式,可以指定提示文字,若要使用移動的css樣式,請改用divSection函數.
 		$spanSection=css::spanSection($conf["css::spanSection"]);
 		unset($conf["css::spanSection"]);
 		#如果建立 span section 失敗
 		if($spanSection["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$spanSection;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存 top span
 		$result["content"]=$result["content"].$spanSection["content"];
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#必填參數:
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]="
 		//get topspan
 		var topSpan=document.getElementById('".$conf["id"]."');
 		//scrolliv click event
 		topSpan.addEventListener('click',function(e){
 			//滑到頂端
 			document.scrollingElement.scrollTop=0;
 			});//topSpan addEventListener end
 		//當滾軸滾動時觸發
 		window.addEventListener('scroll', function(e){
 			//get last scroll y
 			var last_known_scroll_position = window.scrollY;
 			//get topspan
 			var topSpan=document.getElementById('".$conf["id"]."');
 			//如果是在網頁頂端
 			if(last_known_scroll_position===0){
 				//隱藏往頂端的圖示
 				topSpan.style.display='none';
 				}//if end
 			//反之
 			else{
 				//get topspan to show
 				topSpan.style.display='inline';
 				}//else end
 			});//window scroll event end
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立js失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存 top span
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#funcion goTopIcon end
 	/*
 	#函式說明:
 	#透過ajax遞迴取得檔案的內容,類似tail指令的效果.
 	#回傳結果:
 	#$result["argu"],使用的參數.
 	#$result["content"],語法.
 	#必填參數:
 	#$conf["url"],字串,提供tail ajax的網址.
 	$conf["url"]="";
 	#可省略參數:
 	#$conf["rootDivId"],字串,root div的id,預設為"tailRootDiv".
 	#$conf["rootDivId"]="tailRootDiv";
 	#參考資料:
 	#無.
 	#備註：
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 		#$result["function"],當前執行的函數名稱
 		#$result["content"],要執行的javaScript語法
 		#必填參數:
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]="
 		//initial window.tail
 		if(window.tail===undefined){
 			//初始化 window.tail
 			window.tail={};
 			//初始化繼續執行
 			window.tail.continue=true;
 			}//if end
 		//create root div
 		window.tail.rootDiv = document.createElement('div');
 		window.tail.rootDiv.id = '".$conf["rootDivId"]."';
 		document.body.appendChild(window.tail.rootDiv);
 		//set tail url
 		window.tailUrl='".$conf["url"]."';
 		//設置周期執行的涵式
 		window.tail.ajax = function(line2start){
 			xmlhttp=new XMLHttpRequest();
 			xmlhttp.responseType='json';
 			xmlhttp.timeout=60000;
 			xmlhttp.open('POST',window.tailUrl,true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//debug
 					console.log(res);
 					//針對每個輸出的行
 					for(var i=0;i<xmlhttp.response.lines;i++){
 						//set output line
 						var div=document.createElement('div');
 						var text=document.createTextNode(xmlhttp.response.content[i]);
 						div.appendChild(text);
 						//debug
 						console.log(div);
 						//如果內容為空
 						if(xmlhttp.response.content[i]==='')
+						{
 							//建立<br>
 							var br=document.createElement('br');
 							//遷入<br>
 							div.appendChild(br);
+						}
 						//show output line
 						var rootDiv=document.getElementById(window.tail.rootDiv.id);
 						rootDiv.prepend(div);
 						}//for end
 					//遞迴
 					window.tail.ajax.call(this,(res.lineNum)+1);
 					}//if end
 				}//function end
 			//如果要繼續
 			if(window.tail.continue){
 				//繼續
 				xmlhttp.send('line2start='+line2start);
 				}//if end
 			//反之要暫停
 			else{
 				//設置無限等待
 				var intervalTail = window.setInterval(function(){
 					//提示已經暫停
 					console.log('paused');
 					//如果要繼續了
 					if(window.tail.continue){
 						//清除無限等待
 						clearInterval(intervalTail);
 						//繼續
 						xmlhttp.send('line2start='+line2start);
 						}//if end
 					},1000);
 				}//else end
 			}//function end
 		//call tail ajax
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立js失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存 top span
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#function tail end
 	#必填參數:
 	#$conf["url"],字串,提供random code的網址.
 	$conf["url"]="";
 	#$conf["callBackUrls"],字串陣列,用來處理表單資訊的網址們,會傳送 obj 物件的 post 內容到第一個 callback url,之後都會將 json 回應傳送給下一個 callback url. 如果進行第2個含以上的 callback urls 時有回應含有 formObj 元素的 json 則會改傳送之.每次傳送給 callback url 的表單變數均為 $conf["sendedName"].
 	$conf["callBackUrls"]=array();
 	#可省略參數:
 	#$conf["resDivId"],字串,輸入驗證碼的表單id,預設為"randomCode".
 	#$conf["resDivId"]="randomCode";
 	#$conf["names"],字串陣列,需要傳送的表單變數.
 	#$conf["names"]=array();
 	#$conf["sendedName"],字串,傳送的post變數名稱,預設的爲"formData".
 	#備註:
 	#提示訊息的呈現改用 text area;
 	#驗證失敗原因呈現改用 text area;
 	*/
 	public static function randomCode(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#回傳結果
 			return $result;
 			}#if end
 		#如果未設置 $conf["names"]
 		if(!isset($conf["names"])){
 			#設置爲空
 			$conf["names"]=array();
 		#$result["function"],當前執行的函數名稱
 		#$result["content"],要執行的javaScript語法
 		#必填參數:
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]="
 		//initial window.qbpwcf
 		if(window.qbpwcf===undefined){
 			window.qbpwcf={};
 			}//if end
 		//initial window.randomCode
 		if(window.qbpwcf.randomCode===undefined){
 			window.qbpwcf.randomCode={};
 			}//if end
 		//set random code generate url
 		window.qbpwcf.randomCode.randomCodeUrl='".$conf["url"]."';
 		//set 表單ID 陣列
 		window.qbpwcf.randomCode.formDataIDs=".json_encode($conf["names"])."
 		//設置傳送表單的涵式
 		window.qbpwcf.randomCodeAjax = function(formObj){
 			xmlhttp=new XMLHttpRequest();
 			xmlhttp.responseType='json';
 			xmlhttp.timeout=60000;
 			xmlhttp.open('POST',window.qbpwcf.randomCode.randomCodeUrl,true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//debug
 					console.log(res);
 					//debug
 					console.log(res.status);
 					//if error occur
 					if(res.status==='false'){
 						//debug
 						console.log(res.error);
 						//if no data
 						if(res.error==='no data'){
 							//get random code base64 encoded string
 							var randomCodeSrc=res.content.randomCodeSrc;
 							//debug
 							console.log(randomCodeSrc);
 							//get random code length
 							window.qbpwcf.randomCode.codeLength=res.content.randomCodeLength;
 							//debug
 							console.log(window.qbpwcf.randomCode.codeLength);
 							//get code input element
 							var codeInput=document.getElementById('".$conf["resDivId"]."');
 							//create img element
 							var img=document.createElement('img');
 							//put src code
 							img.src=randomCodeSrc;
 							//create random code img id
 							var imgId='".$conf["resDivId"]."'+'Img';
 							//若存在舊的驗證碼
 							if(document.getElementById(imgId)!==null){
 								//移除舊的驗證碼
 								document.getElementById(imgId).remove();
 								}//if end
 							//set img id
 							img.id=imgId;
 							//設置寬度
 							img.width='200';
 							//debug
 							console.log(img);
 							//place random code img
 							codeInput.parentElement.prepend(img);
 							}//if end
 						//反之有其他錯誤
 						else{
 							//debug
 							console.log(res.error);
 							//alert
 							alert(res.error);
 							}//else end
 						}//if end
 					//如果驗證失敗
 					if(res.passed==='false'){
 						//debug
 						console.log(res.error);
 						//alert
 						alert(res.error);
 						}//if end
 					//反之通過驗證
 					else if(res.passed==='true'){
 						//debug
 						console.log(res.msg);
 						//alert
 						//alert(res.msg);
 						//set callback urls
 						window.qbpwcf.randomCode.callBackUrls=".json_encode($conf["callBackUrls"]).";
 						//nested call callback urls
 						window.qbpwcf.randomCode.callBackFunc.call(this,formObj,window.qbpwcf.randomCode.callBackUrls);
 						}//else end
 					}//if end
 				}//function end
 			//加密傳送資料
 			xmlhttp.send('".$conf["sendedName"]."='+btoa(encodeURIComponent(JSON.stringify(formObj))));
 			}//end window.qbpwcf.randomCodeAjax
 		//initial call random code ajax
 		window.qbpwcf.randomCodeAjax({});
 		//設置遞迴傳送表單的涵式
 		window.qbpwcf.randomCode.callBackFunc = function(formObj,urls){
 			xmlhttp=new XMLHttpRequest();
 			xmlhttp.responseType='json';
 			xmlhttp.timeout=60000;
 			xmlhttp.open('POST',urls[0],true);
 			xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 			xmlhttp.onreadystatechange=function(){
 				//如果狀態為4且response code為200
 				if(xmlhttp.readyState===4 && xmlhttp.status===200){
 					//get response
 					res=xmlhttp.response;
 					//如果沒有定義 res.status
 					if(res===null){
 						//debug
 						console.log('callback to '+urls[0]+' fails!');
 						//show error
 						alert('callback to '+urls[0]+' fails!');
 						//return & end process.
 						return false;
 						}//if end
 					//debug
 					console.log(res);
 					//如果沒有定義 res.status
 					if(res.status===undefined){
 						//debug
 						console.log('callback to '+urls[0]+' fails!');
 						//show error
 						alert('callback to '+urls[0]+' fails!');
 						//return & end process.
 						return false;
 						}//if end
 					//debug
 					console.log(res.status);
 					//如果執行不正常
 					if(res.status!=='true'){
 						//debug
 						console.log('callback to '+urls[0]+' fails!');
 						//show error
 						alert(res.error);
 						//return & end process.
 						return false;
 						}//if end
 					//執行正常
 					//如果有訊息
 					if(res.msg!==undefined){
 						//顯示訊息
 						alert(res.msg);
 						}//if end
 					//新的表單變數存在
 					if(res.formObj!==undefined){
 						//取代要傳送的表單變數
 						res=res.formObj;
 						}//else end
 					//移除第一個已經callback的url
 					urls.splice(0, 1);
 					//如果還有 callback urls
 					if(urls.length>0){
 						//debug
 						console.log('callback to:'+urls[0]);
 						//nested call callback urls
 						window.qbpwcf.randomCode.callBackFunc.call(this,res,urls);
 						}//if end
 					//反之
 					else{
 						//如果有 href 設定
 						if(res.href!==undefined){
 							//到指定頁面
 							window.location.href=res.href;
 							//結束執行
 							return true;
 							//如果要 refresh
 							if(res.refresh==='true'){
 								//重新整理頁面
 								window.location.href=document.baseURI;
 								//結束執行
 								return true;
 								}//if end
 							}//if end
 						}//else end
 					}//if end
 				}//function end
 			//加密傳送資料
 			xmlhttp.send('".$conf["sendedName"]."='+btoa(encodeURIComponent(JSON.stringify(formObj))));
 			}//function end
 		//get code input element
 		var codeInput=document.getElementById('".$conf["resDivId"]."');
 		//如果存在輸入驗證碼的表單
 		if(codeInput!==null){
 			//當輸入的驗證碼長度變化時、有按鍵放開時.
 			codeInput.addEventListener('keyup',function(e){
 				//debug
 				console.log('keyup event occur');
 				//debug
 				console.log('放開的Key爲'+e.key);
 				}//if end
 				//如果長度不一致
 				if(codeInput.value.length!==window.qbpwcf.randomCode.codeLength){
 					//結束執行
 					return false;
 					}//if end
 				//長度一致
 				//初始化 form Obj
 				formObj={};
 				//依照每個表單
 				for(var i=0;i<window.qbpwcf.randomCode.formDataIDs.length;i++){
 					//構成表單變數名稱
 					var formName=window.qbpwcf.randomCode.formDataIDs[i];
 					//debug
 					console.log(formName);
 					//取得表單內容
 					formObj.formName=document.getElementById(window.qbpwcf.randomCode.formDataIDs[i]).value;
 					}//for end
 				//加入驗證碼表單內容
 				formObj.".$conf["resDivId"]."=document.getElementById('".$conf["resDivId"]."').value;
 				//傳送表單
 				window.qbpwcf.randomCodeAjax.call(this,formObj);
 				});//function end
 			}//if end
 		";
 		#可省略參數:
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立js失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存 js 語法
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#function randomCode end
 	/*
 	#函式說明:
 	#$conf["countdownSec"]n秒後轉址
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#回傳結果
 			return $result;
 			}#if end
 		#取得js語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function tailAny(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#回傳結果
 			return $result;
 			}#if end
 		#取得js語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#回傳結果
 			return $result;
 			}#if end
 		#取得js語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		var element=".$conf["elementJS"]."
 		var params=".$conf["paramsJS"];
 		#如果有設置 $conf["outFunc"]
 		if(isset($conf["outFunc"]))
+		{
 			#串接客制化的輸出函式
 			$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"]."
 			window.qbpwcf.tailAny.outputFunc=".$conf["outFunc"];
 		}#if end
 		//呼叫涵式
 		$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"]."
 		window.qbpwcf.gatDataDynamic.func.call(this,element,".$conf["length"].",params,'".$conf["url"]."','".$conf["method"]."','".$conf["resDiv"]."');
 		";
 		#可省略參數:
 			#回傳結果
 			return $result;
 			}#if end
 		#取得js語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function sequenceQuery(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#檢查參數
 		#函式說明：
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容。
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 			#回傳結果
 			return $result;
 			}#if end
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 			#回傳結果
 			return $result;
 			}#if end
 		#取得js語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#function sequenceQuery end
 	/*
 	#函數說明
 	#讓js變數確實存在.
 	#$result["status"],執行正常與否.
 	#$result["content"],js語法.
 	#$result[argu],使用的參數.
 	#必填參數:
 	#$conf["name"],js變數的名稱.
 	$conf["name"]="";
 	#可省略參數:
 	#無
 	#參考資料:
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function makeVarExist(&$conf=array()){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#用 "." 分割 $conf["var"]
 		#函式說明:
 		#將固定格式的字串分開，並回傳分開的結果。
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 		#可省略參數:
 		#$conf["allowEmptyStr"],是否允許分割出來空字串,預設為"false"不允許;"true"代表允許.
 		$conf["stringProcess::spiltString"]["allowEmptyStr"]="false";
 		$spiltString=$spiltString=stringProcess::spiltString($conf["stringProcess::spiltString"]);
 		unset($conf["stringProcess::spiltString"]);
 		#如果檢查參數失敗
 		if($spiltString["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#回傳結果
 			return $result;
 			}#if end
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$result["function"],當前執行的函數名稱
 		#$result["content"],要執行的javaScript語法
 		#必填參數:
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]="";
 		#初始化 js 變數
 		$jsVar="";
 		#針對每個 js 變數的階層
 		for($i=0;$i<$spiltString["dataCounts"];$i++){
 			#取得片段 js 變數名稱
 			$jsVarPart=$spiltString["dataArray"][$i];
 			#如果不是第一層變數
 			if($i!==0){
 				#串接 js 變數名稱
 				$jsVar=$jsVar.".".$jsVarPart;
 				}#if end
 			#反之
 			else{
 				#串接 js 變數名稱
 				$jsVar=$jsVar.$jsVarPart;
 				}#else end
 			#串接 js 語法
 			$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"].
+			"
 				//如果該階段變數不存在
 				if(".$jsVar."===undefined){
 					//初始化為空物件
 					".$jsVar."={};
 					}//if end
 			";
 			}#foreach end
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 		#$conf["globalJs"]=array();
 		#$conf["jsFunciton"],字串陣列,為要放入<script>標籤的js函數.
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果檢查參數失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#回傳結果
 			return $result;
 			}#if end
 		#取得 js 語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#fucntion makeVarExist end
 	/*
 	#函數說明
 	#讀取由table::div建立的資料表,依照欄位內容做不同的事情.
 	#$result["status"],執行正常與否.
 	#$result["content"],js語法.
 	#$result[argu],使用的參數.
 	#必填參數:
 	#$conf["table"],取得table的js.
 	$conf["table"]="";
 	#可省略參數:
 	#$conf["var"],表格的資訊要儲在哪個js變數,預設為"window.qbpwcf.readTable"
 	#$conf["var"]="window.qbpwcf.readTable";
 	#$conf["storeInArray"],預設為儲存成陣列"true",反之儲存成單一變數"false".
 	#$conf["storeInArray"]="true";
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function readTable(&$conf=array()){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			return $result;
 			}#if end
 		#初始化內容
 		$result["content"]="";
 		#函數說明
 		#讓js變數確實存在.
 		#回傳的結果
 		#$result["status"],執行正常與否.
 		#$result["content"],js語法.
 		#$result[argu],使用的參數.
 		#必填參數:
 		#$conf["name"],js變數的名稱.
 		$conf["javaScript::makeVarExist"]["name"]=$conf["var"];
 		#可省略參數:
 		#無
 		$makeVarExist=javaScript::makeVarExist($conf["javaScript::makeVarExist"]);
 		unset($conf["javaScript::makeVarExist"]);
 			#回傳結果
 			return $result;
 			}#if end
 		#串接js語法
 		$result["content"]=$result["content"].$makeVarExist["content"];
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$result["function"],當前執行的函數名稱
 		#$result["content"],要執行的javaScript語法
 		#必填參數:
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//set debug mode
 		window.debug=true;
 		//set params
 		params=".json_encode($conf).";
 		//初始化變數存在
 		noExist=true;
 		//確認變數是否存在
 		eval(noExist=('+params.var+'===undefined));
 		//如果變數不存在
 		if(noExist===false){
 			//如果要儲存成陣列
 			if(params.storeInArray==='true'){
 				//初始化為空陣列
 				eval(params.var+'=[]');
 				}//if end
 			//反之
 			else{
 				//初始化為空陣列
 				eval(params.var+'={}');
 				}//else end
 			}//if end
 		//initial empty table object
 		thisTable={};
 		//get latest table
 		thisTable.target=".$conf["table"].";
 		//如果有 thead,tbody
 		if(thisTable.target.children.length>1){
 			//get thead
 			thisTable.thead=thisTable.target.children[0];
 			//get tbody
 			thisTable.tbody=thisTable.target.children[1];
 			}//if end
 		//反之只有 tbody
 		else{
 			//empty thead
 			thisTable.thead={};
 			//get tbody
 			thisTable.tbody=thisTable.target.children[1];
 			}//if end
 		//列數
 		thisTable.rowsCount=thisTable.tbody.children.length;
 		//欄數
 		thisTable.colsCount=thisTable.tbody.children[1].children.length;
 		//如果有標題欄位
 		if(thisTable.thead!=={}){
 			//debug
 			if(window.debug){
 				//提示有欄位標題
 				console.log('There is title.');
 				}//if end
 			//取得每個欄位的標題
 			thisTable.title=[];
 			//debug
 			if(window.debug){
 				//提示欄位數目
 				console.log('thisTable.colsCount='+thisTable.colsCount);
 				}//if end
 			//針對每個
 			for(i=0;i<thisTable.colsCount;i++){
 				//debug
 				if(window.debug){
 					//提示當前是第幾個欄位(從0開始)
 					console.log('i='+i);
 					}//if end
 				//如果欄位存在
 				if(thisTable.thead.children[0].children[i]!==undefined){
 					//取得欄位標題
 					thisTable.title.push(thisTable.thead.children[0].children[i].innerText);
 					//debug
 					if(window.debug){
 						console.log('column title - start');
 						console.log(thisTable.thead.children[0].children[i].innerText);
 						console.log('column title - end');
 						}//if end
 					}//if end
 				}//for end
 			}//if end
 		//反之
 		else{
 			//預設欄位標題為 A,B,C....Z
 			console.log('尚未實作');
 			exit;
 			}//else end
 		//暫存欄位的資料
 		rowData=[];
 		//debug
 		if(window.debug){
 			//提示資料筆數
 			console.log('thisTable.rowsCount='+thisTable.rowsCount);
 			}//if end
 		//針對每筆資料
 		for(i=1;i<thisTable.rowsCount;i++){
 			//debug
 			if(window.debug){
 				//提示第幾筆資料
 				console.log('i='+i);
 				}//if end
 			//取得列
 			tr=thisTable.tbody.children[i];
 			//debug
 			if(window.debug){
 				//提示第幾筆資料
 				console.log('tr - start');
 				console.log(tr);
 				console.log('tr - end');
 				}//if end
 			//暫存欄位資料
 			colData={};
 			//debug
 			if(window.debug){
 				//提示欄位數量
 				console.log('thisTable.rowsCount='+thisTable.rowsCount);
 				}//if end
 			//針對每個欄位
 			for(j=0;j<thisTable.colsCount;j++){
 				//debug
 				if(window.debug){
 					//提示欄位編號
 					console.log('j='+j);
 					}//if end
 				//取得欄位內容
 				td=tr.children[j].innerHTML;
 				//debug
 				if(window.debug){
 					//提示欄位內容
 					console.log('td='+td);
 					}//if end
 				//debug
 				if(window.debug){
 					//提示欄位原始名稱
 					console.log('thisTable.title['+j+']='+thisTable.title[j]);
 					}//if end
 				//set temp title,replace ' ' to '_'.
 				tempTitle=thisTable.title[j].replace(/ /i, '_');
 				//debug
 				if(window.debug){
 					//提示欄位新名稱
 					console.log('tempTitle='+tempTitle);
 					}//if end
 				//用欄位標題儲存欄位內容
 				eval('colData.'+tempTitle+'=td');
 				//如果有 action 參數
 				if(params.action!==undefined){
 					//如果 action 參數對應的欄位存在數值
 					if(params.action[j]!==undefined){
 						//get action
 						action=params.action[j];
 						//debug
 						if(window.debug){
 							//提示欄位新名稱
 							console.log('action='+action);
 							}//if end
 						//如果動作不是 'save'
 						if(action!=='save'){
 							//debug
 							if(window.debug){
 									console.log('not only save, need extra action.');
 								}//if end
 							//用 ',' 分割 action 字串
 							splitedStr=action.split(',');
 							//debug
 							if(window.debug){
 									console.log('call '+splitedStr[1]+' function with param('+td+')');
 									//call functino with params
 									eval(splitedStr[1]+'.call(this,td)');
 								}//if end
 							}//if end
 						}//fie nd
 					}//if end
 				}//if end
 			//儲存該筆資料的欄位資料
 			rowData.push(colData);
 			}//for end
 		//儲存每筆資料的欄位資料
 		thisTable.rowData=rowData;
 		//如果要儲存成陣列
 		if(params.storeInArray==='true'){
 			//put table in array
 			eval(params.var+'.push(thisTable)');
 			}//if end
 		//反之
 		else{
 			//put table in var
 			eval(params.var+'.=thisTable');
 			}//else end
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 		#$conf["jsFunciton"],字串陣列,為要放入<script>標籤的js函數.
 		#$conf["jsFunciton"]=array();
 		#參考資料:
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果檢查參數失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#回傳結果
 			return $result;
 			}#if end
 		#取得 js 語法
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#funtion readTable end
 	/*
 	#函式說明:
 	#提供tab頁簽，點選頁簽後顯示對應的內容.套用的element結構如下:
 	#	</div>
 	#	<div data-tab-name="tab2" style="display:none;">
 	#		tab2 content...
 	#	</div>
 	#	<div data-tab-name="tab3" style="display:none;">
 	#		tab3 content...
 	#	</div>
 	#</div>
 	#回傳結果:
 	#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 	#$result["error"],錯誤訊息.
 	#$result["function"],當前執行的函數名稱.
 	#$result["content"],語法.
 	#必填參數:
 	#$conf["place"],字串,該功能區塊要在哪個元素裡面呈現,其區塊特徵為何?(請參閱javascript的querySelector函式).
 	$conf["place"]="";
 	#可省略參數:
 	#$conf["height"],字串,tab選單+內容的高度,單位為px..
 	#$conf["height"]="291";
 	#參考資料:
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function tab(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			#回傳結果
 			return $result;
 			}#if end
 		#初始化要回傳的語法
 		$result["content"]="";
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 		//取得要放置投影片內容的區塊
 		var displayArea=document.querySelector('".$conf["place"]."');
 		//儲存頁籤的數量
 		var tabsCount=displayArea.children.length;
 		//初始化儲存頁籤的名稱
 		var tabsName=[];
 		//針對每個頁簽
 		for(var i=0;i<tabsCount;i++){
 			//隱藏頁籤
 			displayArea.children[i].style.display='none';
 			//初始化頁籤名稱
 			var tabName='tab'+i;
 			//如果有設置頁籤的名稱
 			if(displayArea.children[i].dataset.tabName!==undefined){
 				//更新頁籤名稱
 				tabName=displayArea.children[i].dataset.tabName
 				}//if end
 			//儲存頁籤名稱
 			tabsName.push(tabName);
 			}//for end
 		//建立存放頁籤選單的div
 		var tabsDiv=document.createElement('div');
 		//針對每個頁簽
 		for(var i=0;i<tabsCount;i++){
 			//建立頁籤的div
 			var div=document.createElement('div');
 			//設置儘量不換行
 			div.style.display='inline-block';
 			//設置間隔避免無法識別
 			div.style.marginLeft='5px';
 			div.style.marginRight='5px';
 			//設置index
 			div.dataset.index=i+1;
 			//放置頁籤的名稱
 			div.appendChild(document.createTextNode(tabsName[i]));
 			//放置頁籤
 			tabsDiv.appendChild(div);
 			//新增該頁籤的點擊事件
 			div.addEventListener('click',function(event){
 				//針對每個頁簽
 				for(var j=1;j<tabsDiv.children.length+1;j++){
 					//隱藏頁籤標題
 					displayArea.children[0].children[j-1].style.borderBottom='unset';
 					//隱藏頁籤與礦線
 					displayArea.children[j].style.display='none';
 					}//for end
 				";
 				#如果有設置高度
 				if(isset($conf["height"]))
+				{
 					#串接高度的設定
 					$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"].
+					"
 						//設定tab內容區塊的高度
 						displayArea.children[this.dataset.index].children[0].style.height=".$conf["height"]."-parseInt(getComputedStyle(displayArea.children[0]).height)+'px';
 					";
 				}#if end
 				$conf["javaScript::toScript"]["script"]=$conf["javaScript::toScript"]["script"].
+				"
 				//顯示目標頁籤內容
 				displayArea.children[this.dataset.index].style.display='inline-block';
 				//提示當前選擇的頁籤
 				displayArea.children[0].children[this.dataset.index-1].style.borderBottom='solid blue';
 				});
 			}//for end
 		//放置標籤選單
 		displayArea.prepend(tabsDiv);
 		//預設顯示第一個頁簽
 		displayArea.children[0].children[0].click();
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		#$conf["onReady"]="true";
 		#$conf["globalJs"],字串陣列,為要放入<script>標籤的js全域變數.
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		#備註:
 		#無.
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立 script 語法失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#function tab end
 	/*
 	#函式說明:
 	#區塊輪播的效果,輪播內容支援影片播放結束後再換下一張.
 	#必填參數:
 	#$conf["place"],字串,輪播區塊要在哪個元素裡面呈現,其區塊特徵為何?(請參閱javascript的querySelector函式).
 	$conf["place"]="";
 	#$conf["slideHtml"],字串陣列,每個投影片的html語法,其生成結構必須為 html > body > div > anyTag(content to show).
 	$conf["slideHtml"]=array("");
 	#可省略參數:
 	#$conf["sec"],字串,過幾秒就要置換成下一張投影片,預設為"3",代表每3秒就換一張投影片.
 	#$conf["sec"]="3";
 	#參考資料:
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function slideDivPlus(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			#回傳結果
 			return $result;
 			}#if end
 		#初始化要回傳的語法
 		$result["content"]="";
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#$conf["script"],字串,要執行的javaScript語法.
 		$conf["javaScript::toScript"]["script"]=
+		"
 			//設置要使用的投影片
 			window.qbpwcf.slide.eles=".json_encode($conf["slideHtml"]).";
 			//設置放置投影片的區塊特徵
 			window.qbpwcf.slide.displayDivByQuerySelector='".$conf["place"]."';
 			//初始化投影片的滯留時間,預設為3秒,時間到就換下一個投影片.
 			window.qbpwcf.slide.showTime=".$conf["sec"].";
 			//呈現投影片
 			window.qbpwcf.slide.func();
 		";
 		#可省略參數:
 		#$conf["onReady"],字串,是否要在網頁完全載入後再執行,"false"為不等載入完就先執行,預設為"true"要等載入完再執行.
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#如果建立 script 語法失敗
 		if($toScript["status"]==="false"){
 			#設置執行失敗
 			$result["status"]="false";
 			#設置錯誤訊息
 			$result["error"]=$toScript;
 			#回傳結果
 			return $result;
 			}#if end
 		#儲存內容
 		$result["content"]=$result["content"].$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#functino slideDivPlus end
 	/*
 	#函式說明:
 	#將指定的字形套用在body上.
 	#無.
 	#備註:
 	#無.
 	*/
 	public static function setBodyFont(&$conf){
 		#初始化要回傳的結果
 		$result=array();
 		#取得當前執行的函數名稱
 		$result["function"]=__FUNCTION__;
 			#回傳結果
 			return $result;
 			}#if end
 		#函式說明:
 		#檢查必填與可省略的參數，可省略參數可指定預設要給與什麼數值內容.
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"代表正常,"false"代表不正常.
 		#$result["error"],執行不正常結束的錯訊息陣列.
 		#array_keys=>http://php.net/manual/en/function.array-keys.php
 		#備註:
 		#無.
 		$checkArguments=variableCheck::checkArguments($conf["variableCheck::checkArguments"]);
 		unset($conf["variableCheck::checkArguments"]);
 		#如果執行失敗
 		if($checkArguments["status"]==="false"){
 			#設置執行異常
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$checkArguments;
 			#回傳結果
 			return $result;
 			}#if end
 		#如果參數檢查不通過
 		if($checkArguments["passed"]==="false"){
 			#設置執行異常
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$checkArguments;
 			#回傳結果
 			return $result;
 			}#if end
 		#如果有設置 outsideFontUrl
 		if(isset($conf["outsideFontUrl"])){
 			#設置字形是從 url 取得
 			$isWeb="true";
 			#設置字形url
 			$fontsPath=$conf["outsideFontUrl"];
 			}#if end
 		#反之
 		else{
 			#設置字形是從本地取得
 			$isWeb="false";
 			#取得存在字形的根目錄
 			$fontsPath=pathinfo(__FILE__)["dirname"]."/fonts/".$conf["fontPath"];
 			}#else end
 		#取得font檔案內容
 		#函式說明:
 		#依據行號分隔抓取檔案的內容,結果會回傳一個陣列
 		#無.
 		#備註:
 		#無.
 		$getFileContent=fileAccess::getFileContent($conf["fileAccess::getFileContent"]);
 		unset($conf["fileAccess::getFileContent"]);
 		#如果執行異常
 		if($getFileContent["status"]==="false"){
 			#設置執行異常
 			$result["status"]="false";
 			#設置執行錯誤訊息
 			$result["error"]=$getFileContent;
 			#回傳結果
 			return $result;
 			}#if end
 		#set custom font path
 		$setFontPart=
+		"
 			//store font file in base64 encode string
 			window.qbpwcf.fonts.base64='".$getFileContent["base64dataOnly"]."';
 			//store font file in bufferArray
 			window.qbpwcf.fonts.bufferArray=Uint8Array.fromBase64(window.qbpwcf.fonts.base64).buffer;
 		";
 		#函式說明:
 		#將要執行的script語法透過該函式執行(會在程式外層用<script></script>包起來).
 		#回傳結果:
 		#$result["status"],執行是否正常,"true"為正常,"false"為不正常.
 		#$result["error"],錯誤訊息陣列
 		#http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the
 		#備註:
 		#無.
 		$toScript=javaScript::toScript($conf["javaScript::toScript"]);
 		unset($conf["javaScript::toScript"]);
 		#儲存html(javascript)語法
 		$result["content"]=$toScript["content"];
 		#設置執行正常
 		$result["status"]="true";
 		#回傳結果
 		return $result;
 		}#function setBodyFont end
 	}#class javaScript end
 /*
 	document.getElementById('img').src=URL.createObjectURL(event.target.files[0]);
 	//get selected file content
 	reader=new FileReader();
 	reader.readAsBinaryString(event.target.files[0]);
 	reader.onload=function(event)
+	{
 		//base64 encode
 		newVal=btoa(event.target.result);
 		//obj to save
 		newValObj=
+		{
 			where:
+			{
 		xmlhttp.open('POST','update',false);
 		xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 		xmlhttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
 		xmlhttp.onreadystatechange=function(){}//function end
 		xmlhttp.send('params='+params); //如果是post則要將參數加在這邊 'key1=encodeURIComponent(val1)&key2=encodeURIComponent(val2)';
 	};
 });
 input.click(); //觸發事件
 // 直接將選擇好的圖片檔案直接用來使用 - end
 //get new value
 reader=new FileReader();
 window.addEventListener("resize" function(){
 	...
 	});
 #當滾軸移動時觸發的事件
 window.addEventListener('scroll', function(e){
 	//get last scroll y, 0 means top.
 	var last_known_scroll_position = window.scrollY;
 	});
 #建立物件函數,並透過addEventListener指定執行
 	var opval=select.options[i].attributes['value'].value;
 	if(opval===selectVal){
 		var opName=select.options[i].innerHTML;
+		}
+	}
 #下拉式選單選擇了哪個options;
 var select=document.getElementById('selectID');
 var optionIndex=select.options.selectedIndex; //選擇的選項是第幾個
 var selectedOptions=select.options[select.options..selectedIndex]; 選擇的選項元素.
 #取得html所有dom物件
 document.all
 #this的應用
 window.qbpwcf.lib.init=function(){
 	//等同印出 window,以及this指的是等號左邊的最上層變數.
 	console.log(this);
+	}
 #判斷不是數字
 var oriVal=parseInt($(this).val());
 //如果不是數字
 	//如果狀態為4且response code為200
 	if(xmlhttp.readyState==4 && xmlhttp.status==200){
 		//將回應進行處理
 		xmlhttp.response;
 		//取得回應的內容
 		res=xmlhttp.response;
 		//取得回應的html並取代當前的內容,當xmlhttp.responseType='document'時 - start;
 		//清空文件,寫入取得的完整回應
 		document.write(res.all[0].outerHTML);
 		//結束輸出
 		document.close();
 		//取得回應的html並取代當前的內容,當xmlhttp.responseType='document'時 - end;
 		}//if end
 	}//function end
 //參數跟數值內容要用encodeURIComponent才不會有編碼的錯誤產生
 xmlhttp.send(); //如果是post則要將參數加在這邊 'encodeURIComponent(key1)=encodeURIComponent(val1)&encodeURIComponent(key2)=encodeURIComponent(val2)';
 //如果要在迴圈裏面執行異步的ajax，由於js是傳參考的語言，因此建議將每個ajax個別儲存在陣列裏面。 - start
 //初始化儲存xmlhttp的陣列
 xmlhttp=[];
 //針對每列
 	//取得列
 	tr=tbody.children[i];
 	//取得燈狀態
 	lightSta=tr.children[1].children[0];
 	//取得gw id
 	gwId=tr.children[0].innerText;
 	url='area/device/getDeviceInfoInJSON/'+gwId;
 	xmlhttp[i]=new XMLHttpRequest();
 	xmlhttp[i].temp.lightSta=lightSta; //用於儲存額外的資訊給ajax function - end
 	xmlhttp[i].open('POST',url,true);
 	xmlhttp[i].setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=UTF-8');
 	xmlhttp[i].setRequestHeader('X-Requested-With','XMLHttpRequest');
 	xmlhttp[i].onreadystatechange=function(e)
 	{
 		//debug
 		if(window.debug)
+		{
 			console.log('e - start');
 			console.log(e);
 			console.log(e.target); //xmlhttp[i] 自己
 			console.log(e.target.response); //xmlhttp[i] 的回應
 			console.log('e - end');
+		}
 		//get gw id
 		gwId=e.target.temp.gwId;
 		//response ok
 		if(e.target.readyState===4 && e.target.status===200)
 //所有內容跑完之後再執行的事件
 window.addEventListener('load',function(){
 	//一段時間後再執行
 	setTimeout(function(){
 		//get div
 		var div=document.getElementById('test');
 		//set div content
 		div.innerText='Loading...';
 		xmlhttp=new XMLHttpRequest();
 		xmlhttp.responseType='document';// do not set to document when send a not async request
 		xmlhttp.open('GET','javaScriptT/hang.php',true);
 		xmlhttp.response;
 		xmlhttp.onreadystatechange=function(){
 				div.innerText='finish!';
 				}//if end
 			}//function end
 		xmlhttp.send();
 		//debug
 		console.log(xmlhttp.response);
 		//3 秒後再執行
 		},3000)
 	});
 //設定要求的屬性、目的、是否要異步
 萬用的取得物件屬性方法
 bit16toNoZeroHead=function(p)
+{
 	//範例物件
 	table={a:A,b:B,c:C};
 	//取得物件有多少key
 	keyCount=Object.keys(table).length;
 	//針對物件每個key
 	for(i=0;i<keyCount;i++)
+	{
 		//如果物件的key等於參數p
 		if(p===Object.keys(table)[i])
 //當有收到訊息時
 conn.onmessage = function(e)
+{
 	//將訊息顯現在console
 	console.log(e.data);
 	//傳送訊息
 	conn.send('mag');
+}
 //當連線斷開後, 每秒重新嘗試一次.
 conn.onclose = function(e)
+{
 	//指定1秒刷新一次
 	setTimeout('window.webSock.connWebSock.call(this)',1000);
+}
 //所有內容跑完之後再執行的事件
 window.addEventListener('load',function()
+{
 	//傳送訊息
 	conn.send('mag');
 });
 eval()，將變數的數值印出.
 i=0;
 window.eval(i)='aa';
 window.0 //會印出 aa
 //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal
 //定義物件的屬性 - end
 //將圖片上下左右置中
 #over {position:relative; text-align:center;
        width:100%; height:100%; background:#CCC;}
 #over img{
     position: absolute;
     margin: auto;
 		this._addEventListener(a,b,c);
 		if(!this.eventListenerList) this.eventListenerList = {};
 		if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
 		this.eventListenerList[a].push(b);
 		};
 	})();
 //access binded events
 var clicks = someElement.eventListenerList.click;
 if(clicks) clicks.forEach(function(f) {
   alert("I listen to this function: "+f.toString());
 });
 //參考資料 https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-when-debugging-or-from-the-javascript
 //get user agent
 navigator.userAgent;

Subversion Repositories php-qbpwcf

(root)/trunk/usr/lib64/qbpwcf/javaScript.php – Rev 207 → 226