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

發表文章

jQuery 排除指定區塊以外的任意點擊觸發事件-教學撰寫:徐嘉裕Neil hsu

今天要說的這個功能其實就跟FB粉絲團管理後台的左右收合選單是一樣的原理，也就是當選單開啟時，在選單以外的任何地方發生點擊事件觸發選單收合，但於選單內發生的點擊不產生作用，除非點選關閉按鈕，像下圖這樣這裡分享一個好用的jQuery function，原生的code是這樣 $(document).mouseup(function (e) { var container =$("#leftmenu"); // 這邊放你想要排除的區塊 if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); 當點擊發生在#leftmenu以外的地方就會關閉區塊，但會有一個問題，如果使用css動畫效果時(滑動/移動)，不管是開啟還是關閉任意點擊，動畫一樣會被觸發，這樣效果上就會有問題了，所以做了以下調整! $(this).mouseup(function(e) { if ($("#leftmenu").css("left") == '0px') { //以開啟時的left的位置做判斷 var container = $("#leftmenu"); // 這邊放你想要排除的區塊 if (!container.is(e.target) && container.has(e.target).length === 0) { $("#leftmenu").css({ "animation-name": "leftclose", "left": "-350px" //關閉時的left的位置 }); } } }); 紅字部分增加了以css樣式的狀態為判斷依據，這裡用 0px 表示選單是開啟狀態，點擊任意區塊可以出觸發code關閉選單，反之選單為收合狀態時left為 -350px...

閱讀完整內容

dt標籤使用CSS->before建構內容加上nth-child()產生中文數字編號一、二、三-教學撰寫:徐嘉裕Neil hsu

在做網頁編排最常見的問題就是CSS的list-style-type無法產生中文數字如一、二、三，如果直接吧內文加上中文數字沒段行還好，字太多時會分切兩行，第二行的文字開頭會對齊左邊基線，像下圖這樣如果有強迫症的人看了會很不舒服，解決方法就是吧內文的一、二、三拿掉，然後再標題的dt標籤用before建構內容+nth-child()判斷列數產生一、二、三，就可以做出像以下的排版方式，第二行由數字後開始顯示。這樣就美觀多了~遇到處女座的客戶也不會有問題，製作方法如下 1、HTM:結構吧內文標題的一、二、三拿掉 (紅字為標題) <dl> <dt>以學生為中心：發展以學生為中心，教學優先的核心價值。培養學生新三好運動。</dt> <dd> 1.把書讀好：養成終生學習的能力<br /> 2.身要練好：養成終生運動的能力<br /> 3.人要做好：養成終生反省的能力 </dd> <dt>以專業為依歸：教師有專業、行政有效能。</dt> <dd> 1.活力行政：力持「依法行政、穩健成長」的經營要領。<br /> 2.專業教師：提升教師教學專業能力，形塑專業形象。<br /> 3.建立專業社群之學校文化，建立團隊學習機制，以專業對話、團隊學習的機制，落實教學品質保證。 </dd> <dt>愛、榜樣與熱誠：打造「溫馨校園、全人教育、終身學習」的辦學環境。</dt> </dl> 2、CSS部分加上以下CODE dt{ position: relative; font-size: 115%; padding: 10px 0px 10px 50px; color: #174960; line-height: 170%; } dt:nth-child(1)::before{ position: absolute; left: 0px; content:"一、"; } dt:nth-child(3)::before{ position: absolute; left: 0px; content:"二...

閱讀完整內容

Xoops忘記管理密碼->修改資料表重建密碼方法-教學撰寫:徐嘉裕Neil hsu

如果忘記Xoops管理員密碼，想要修改資料庫中資料表取回，首先必須要有進入phpmyadmin的權限，進入phpmyadmin後在左邊選單找到XOOPS網站的資料表名稱，點擊進入資料表列，然後使用瀏覽器的搜尋功能(ctrl+F)，輸入users，找到被標註的users資料表，點擊進入進入users資料表後，找到管理員帳號 (看uname欄位) ，點選左邊的編輯然後使用瀏覽器搜尋(ctrl+F)，輸入pass，找到密碼欄位，將右邊的文字框清空，輸入新密碼，這裡用(12345)做測試，然後吧右邊的類型選擇MD5 按下方的執行儲存更新之後輸入帳號admin 跟密碼 12345 就能用管理員登入Xoops網站了，有需要的朋友參考看看! 教學撰寫：徐嘉裕 Neil hsu

閱讀完整內容

解決php程式迴圈使用Bootstrap框架排版內容高度無法一致的問題 -教學撰寫:徐嘉裕Neil hsu

使用Bootstrap框架排版來跑php迴圈，除非是要做瀑布流，一定會遇到以下的問題，就是每個div的高度都不一致，導致區塊跑位的情況這樣不是很奇怪嗎?解決方法就使用js的each取得nth-child引響範圍內區塊高度的最大值，再輸出到範圍內的全部區塊，例如每列有三個區塊，迴圈跑三次共三列，程式就會以每三個區塊取值比對一次抓出最大高度在輸出，這樣每一列的高度都會一致，不會再發生區塊跑位的情況。方法如下： html結構 <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> 呼叫function <script>sameheightfunction();</script> js-code 吧以下的code放在頁面引入的js檔中 //區塊高度相等 function sameheightfunction() { var $column=3; //欄位數 var $range = $column - 1; var $sections = $('.col-md-4'); //區塊class $sections.filter(':nth-child(' + $column + 'n-' + $range + ')').each(function() { var $this = $(this), $els = $this.nextAll(':lt(' + $range + ')...

閱讀完整內容

用PHP遞迴作switch流程控制範例-教學撰寫:徐嘉裕Neil hsu

遞迴的運作原理就是在同一個function裡面再次或多次執行同樣的function，通常用在解階層式資料，像是分類父層子層之類的，但遞迴也能作為switch流程控制用途，這樣就能吧本來要用很多的function用一個function就能執行完畢了，程式也精簡很多，以下是參考範例：例如我們要做一個以陣列方式選取星期的功能，然後吧陣列數值儲存為unserialize字串格式所以儲存進資料表的字串內容如下： a:4:{i:0;s:1:"1";i:1;s:1:"3";i:2;s:1:"5";i:3;s:1:"7";} 接下來要在頁面上吧選擇星期的字串內容改為輸出星期一~星期日,並指定顯示選取的內容，我們利用PHP遞迴作switch流程控制一次搞定 //PHP-function //活動星期 function activityweek($week="",$type=""){ switch($type){ case "1": //開啟字串轉陣列解出數值 foreach(unserialize($week) as $val){ $weektext.="<span class='glyphicon glyphicon-check' aria-hidden='true'></span>". activityweek($week=$val,$type="2") ."  " ; } $weektext= activityweek($week=$weektext,$type="3") ; break; case "2": //按數值對應星期 switch($week){ case "1": $weektext=_MS_SHARED162; //星期一 break; case "2": $weektext=_MS_SHARED163; //星期二 break; case "3...

閱讀完整內容

PHP好用的QRcode產生套件phpqrcode->Xoops模組應用範例-教學撰寫:徐嘉裕Neil hsu

如果要在Xoops模組中使用php產生的QRcode套件，phpqrcode是個不錯的選擇，且套用方便利於擴充管理，首先先去phpqrcode官網下載套件包回來 http://phpqrcode.sourceforge.net/ PHP QR Code庫的某些功能包括：支持QR Code版本（大小）1-40 數字，字母數字，8位和漢字編碼。（日文漢字編碼尚未經過全面測試，如果您啟用了日文編碼，則可以通過驗證它來做出貢獻:)）完全用PHP實現，除GD2外沒有任何外部依賴項導出為PNG，JPEG圖像，也導出為位表 TCPDF 2-D條碼API集成易於配置數據緩存可加快計算速度提供的合併工具有助於將庫作為一個沒有依賴關係的大文件進行部署，易於“包含且不擔心” 調試數據轉儲，錯誤記錄，時間基準測試 100％開放源代碼，LGPL許可解壓縮後吧phpqrcode丟到Xoops模組的class資料夾中然後再Xoops的uploads資料夾中建立一個qrcode資料夾存放QRcode圖檔 (資料夾需設777權限) 再吧以下的code放到模組的function.php裡面 //QR CODE 產生器 function qrcodeGenerator($url='',$level='',$size='',$qrcodeimg=''){ //參數說明 //$url 產生QRcode連結 //$level 容錯級別 H 30% 校正 / L = ~7% 校正 / M = ~15% 校正 / Q = ~25% 校正 //$size 生成圖片大小 max10 //$qrcodeimg 產生QRcode圖檔名 include_once XOOPS_ROOT_PATH."/modules/ 模組ID /class/phpqrcode/phpqrcode.php"; $value = $url; //二維碼內容 $errorCorrectionLevel = $level; //容錯級別 $matrixPointSize = $size; //生成圖片大小 //生成二維碼圖片 $filename = XOOPS_ROOT_PATH.'/uploads...

閱讀完整內容

解決CentOS安裝XAMPP後MariaDB大量產生err的方法-[ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255)-教學撰寫:徐嘉裕Neil hsu

最近靈異事件真的很多，像是完全按照官網版本安裝的XAMPP7.4X在CentOS上，照理說官方釋出的版本因該都正常的吧，沒想到一運行XAMPP就產生大量的.err檔，而請增加速度非常快，不用幾天就會吧root撐爆，不處理也不行先來看一下.err錯誤訊息內容(.err位置在/opt/lampp/var/mysql/ xxx.err ) 2021-04-12 8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255). 2021-04-12 8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'min_value' at position 3 to have type varbinary(255), found type varchar(255). 2021-04-12 8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255). 是說table的mysql表裡面的column_stats欄位預設是varchar(255)，但正確因該是varbinary(255)，但mysql表不是MariaDB的系統預設表嗎??怎麼會出錯......真是見鬼了! 但不解決又不行，因為err會一直增加，那只能修改欄位類型了! 在phpmyadmin->mysql->sql執行以下sql語法 use mysql; alter table column_stats modify column max_value varbinary(255); alter table colum...

閱讀完整內容