Subversion Repositories php-qbpwcf

		#js function

		$conf["javaScript::toScript"]["jsFunciton"][]=

		"

		/*

		說明:

		偵測 html input type=\"text\" 的 dom,當內容過長無法於 input 區塊完整顯現,必須滾動才能看到前後內容時,提供滾動協助的按鈕.

		範例:

		//初始化參數

		var params={};

		//顯示往右滾動的icon dom,不指定就不要指定該參數.

		//params.iconScrollToRight='';

		//顯示往左滾動的icon  dom,不指定就不要指定該參數.

		//params.iconScrollToLeft='';

		//初始化、 設置參數

		var inputTextScrollHelper=window.qbpwcf.inputTextScrollHelper.init(params);

		//執行

		inputTextScrollHelper.run(event);

		*/

		//該方法的物件

		window.qbpwcf.inputTextScrollHelper={};

		//初始化、設定

		window.qbpwcf.inputTextScrollHelper.init=function(params){

			//預設的往右滾動的div

			var toRightIcon=document.createElement('div');

			//預設向右滾動的圖示會出現,且可以抓到顯示有內容的寬度.

			toRightIcon.style.display='inline-block';

			//跟上個元素同位置

			toRightIcon.style.position='relative';

			//設置方文字

			toRightIcon.innerText='>>>';

			//設置cursor為pointer

			toRightIcon.style.cursor='pointer';

			//預設的往作左滾動div

			var toLeftIcon=document.createElement('div');

			//一開始不顯示

			toLeftIcon.style.display='inline-block';

			//跟上個元素同位置

			toLeftIcon.style.position='relative';

			//設置文字

			toLeftIcon.innerText='<<<';

			//設置cursor為pointer

			toLeftIcon.style.cursor='pointer';

			//如果有設置 iconScrollToRight

			if(params.iconScrollToRight!=undefined){

				//設置指定的圖示

				toRightIcon=params.iconScrollToRight;

				//預設向右滾動的圖示會出現,且可以抓到顯示有內容的寬度.

				toRightIcon.style.display='inline-block';

				//跟上個元素同位置

				toRightIcon.style.position='relative';

				//設置方文字

				toRightIcon.innerText='>>>';

				//設置cursor為pointer

				toRightIcon.style.cursor='pointer';

				}//if end

			//如果有設置 iconScrollToLeft

			if(params.iconScrollToLeft!=undefined){

				//設置指定的圖示

				toLeftIcon=params.iconScrollToLeft;

				//預設向左滾動的圖示會出現,且可以抓到顯示有內容的寬度.

				toLeftIcon.style.display='inline-block';

				//跟上個元素同位置

				toLeftIcon.style.position='relative';

				//設置文字

				toLeftIcon.innerText='<<<';

				//設置cursor為pointer

				toLeftIcon.style.cursor='pointer';

				}//if end

			//設置要回傳的結果

			var result={

				//放置向右滾動的icon

				'toRightIcon':toRightIcon,

				//放置向左滾動的icon

				'toLeftIcon':toLeftIcon,

				//放置運行該功能的function

				'run':function(event){

					//取得 input dom

					var ele=event.target;

					//如果不是 input dom

					if(ele.tagName!='INPUT'){

						//不做事

						return false;

						}//if end

					//如果 type 不是 text

					else if(ele.type!='text'){

						//不做事

						return false;

						}//if end

					//如果是 mobile client

					if(navigator.userAgent.includes('Mobile')){

						//不做事

						return false;

						}//if end

					//取得最大的滾動寬度

					var maxScrollPx=ele.scrollLeftMax;

					//如果沒有內容無法呈現

					if( maxScrollPx == ele.clientWidth ){

						//不做事

						return false;

						}//if end

					//如果沒有需要滾軸

					if(ele.scrollLeftMax==0){

						//不做事

						return false;

						}//if end

					//取得目前滾軸的位置

					var scrollX=ele.scrollLeft;

					//取得一次要滾動多少px

					var scrollPxPerTime=ele.clientWidth;

					//顯示向左滾動的 icon

					ele.parentElement.append(result.toLeftIcon);

					//取得向左滾動的圖示其 bottom 樣式的數值

					var toLeftIcon_bottomPosition=parseInt(window.getComputedStyle(ele.parentElement.children[1]).height)+parseInt(window.getComputedStyle(ele).height)/2-parseInt(window.getComputedStyle(ele.parentElement.children[1]).height)/2;

					//如果為負數

					if(toLeftIcon_bottomPosition<0){

						//轉正數

						toLeftIcon_bottomPosition=toLeftIcon_bottomPosition-toLeftIcon_bottomPosition*2;

						}//if end

					//位置在可視區域的最左端,且上下置中

					ele.parentElement.children[1].style.bottom=toLeftIcon_bottomPosition+'px';

					//不能占用空間

					ele.parentElement.children[1].style.height='0px';

					//先隱藏該按鈕

					ele.parentElement.children[1].style.display='none';

					//當點擊向左滾動的icon

					result.toLeftIcon.addEventListener('click',function(e){

						//取得 input dom

						var inputEle=e.target.previousElementSibling;

						//滾動到新位置

						inputEle.scroll(scrollX-scrollPxPerTime,0);

						//更新目前滾軸的位置

						scrollX=inputEle.scrollLeft;

						//如果已經在最左邊

						if(scrollX==0){

							//隱藏該按鈕

							inputEle.parentElement.children[1].style.display='none';

							}//if end

						//如果還可以往右邊滾動

						if(scrollX<maxScrollPx){

							//顯示向右滾動的按鈕

							inputEle.parentElement.children[2].style.display='inline-block';

							}//if end

						});

					//顯示向右滾動的 icon

					ele.parentElement.append(result.toRightIcon);

					//取得向右滾動的圖示其 left 樣式的數值

					var toRightIcon_leftPosition=parseInt(window.getComputedStyle(ele).width)-parseInt(window.getComputedStyle(ele.parentElement.children[2]).width);

					//取得向右滾動的圖示其 bottom 樣式的數值

					var toRightIcon_bottomPosition=parseInt(window.getComputedStyle(ele.parentElement.children[2]).height)+parseInt(window.getComputedStyle(ele).height)/2-parseInt(window.getComputedStyle(ele.parentElement.children[2]).height)/2;

					//如果為負數

					if(toRightIcon_bottomPosition<0){

						//轉正數

						toRightIcon_bottomPosition=toRightIcon_bottomPosition-toRightIcon_bottomPosition*2;

						}//if end

					//位置在可視區域的最右端

					ele.parentElement.children[2].style.left=toRightIcon_leftPosition+'px';

					//且上下置中

					ele.parentElement.children[2].style.bottom=toRightIcon_bottomPosition+'px';

					//且不能占用空間

					ele.parentElement.children[2].style.height='0px';

					//當點擊了向右滾動的 icon

					result.toRightIcon.addEventListener('click',function(e){

						//取得 input dom

						var inputEle=e.target.previousElementSibling.previousElementSibling;

						//取得剩下多少可以滾動

						var leftScrollPx=maxScrollPx-scrollX;

						//滾動到新位置

						inputEle.scroll(scrollX+scrollPxPerTime,0);

						//更新目前滾軸的位置

						scrollX=inputEle.scrollLeft;

						//如果已經在最右邊

						if(scrollX>=maxScrollPx){

							//隱藏該按鈕

							inputEle.parentElement.children[2].style.display='none';

							}//if end

						//如果不是在最左邊

						if(scrollX!=0){

							//顯示向左滾動的按鈕

							inputEle.parentElement.children[1].style.display='inline-block';

							}//if end

						});

					}//function end

				};

			//回傳結果

			return result;

			};//function end

		";

#dom的滾軸目前x軸距離起點多少 px

dom.scrollLeft;

#dom的滾軸的最大可滾動寬度(x)by scroll(x,y)

dom.scrollLeftMax;

//判斷 user agent 是不是 mobile

navigator.userAgent.includes('Mobile');