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

全新登場 neilambilight 3.5 ！此次更新全面配合 Xoops 2.5.11 官方升級，將原有的 Bootstrap 3 提升至 Bootstrap 4.6.2 ，為使用者帶來更佳的視覺體驗與操作流暢度。 新增功能 ： 數字廣告區塊與顯示裝置自訂區塊，靈活配置更方便。 佈景管理->圖片播放器管理->新增加區塊撥放器功能。 無障礙功能強化 ： 導盲磚 (:::) 、 網站導覽 (Site Navigator) 、 鍵盤快速鍵 (Access Key) 功能。 支援 Tab 與 Enter 鍵遍歷操作網站所有功能（含焦點樣式）。 圖片撥放器可自訂播放與暫停設定。 通過 FreeGo 程式檢測 ，符合 WCAG 2.1 無障礙標準。 錯誤修正 ： 解決 neilambilight 3.4 版已知 BUG，提升穩定性。 相容性與效能提升 ： 支援 PHP 8.3 與 MySQL 8 ，確保系統長期穩定運作。 優化後端程式結構，為未來功能擴充奠定基礎。 無論是視覺呈現、功能操作或是無障礙設計， neilambilight 3.5 都為您帶來全面升級的使用體驗。如果您正在使用 Xoops 2.5.11 穩定版，誠摯邀請您下載安裝，親自感受最新功能帶來的便利與效能！ 👉 佈景展示網站 ： https://chongshanli.com/ 立即升級，探索更多可能！ 🚀 neilambilight3.5更新內容 1、修正佈景管理區塊選單，若變更父層按鈕到其他分類，子層的categoryid沒被寫入新分類值的問題。 2、升級災害示警元件套件2.0版，增加AlertModule套件工具包，重構災害示警區塊管理及樣板程式，精簡合併優化去除多餘的結構,並保留示警元件套件1.0版可由區塊管理切換使用。 3、聯絡我們表單管理增加表單設定功能，新增加聯絡地址欄位 啟用/不啟用 必填欄位 啟用/不啟用。 4、聯絡我們表單增加聯絡地址欄位，包含鄉鎮縣市+地址欄位為一陣列組合，可於後台設定啟用或不啟用，增加必填欄位前後台驗證功能(如有啟用欄位必填)。 5、佈景管理->廣告管理->新增加數字廣告管理功能，可以建立文字與滾動數字的廣告組合，可以新增編輯刪除排序等操作。 6、新開發數字廣告區塊，可於區塊後台設定 顯示數量 / 顯示方式 / 橫列數量 ...

Xoops2.5.11之後提供了一個讓佈景可以引入Xoops內建Bootstrap4的方法，而且很好用，不會跟佈景原本引入的Bootstrap3衝突，方法如下!! 在佈景的根目錄放置theme_autorun.php檔，內容貼上以下code <?php xoops_load('XoopsFormRendererBootstrap4'); XoopsFormRenderer::getInstance()->set(new XoopsFormRendererBootstrap4()); 來看看效果如何?還沒放置theme_autorun.php之前的profile模組->編輯帳號表單頁面是這樣，原生的Xoops表單樣式。 放置theme_autorun.php之後的profile模組->編輯帳號表單頁面是這樣 很明顯欄位都美化很多，而且不會跟Bootstrap3衝突，有需要的朋友參考看看! 工作心得撰寫： 徐嘉裕 Neil hsu

最近剛好要做到一個可以讓客戶自訂背景顏色的功能，發現這個bootstrap4顏色選擇器插件還真不錯用，基本色都能鍵入，這裡分享套用方法。 1、先去下載bootstrap4套件包  https://github.com/davkhun/color-palette-picker 2、引入套件包裡面的css跟js檔 <link href="bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/colorpalettepicker.js"></script> 3、在input上方丟一個div區塊<div id='colorpalettediv'></div>  結構 <div id='colorpalettediv'></div>  <input type='text' id='color' class=' form-control' name='color' value='rgb(0, 0, 255)' placeholder='背景顏色'> 4、在頁面最下方呼叫colorPalettePicker函式，並吧color值傳入input中 <script type='text/javascript'> $('#colorpalettediv').colorPalettePicker({ lines:2, b...