跳到主要內容

發表文章

目前顯示的是 5月, 2019的文章

Xoops內建圖標Font Awesome的使用方法!!-教學撰寫:徐嘉裕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顏色選擇器插件套用方法!-教學撰寫:徐嘉裕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翻譯套件切換語言調整頁面css樣式的方法-教學撰寫:徐嘉裕Neil hsu

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(&#

分享一個PHP好用的去除副檔名跟取得副檔名function-教學撰寫:徐嘉裕Neil hsu

通常在處理檔案上傳的時候會吧檔名跟副檔名分開處理,這時候就需要移調副檔名或移調檔名了,透過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%