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

xoops2.59之後在media資料夾裡面就有放置font-awesome資料夾了，所以不用引入font-awesome.min.css也能直接使用Font Awesome圖標喔! 網站： https://fontawesome.com/ 選擇圖標： https://fontawesome.com/v4.7.0/icons/ 使用方法只要在佈景上或是區塊及模組樣板上放上Font Awesome標籤跟class定義就好了! 例如要使用以下圖標 吧紅框的中的 <i class="fa fa-user-circle-o" aria-hidden="true"></i>  貼到樣板或區塊就能使用了 另外還能調整icon的大小及多項設定，好朋友可以參考看看! 其他設定：  https://fontawesome.com/v4.7.0/examples/ 工作心得教學撰寫： 徐嘉裕 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...

Google翻譯套件是可以崁在網頁上面讓user自行切換的網頁程式，目前雖然已經停止申請必須使用Chrome瀏覽器的內建翻譯功能，但如果是ie或是ff還是可以用Google翻譯套件，之前有寫過一個教學有需要的朋友可以參考看看!! https://neohsuxoops.blogspot.com/2018/12/googlejs.html 這些是前言，目前遇到需要處理的問題是如果網站是繁體中文，切換成英文或日文因為字元變多了，會導致版面變形，像下圖這樣： 文字都疊再一起了，物件也跑位了，所以必須寫一段code去偵測切換的語言來調整css的文字大小的字句間距，方法如下： //Google翻譯套件程式區 <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> //判斷Google翻譯套件語言自定義css樣式區 <script> $(document).ready(function(){ $('#google_translate_element').bind(...

通常在處理檔案上傳的時候會吧檔名跟副檔名分開處理，這時候就需要移調副檔名或移調檔名了，透過G大神找到神友寫的一篇教學，我吧他程式function起來以方便使用，CODE如下： //吧以下的CODE丟到function.php裡面然後在需要使用的檔案中引入function.php //去除副檔名跟取得副檔名 function strriposfunction($val="",$type=""){ switch($type){ case "1": //去除副檔名 $fileName = $val; if (false !== $pos = strripos($fileName, '.')) { $fileName = substr($fileName, 0, $pos); } break; case "2": //取得副檔名 $fileName = $val; if(false !== $pos = strripos($fileName, '.')) { $fileName = substr($fileName, $pos+1, strlen($fileName)); } break; } return $fileName; } 這樣只需要呼叫 strriposfunction()就能完成去除副檔名跟取得副檔名操作了!! //去除副檔名 $val=test.php; echo strriposfunction($val=$val,$type="1"); //$type=1 去副檔名 得到：test //取得副檔名 echo strriposfunction($val=$val,$type="2");  //$type=2  取得副檔名 得到：php 有需要的朋友參考看看 參考資料來源： https://blog.xuite.net/choubee/blog/39503508-php+-+%E5%8E%BB%E9%99%A4%2F%E5%8F%...

如果要做一個AJAX讀取條，像是用在瀑布流讀取資料這樣的特效，方法如下： 使用JQuery AJAX 中的complete，beforeSend這兩個參數。 complete：請求完成時執行的函式(不論結果是success或error)。 beforeSend：發送請求之前會執行的函式。 //AJAX-CODE $.ajax({ url: xoopsjsurl + '/modules/neilwenchuang/ajax.php', type: 'POST', data: { id: $id, sortid:$sortid, number:$number }, cache:false, ifModified :true, async:false, success: function(response) { if(response=="") return false; //空值終止程式 $("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>"); }, beforeSend:function(){  //發送請求之前會執行的函式 $('#allrecordsimg').show(); }, complete:function(){ //請求完成時執行的函式 $('#allrecordsimg').hide(); },    error: function() { console.log('ajax error!'); } }) //HTML-CODE <p id='allrecordsimg'></p> //...

客戶剛好需要做一個瀑布流功能的介面，瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料，像是下圖這樣。 詳細程式結構就不描述了，這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式，之後如果有需要可以再做其他延伸開發，code如下： HTML結構 <div id='centerbox'> <div class="row customrow"> <{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}> <div class="col-md-6 customrowcol-md-6"> <div id='contentbox'> <{$boxArr.contentbox}> </div> </div> <{/foreach}> <div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值 <div id='waterfallsflowformboxajax' name='0' ></div> //建構瀑布流區 //備註：name='0'為預設值，到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數 </div> </div> JS結構 //偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數 $(window).scroll(function(){ var scrollint = $(window).scrollTop(); if ($(window).height() + $(window).scrollTop() == $(document).height()) { $ajaxsetup = $("#waterfallsflowbox...

最近需要幫客戶做一個jQuery區塊特效，就是點了按鈕左區塊會往左滑出內容區，然後再點一次按鈕左區塊又會往右滑回內容區， 這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉，這樣也能使用.css()來控制區塊的移動特效，方法如下： //html結構 <div id='leftboxdiv'> <div id='switchbtn' name=' go '></div>  //name值預設是go 內容內容內容內容內容內容內容內容內容內容內容 </div> //js-code //滑入滑出左區塊 $(document).ready(function(){ $("#switchbtn").click(function(){ if($(this).attr("name")=="go"){ $("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"}); $(this).attr('name','back');  //吧name值改成back }else{ $("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"}); $(this).attr('name','go');    //吧name值改成go } }); }); //css #leftboxdiv{ position: absolute; width: 293px; height: 1076px; background: url(../../img/blocks/travelerliving-commodity_01.png) repeat ...