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

Xoops佈景預設引入的jquery.js已經很老舊了，如果要引入最新的jquery-3.5.1.min.js則會與$xoops_module_header中預設jquery.js衝突，所以如果佈景要引入jquery-3.5.1.min.js必須做以下修改才行，移除Xoops預設的jquery.js。 1、在佈景樣板的<{$xoops_module_header}>標籤上方引入jquery-3.5.1.min.js，然後再引入jquery-migrate-3.3.0.min.js以便做舊版jquery.js的兼容，若沒引入jquery-migrate-3.3.0.min.js很多舊版的JS功能都會發生異常無法使用。 所以樣板程式就會是以下這樣 <{php}> global $xoopsTpl; //引入jquery-3.5.1.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-3.5.1.min.js' type='text/javascript'></script>"; //引入jquery-migrate-3.3.0.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-migrate-3.3.0.min.js' type='text/javascript'></script>"; echo $module_header; <{/php}> <!--module_header--> <{$xoops_module_header}> 2、再來解決$xoops_module_header重複引用jquery.js的問題，需要吧Xoops預設的jquery.js拿掉，還有tadtools中較舊版的jquery-migrate-3.0.0.min.js拿掉，這裡需要使用samty的replace功能，程式

CSS物件垂直置中如果是以前只能用table td屬性中的vertical-align: middle;來定義，後來有CSS3可以透過假表格( display:table-cell;)吧div指定為table屬性後使用vertical-align: middle;但我覺得還是非常不好用，這裡分享兩個css3物件垂直置中的方法讓大家參考一下! 例如我們要做像以下的標題樣式 如果文字多顯示兩行，文字少顯示一行，但都必須垂直置中。 HTML結構  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div></div>  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字</a></div></div> 方法1，使用transform來垂直置中 transform CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。 參考資料來源： https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform #titlebox{ position: relative; height: 132px; background: #ffffff url(../../img/unit/) no-repeat left top; text-align: center; font-size: 200%; overflow: hidden; } #titlebox div{ position: relative; top:50%; transform:translateY(-50%); padding: 0px 20px; max-height:105px; overflow: hi