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

 jQuery datepicker月曆是非常好用的時間選擇套件，可以選擇年/月/日/時/分/秒，不過最近剛好需要用到的時間格式為date，不需要時分秒，雖然官網有datepicker選單的設定方法，但我還是覺的自己寫一個js hack來處理比較快，以下為程式說明 原生的datepicker月曆套件因該是如下圖這樣，有完整的時間選項 只需要加上以下code，就能去除時分秒按鈕及文字框中的00:00:00 <script> $(document).ready(function() { $('body').on('change', ' #mydate1 ', function() {  //紅字為月曆input的id var date = $(this).val(); var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(date); $(this).val(newDate); $('.ui-timepicker-div').remove(); }) }); </script> 這樣就可以了，實際測試看看 時分秒套件已經被移除，文字框也不會再顯示00:00:00，這樣存進資料表date欄位就不會出錯，有需要的朋友參考看看! 工作心得撰寫： 徐嘉裕 Neil hsu

使用JS函數sortable()對CK編輯器進行拖曳時，會導致textarea被鎖定無法編輯，這是一個很頭痛的問題，還好在ckeditor官網找到解決方案，就是當拖曳觸發時(start)先銷毀CKEDITOR，拖曳結束(stop)在重建CKEDITOR，解決方法如下： function dragmenufunction() { $(".sortable").sortable({ items: ".sortablebox", //指定拖曳元件或ID及CLASS //拖曳開始 start: function(event, ui){ var textareaId = ui.item.find(' .editor ').attr('id' );  //紅字的.editor為textarea->class if (typeof textareaId != 'undefined') { var editorInstance = CKEDITOR.instances[textareaId]; editorInstance.destroy(); CKEDITOR.remove( textareaId ); } }, //拖曳結束 stop: function(event, ui){ var textareaId = ui.item.find(' .editor ').attr('id');   //紅字的.editor為textarea->class if (typeof textareaId != 'undefined') { CKEDITOR.replace( textareaId ); } } }); } 實際測試看看，當拖曳時ck編輯器會被銷毀呈現原生textar...

要取得select多選項目(multiple)值必須使用each遍歷全部的select選單後取得selected狀態val，存成陣列再用$.inArray()比對陣列中是否有符合條件，以下為應用範例說明 例如有一個群組選單，我們要判斷【訪客】群組是否有被選取(val=3)，如果有被選取則顯示->訪客報名啟用註冊功能欄位 如果沒有被選取則隱藏->訪客報名啟用註冊功能欄位 code如下說明 //html結構 <span id='helpBlock' class='help-block'>選擇可報名群組</span> <select class='form-control' id='browsegroup' name='browsegroup[]' multiple > <option value=1 data-id=1 >管理員</option> <option selected='selected' value=2 data-id=2 >註冊會員</option> <option selected='selected' value=3 data-id=3 >訪客</option> </select> <div class='col-sm-12' id='registerbox'> <label class='col-sm-6'><span id='helpBlock' class='help-block'>訪客報名啟用註冊功能</span> </label> <div class='col-sm-6'><label class='radio-inline'> <input class='' type='radio' id='' name...

分享一個好用的JQuery去除HTML標籤function，可以用在編輯器計算字數的地方，範例如下： //去除TTML標籤function function removeHTMLTag(str) { str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白 str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多餘空行 str = str.replace(/&nbsp;/ig, ''); //去掉&nbsp; str = str.replace(/\s/g, ''); //將空格去掉 return str; } //應用範例 $test="<div>文字文字文字文字<br />文字文字文字文字</div>"; removeHTMLTag(str=$test); //輸出->文字文字文字文字文字文字文字文字 removeHTMLTag(str=$test) .length; //輸出16字數 以上工作心得分享，有需要的朋友參考看看 工作心得撰寫： 徐嘉裕 Neil hsu

cookie運作原理是吧伺服器端的資料儲存於user端的瀏覽器中，然後可讀寫cookie值，通常用於網站登入儲存會員密碼之類的，但也能作為區隔同ip多台電腦或同電腦多個不同瀏覽器的識別，只需要在網站首次進入時寫入一組cookieid即可。 不過問題來了，php雖然可以使用setcookie()寫入cookie，但卻無法判斷user端的cookie是否啟用(cookie是在瀏覽器前端執行)，用js也能寫入cookie並判斷是否啟用，但所需的參數還是需要php先輸出到樣板在用js取值寫入，怎麼用都很麻煩的感覺。 解決方案就是用js來判斷user端的cookie是否啟用，若啟用直接用ajax在php端setcookie()寫入cookie，這樣整合起就能吧js跟php不足的地方都補齊了，方便好用。 以下為code範例 //tpl樣板部分 <!-- 載入cookie --> <script type="text/javascript" src="<{$xoops_url}>/modules/模組ID/js/cookie.js"></script> <script>var xoopsjsurl='<{$xoops_url}>';</script> //js部分 //建立一個cookie.js檔並放置以下內容 //判斷cookie是否啟用並寫入cookieid $(document).ready(function() {   if (typeof(getCookieByName('cookieid')) != 'undefined') return  //判斷指定cookie是否有建立，空值才執行以下程式   var dt = new Date();   dt.setSeconds(dt.getSeconds() + 60);   document.cookie = "cookietest=1; expires=" + dt.toGMTString(); //建立一個測試cookie   var cookiesEnabled = document.cookie.indexOf("...

會使用到Ajax長輪詢功能也是意外，本來是想用JS跨域查詢，由A頁面查詢B頁面執行ajax程序後返回值做同步處理，結果經測試JS跨域查詢只能查到讀取頁面的原始資料，無法取得JS程序處理過後的變動數值，試了半天，只好用Ajax長輪詢來解決問題了，順便寫一個工作心得做為紀錄 Ajax長輪詢跨頁資料查的運作原理如下圖 以上圖解也就是使用Ajax長輪詢保持連線持續查詢資料庫，若有比對到資料則返回數值後以非同步方式更新內容，沒有就繼續查，保持連線狀態，舉一個Ajax長輪詢應用實例大家就清楚了，FB上貼文留言，即便未更新頁面，有其他用戶的的留言也會即時顯示在留言處，這就是使用了Ajax長輪詢的效果讓Ajax一直保持在 連線查詢返回更新 狀態，即時同步資料。 以下為Ajax長輪詢CODE 範例 //HTML結構 <div id='showbox'><span id='numberbox'> 30 </span></div> <script>ajaxlongpolling();</script> // 30 為固定值，透過JS取值後傳送到ajax.php比對資料 //JS結構-$.ajax function ajaxlongpolling() { $.ajax({ url: 'ajax.php', timeout: '80000', //ajax請求超時時間80秒 type: 'POST', data: { var1: $("#numberbox").text(), //取的#numberbox中數值 timedate: '80' //40秒後無論結果伺服器都返回數據 }, success: function(response) { var $response_arr = response.split(','); //切割陣列 //返回1->查詢到資料-重新讀取ajaxlongpolling(); if ...

簡單來說，就是作用中的按鈕觸發對應的區塊開啟或關閉，其他非作用中按鈕對應的區塊自動隱藏，類似滑動選單的原理如下圖這樣： 當點擊按鈕1時開啟區塊1，若再次點擊按鈕1則區塊1隱藏(收合) 當點擊按鈕2時開啟區塊2，並吧按鈕1的區塊隱藏，這樣就會一值保持只有一個被點擊的按鈕在操作區塊開啟或隱藏 code如下 //html結構 <a type='button' class=' openbtn1 btn btn-md btn-info active openadmin'>按鈕1</a> <div class= 'openbox1 openboxArr'>區塊1區塊1區塊1</div> <a type='button' class=' openbtn2 btn btn-md btn-info active openadmin'>按鈕2</a> <div class=' openbox2 openboxArr'>區塊2區塊2區塊2</div> <script>nopenadminfunction();</script> //js code function nopenadminfunction() { $('.openboxArr').hide(); $(".openadmin").each(function(index) { var $topindex = index; var $openbtn = '.openbtn' + (index + 1); var $openbox = '.openbox' + (index + 1); $("body").on("click", $openbtn, function(e) { //非點擊區隱藏內容 $(".openboxArr").each(function(index) { if ($topinde...

使用jquery->scroll進行判斷取值時遇到頭痛的問題就是會重複觸發兩次，這樣會導致觸發後執行的function也跑兩次，輕者消耗CPU效能，嚴重的像是瀑布流相同內容輸出兩次，所以必須要有scroll的防抖機制才行(只取一次觸發值)。 這是原生的scroll code ，大家可以執行看看 $(window).scroll(function() {     alert($(window).scrollTop()); }); 只要滑鼠滾輪向下停住時就會發生兩次觸發，為了解決這問題透過G大神找到這個好用的scroll 防抖程式 //scroll防抖程式 var timeout = null; window.addEventListener('scroll', function() {     if(timeout !== null) clearTimeout(timeout);     timeout = setTimeout(function() {     var scrollTop =$(window).scrollTop();          //程式執行區            alert(scrollTop);     }.bind(this), 1000); }); 只需要吧工作function放在紅字的 程式執行區 即可，防抖程式會以setTimeout延遲1000毫秒為誤差範圍取最後一個觸發值，用這支程式來跑AJAX瀑布流資料也不會亂噴了，CPU消耗也減低很多，有需要的朋友可以參考看看。 工作心得撰寫： 徐嘉裕 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...

使用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 + ')...

 寫了一個JS捲軸觸發後按時間依次顯示的動畫效果的範例，效果如下影片 就是當捲軸拉到觸發的ID時物件按照時間依序觸發動畫，這通常用在視差設計裡面，方法如下 //HTML結構 <div class="row"> <div id='addressbox14' class="each" > <div class="col-md-6 addressbox01 " > 略..... </div></div> <div id='addressbox15' class="each" > <div class="col-md-6 addressbox02 " > 略..... </div></div> <div id='addressbox16' class="each" > <div class="col-md-6 addressbox01 " > 略..... </div></div> <div id='addressbox17' class="each" > <div class="col-md-6 addressbox02 " > 略..... </div></div> </div> //JS結構 $(window).scroll(function() { var $scrollTopa =$(this).scrollTop(); //當前座標位置 var $scrollTopb=$scrollTopa+850; //觸發位置 $(". each ").each(function(index) {   var $index=index*270; //setTimeout時間each迴圈取index乘270數...

css的first-letter選擇器可以讓第一個字元自訂樣式，也就是第一個字能變顏色變大變小都行，但問題來了，如果客戶希望第二個字元或第三個字元都能套用特別的顏色，first-letter方法就不可行了，還是要靠js來處理才行。 例如要做一個像下圖這樣的效果，新聞標題的前2個字元為紅色，其他字元為黑色。 code如下： html結構部分 <div id='titlebox'><a   class='exchangeArr'   href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div> 在標題<a>標籤加上 class='exchangeArr' js-code部分 在樣板底端加上以下code <script> $(".exchangeArr").each(function(index) { var $exchangetext = 2; //由0開始到擷取位置字元數 //擷取指定字元 var $substrbefore=$(this).html().substr(0,$exchangetext); //擷取剩餘字元 var $substrRear=$(this).html().substr($exchangetext); //輸出 $(this).html(' <span id="textcolor"> '+$substrbefore+' </span> '+$substrRear+''); }); </script> 綠色的<span>標籤跟id="textcolor就是指定第2個字元切割後套用上去的，在跟剩餘字元組合輸出的結果。 最後就是給id="textcolor定義一個css顏色樣式 #textcolor{ color: #ff1b1b; } 這樣就完成了，可以修改要擷取的字元數套用樣式，有需要的朋友參考看看! 工作心的撰寫： 徐嘉裕 Neil hsu

使用prop("checked",true)可以指定type='radio'元件的狀態為checked，如果我們想用某一個單選按鈕來控制另外一個單遠按鈕的checked狀態可以使用以下方法 例如要切換下方的-> 設置預約發文為【不設置】時 ， 上方的是否啟用內容變為【啟用】 ， 設置預約發文為【設置】時 ， 上方的是否啟用內容變為【不啟用】 ，像下圖這樣： HTML結構 <div class='col-sm-12 col-sm-12Custom'> <label class='col-sm-6'> <span id='helpBlock' class='help-block'>是否啟用內容</span> </label> <div class='col-sm-6'> <label class='radio-inline'> <input class='' type='radio' id='' name='enable' value='0' >不啟用 </label><label class='radio-inline'> <input class='' type='radio' id='' name='enable' checked=checked value='1' >啟用 </label> </div> </div> JS-CODE $("body").on("change", "[name=prior]", function (){ if($(this).val()=='1'){ $("#priortimebox").slideToggle("fast...

現在很多網站排序都是採用拖曳式的，但拖曳也並非萬能，像是有分頁的資料或是有幾百筆以上的資料或是階層式資料用拖曳就很累了，還是用輸入排序編號比較方便，所以如果要用拖曳的排序最好是在20~30筆以內資料為佳，這裡分享一個使用jquery-ui.js的sortable做一個tabe拖曳排序功能方法如下： HTML結構部分 (紅字為拖曳需要增加的部分) <table class='table  sortable' > <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr class='tr' id='1' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'   id='2' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'  id='3' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> </tbody> </table> //引入JS (如Xoops佈景已有引入則不需重複引入) <script src="http://tool.phpddt.com/resources/js/jquery-1....

在開發模組表單有時候會需要製作表單的填寫步驟，例如購物流程，問卷報名表之類的，每個流程都會儲存該流程的資料內容到程序完成，但如果USRE點了瀏覽器的返回上一頁可能會導致流程不完整或是程序出錯(例如金流串接等)，所以必要時候選禁止瀏覽器返回上一頁是很重要的。 G大神有很多JS禁止返回上一頁JS程式分享，但有的Firefox有效Chrome又無效，不然就是ie無效實在很頭痛，經過測試寫了一個能兼容4種瀏覽器的function分享給大家，程式說明如下。 首先要使用JS的window.history.forward()來做操控瀏覽器歷史紀錄的功能! 作用機制如下圖 必須吧禁止返回上一頁JS程式放在A網頁，然後當表單送出進入B網頁時，B網頁就會產生禁止返回A網頁的效果 (若吧程式放置在B網頁是無效果的) 。 //JS-CODE->放置在JS程式裡面 //禁止返回上一頁 function prohibitpreviouspage(){ if(navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6 ){ //Firefox setTimeout("fn_forward()",1); window.history.go(1); }else{ //IE.Chrome.Edge window.history.forward(); } } function fn_forward() { history.forward(); setTimeout("fn_forward()",1); } 然後再A網頁引入禁止返回上一頁JS程式 <script type="text/javascript" src="js/customize.js"></script> <script type="text/javascript">prohibitpreviouspage();</scr...

如果要用jQuery的mouseenter(滑鼠滑入)及mouseleave(滑鼠滑出)來執行物件動畫，會遇到一個問題，假使mouseenter時物件因該要跑到left：80px的位置才算動畫完成，mouseenter則回到left：0px的位置，但在動畫未執行完成user又快速的在執行區塊滑入滑出，就會變成動畫亂跳的情況!! 舉例來說，像下面這張圖三個物件是尚未mouseenter觸發前的狀態 滑鼠滑入其中一個按鈕會觸發mouseenter動畫事件，物件往左上移動 滑鼠滑出執行區會觸發mouseleave動畫事件，物件往右下移動，返回原本位置 js-code應該是這樣 //mouseenter $("body").on("mouseenter", "#indexblocksbox01", function (){ $(this).css("cursor", "pointer"); $(this).css({"animation-name":"indexbox1","animation-duration":"0.4s","left":"160px","top":"53px"}); $("#title01btn").css({"animation-name":"indexbox2","animation-duration":"0.4s","background-color":"#FFFFFF","color":"#E77C00"}); }) //mouseleave $("body").on("mouseleave", " #indexblocksbox01", function (){ $(this).css("cursor", "...

JQuery Tabs Generator是一個好用的頁籤生成器，輸入內容就能產生頁籤，大家可以點以下的網址自己試看看 https://www.html-code-generator.com/jquery/tabs-generator.php 不過如果要修改成用PHP迴圈輸出smarty樣板就還需要再做些修改，才能靈活實用美觀大方，像是下面這樣： 修改過後頁籤可隨資料自動增加跟刪減，如果只有一個頁籤也能正常顯示內容 以下為修改過的全部程式codo範例 php端-code $descriptionArr = array(); //建構陣列 $i=0; $descriptionArr[$i]['btntext']=_MD_SHOPWCASE20;  //按鈕文字 $descriptionArr[$i]['btncenter']=$productlimt['description'];  //頁籤內容 $descriptionArr[$i]['i']=$i;  //頁籤id $i++; $descriptionArr[$i]['btntext']=_MD_SHOPWCASE22;  //按鈕文字 $descriptionArr[$i]['btncenter']=$productlimt['specification'];  //頁籤內容 $descriptionArr[$i]['i']=$i;  //頁籤id $i++; $descriptionArr[$i]['btntext']=_MD_SHOPWCASE23;  //按鈕文字 $descriptionArr[$i]['btncenter']=$productlimt['productwarranty'];  //頁籤內容 $descriptionArr[$i]['i']=$i;  //頁籤id $shopwcase['descriptionbox']=$descriptionArr; 輸出smar...

之前寫過一篇【Bootstrap3瀑布流排版用JS套件-Masonry-教學】 https://neohsuxoops.blogspot.com/2019/08/bootstrap3js-masonry.html 不過這方法只能用在已讀出的資料樣板排版上，例如PHP讀出50筆，然後可以用這個方法來做瀑布流排版，但如果要應用在AJAX上則需要再做修改才能應用。 例如像 pinterest 網站，預設資料只出現幾筆，然後瀏覽器卷軸到底之後又會出現資料，一直循環開啟到資料全部讀完，以AJAX非同步方式求取資料的瀑布流效果。 AJAX結構跟運作原理就不多說了，這裡直接是masonry套件+imagesloaded套件在AJAX中的應用方式，CODE如下。 1、先在樣板裡面引入三支檔 <script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="js/masonryajaxjs.js"></script> //此為呼叫AJAX的JS檔需自行建立 2、在樣板上貼上以下的function，放在三個引入檔的下方 <script> function masonryfunction(){ $('.masonry').imagesLoaded(function() { var msnry = new Masonry(".masonry",{  itemSelector: '.item', columnWidth: <{$enshow.columnWidth}>,   //單個物件寬度 gutter: <{$enshow.gutter}>,   //物件邊距 isFitWidth: true...

網站使用雙IP基本上也沒什麼問題，只要兩個IP都能解析到伺服器端就OK，不過目前遇到的問題是針對桃園市教育局私有雲虛擬主機雙IP問題做處理的，先講解一下環境配置。 私有雲虛擬主機預設有兩組IP，分為內網段跟外網段 例如 內網段IP-10.241.82.101 外網段IP-163.30.41.232  私有雲會針對學校的IP自動做DNS解析並配置到內網段，換句話說例如A學校進入A學校私有雲的網站，則私有雲DNS自動解析對應內網段IP-10.241.82.101，反之則對應外網段IP-163.30.41.232 。 但遇到一個頭痛的問題，就是外網段無權限解析內網段的私有雲虛擬主機，內網段一樣無法解析外網段的私有雲虛擬主機!! 但Xoops的實體路徑只能設一組，如果設成外網段的IP，則校內就看不到網站，反之設成校內IP，則外網就看不到網站。 解決方案只能修改Xoops的路徑跟前端透過jQuery轉換網址，方法如下： //php修改部分 1、先找到mainfile.php檔案，用筆記本打開 吧XOOPS_URL替換為 define('XOOPS_URL', "http://".$_SERVER['HTTP_HOST'].""); //$_SERVER['HTTP_HOST']為PHP自動判斷連線IP產生的網址變數，所以這樣用內網段進入XOOPS_URL就會變成內網段IP-10.241.82.101，用外網段進入XOOPS_URL就會變外網段IP-163.30.41.232 ，如此一來內外網就都能開啟網站了! 但這樣只完成了30%，因為假設學校用內網段的CK編輯器上傳了一張圖片，而圖片路徑是被寫入資料庫的，那外網則無法觀看此圖片，因為外網沒有解析內網段的權限。 所以還必須修改佈景加上全局圖片網址自動轉換功能才能完整解決，修改方法如下。 //JS修改部分 在佈景js區加上以下code <script> //取得Xoops實體路徑 var xoopsjsurl='<{$xoops_url}>'; ...

在開發xoops佈景時如果標題字數太長，我們通常會設個預設高度然後用overflow: hidden;隱藏被折行的內容，正常條件下這部分是沒問題的，但如果佈景標題想做些特別的設計，像是在文字右邊加上一些裝飾圖文，如果沒有限制輸出字元總數就會很麻煩! 舉例來說，如果要做文字右邊為斜角裝飾，文字區塊為display: inline;線內元素，文字沒段行之前都是正常的像下圖這樣 但如果文字段行後，原本的斜角就會跑到段行的結束點去 這樣畫面就不好看了，原因如下圖說明： 解決方法只能用jQuery函數str.substr()限制輸出字元總數，讓文字不要折行，這樣右邊距就不會跑到折行的下方，方法如下! 1、在佈景的<{$block.title}>標籤前面加上class定義好讓jQuery取值 <span class='blocktitle blocktitleto<{$block.id}>' name='<{$block.id}>'><{$block.title}></span> 備註說明：<{$block.id}>為區塊的id，我們用它來當作class的前綴 2、在佈景的js檔加上以下code //顯示字元限制 $(document).ready(function(){ $(".blocktitle").each(function(index) { $idname = $(this).attr("name"); var str=$(".blocktitleto"+$idname).text(); $(".blocktitleto"+$idname).text(str.substr( 0 , 25 )); }); }); 備註說明str.substr( 0 , 25 ) 藍字為擷取字串起始點，紅字為擷取字元總數 然後來看看剛剛被折行的區塊是否正常顯示 因為字元有輸出限制所以沒折行，右邊的斜線裝飾框就能正常顯示在區塊的右邊距了! 備註說明：如果是自行開發模組不用那麻煩，只要在php輸出...