徐嘉裕(Neil Hsu)的工作心得網誌!

如果要讓物件垂直置中，像是下面圖這樣的呈現!#content在父容器#box的垂直中間 基本上可以用css的 vertical-align: middle;，但這方法只能在table的td中使用，如果是div就無效了，後來上網查了一下資料發現css3有更好的方法能能決這問題，就是吧#box定義為table，吧#content定義為td，這樣就能用 vertical-align: middle;來垂直置中對齊物件了，真是好方便阿，方法如下： 結構 <div id="box">     <div id="content">         垂直置中物件內容     </div> </div> CSS #box {     display: table; } #content {     display: table-cell;     vertical-align: middle; } 這樣就OK了阿，有需要的朋友參考看看喔!! 參考資料來源： http://muki.tw/tech/css-div-center/ 教學撰寫： 徐嘉裕 Neil hsu

最近在幫客戶開發模組剛好有用到一個功能，就是使用swal開新視窗播放youtube影片，像是下面這樣 看起來不難做，吧youtube影片崁入到swal視窗中就完成了!! 經測試影片的確也能播放，但發現一個問題，就是點選OK關閉swal視窗時，雖然區塊消失了，但youtube影片還是再繼續播放，因為還有背影聲音，也就是說關閉swal視窗並無法關閉正在播放中的youtube影片，必須要有youtube控制程式才能關閉影片，這還真是傷腦筋，上網查了一下相關說明，找到一個不錯的youtube影片控制方法修改一下分享給大家 需要準備的工作， 1、youtube網址後方要加上?enablejsapi=1 2、iframe要加上class='youtube-video' 所以整個CODE就是 //影片播放 $(document).ready(function() { $("body").on("click", "#youtubebtn", function (){ $youtubebtn = $("#youtubebtn").attr("mane"); var $youtubebtnArr = $youtubebtn.split(','); //切割陣列 $title=$youtubebtnArr[0]; //影片標題 $lotteryurl=$youtubebtnArr[1]; //影片ID值，就是watch?v=後面的那一段參數 youtubebfunction($title,$lotteryurl); }) function youtubebfunction($title,$lotteryurl){ swal({ title: "<h3>"+$title+"</h3>", text: "<iframe class='youtube-video' width=100% height=450 src=https://www.youtube.com/embed/...

PHP資料加密的方法有很多，這裡推薦使用AES 對稱式加解密法，這總方法除了數值本身的加密外，還加上了三方key的定義，產生的雜湊值如資料傳輸或存入資料表，三方key可以選一個自己知道的密碼藏在網站裡面用php常數帶出，這樣即使資料表被人破解了拿到裡面的數值沒有三方key的數值也是解不開的，AES資料加密function如下： //AES 資料加密 function encryptdecode($var="",$types="",$key=""){ //製作SHA384-KEY $hash_string = $key; $hash = hash('SHA384', $hash_string, true); $app_cc_aes_key = substr($hash, 0, 32); $app_cc_aes_iv = substr($hash, 32, 16); //加密 if($types==encrypt){ $data = $var; $padding = 16 - (strlen($data) % 16); $data .= str_repeat(chr($padding), $padding); $encrypt = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $app_cc_aes_key, $data, MCRYPT_MODE_CBC, $app_cc_aes_iv); $encrypt_text = base64_encode($encrypt); $returnvar=$encrypt_text; } //解密 if($types==decryption){ $encrypt =base64_decode($var); $data = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $app_cc_aes_key, $encrypt, MCRYPT_MODE_CBC, $app_cc_aes_iv); $padding = ord($data[strlen($data) - 1]); $decrypt_text = substr($data, 0, -$padding); ...

網站很多功能都怕遇到user點選瀏覽器的返回上一頁功能，例如前一頁有某功能是需要購過js計算後顯示在容器中的結果數值，像是2*500=1000之類的算式，如果user點選送出後又返回上一頁，input中的數值還會保留，但容器的數值卻歸零(需要觸發計算)，如果user又從送出一次表單那寫入的數值一定不正確，最好的解決方法就是當usre返回上一頁後瀏覽器自動更新頁面(同F5)，經過許多嘗試後以下方法確實可以解決問題。 假設當前網址為 http://localhost/xoops/modules/test/index.php?op=storedvalue 如果只針對IE事情就簡單了，完全不需要動用到PHP，只需要在樣板貼上 <script type="text/javascript"> if (!!(window.history && history.pushState)){ var $time = (+new Date()); history.pushState({page: 1}, 'title 1', "?op=storedvalue&back="+$time+""); history.state } </script> 這樣進入到http://localhost/xoops/modules/test/index.php?op=storedvalue JS會以時間戳產生back變數值，例如 http://localhost/xoops/modules/test/index.php?op=storedvalue&back=1524612144000 當USER點選返回上一頁時間戳數值會改變，實際上也等於不同的頁面，頁面會更新，但很不幸的， 這方法對於Google Chrome瀏覽器一點用都沒有 ，完全不會刷新頁面...................所以為了能夠讓Google Chrome瀏覽器返回上一頁頁也能自動更新頁面，只好動用到PHP的$_SESSION功能。 方法如下： 在PHP檔案輸出time()時間戳格式 $xoopsTpl->assign( ...

要快速的備份某個硬碟全部資料到備份硬碟中，雖然是可以用windows內建的備份與還原，但如果重灌windows可會有key不同而無法還原的問題，還要改一堆設定煩死了，直接用dos指令XCOPY來做檔案的複製就很快了，資料也不會丟失，好朋友可以參考看看!! 首先開啟windows所有程式->附屬應用程式->開啟命令提示字元! 然後輸入以下指令 XCOPY C:\xxx   F:\xxx /s 藍字的 C:\xxx  為複製檔案來源位置例如要複製整個C槽就輸入 C:\ 綠色的   F:\xxx 為複製目的位置，例如要放到F槽的備份資料夾，就輸入  F:\ 備份 紅字的 S 為複製類型參數，可以自行修改為以下的參數設定： ================================================================= /A    只複製設定成保存屬性的檔案，不要改變屬性的設定。 /M    只複製設定成保存屬性的檔案，並清除保存屬性。 /D:m-d-y  複製指定日期當天或之後變更的檔案。如果沒給日期，只複製那些來源檔案日期比目的檔案日期為新的檔案。 /EXCLUDE:file1[+file2][+file3]...         指定檔案清單字串。每個字串應在不同行。如果有字串對應到要進行複製的檔案絕         對路徑的任何部分，這個檔案會被排除複製。例如，指定字串         \obj\ 或 .obj 的話，會排除所有在 obj 目錄下副檔名是.obj 的檔案複製。 /P    在建立每個目的檔案時顯示提示。 /S    複製每個目錄及其包含的子目錄，不複製空目錄。 /E    複製每個目錄及其包含的子目錄，也複製空目錄。/S 與 /E相同，能夠用來修改 /T。 /V   ...

countUp.js套件是一個非常好用且設定簡單的計數器套件，好朋友可以去他們的Demo網站看一下效果： http://www.htmleaf.com/Demo/201501271287.html 要使用很簡單，先去下載countUp.js套件回來 https://github.com/inorganik/countUp.js 解壓縮後，吧js裡面的countUp.js放到模組或佈景的JS資料夾裡面，引入即可!! $xoTheme->addScript(XOOPS_URL.'/modules/模組名稱/js/countUp.js'); 然後再要顯示計數器的樣板上貼上以下HTML結構  <div class="jumbo" id="myTargetElement">0</div> 再於佈景或模組的JS檔中加上以下的設定值即可運作，這些值參之後都能改由AJAX引入數值，成為實際的統計數據。 $(document).ready(function(){ myTargetElement(); function myTargetElement(){ var options = { useEasing : true, useGrouping : true, //進位 separator  : ',', decimal : '.', prefix : '', //前面留幾個0 suffix : ''  //後面留幾個0 } // 開始值 , 結束值 ,小數點,執行速度 var demo = new countUp("myTargetElement", 0 , 8888888888 , 0, 2.5, options); demo.start(); }    }); 其中 綠字 為計數器的開始預設值， 紅字 為結束值，也就是顯示在計數器上的最終數值， 之後這兩個參數可替換為AJAX回傳的資料庫數值即可運作。 最後加上CSS設定  .jumbo { margin:0; color:#EC4365; f...

用過FB的朋友一定有發現一個有趣的功能，就是在人氣旺的粉絲團留言，有時候還沒輸入完內容前面就冒出其他的人留言回覆了，但都沒刷新頁面，其實這樣功能用setInterval()+$.ajax就能實現了，也不會很消耗user端瀏覽器效能，方法如下： 要顯示資料的內容區 <div id='test'></div> 執行$.ajax的JS檔案code $(document).ready(function(){ //第一次讀取  $returntrue=cartnumber(); //自動更新 if( $returntrue ){ setInterval(function(){ cartnumber() ; }, 10000 );  //預設 10000 毫秒自動重複執行 cartnumber()函數 } function cartnumber() { $.ajax({ url: xoopsjsurl + '/modules/neillibrary/ajax.php', type: 'POST', data: { id: '1'}, success: function(response) { $('#test').html(response); }, error: function() { console.log('ajax error!'); } }) }    return true; }); 這樣#test的內容資料就會按setInterval設定的10000豪自動更新一次，若此期間有新的資料寫入ajax會自動更新區塊內容，不用刷新瀏覽頁面，很方便實用的功能!!有需要的朋友參考看看!! 教學撰寫： 徐嘉裕 Neil hsu