利用JQ為 Discuz 新增文字大小切換功能

早期Discuz 7.x時代其實文內大小切換的功能 , 不過後來 X 版本後取消了這個功能  ! 之前剛好有一個案件需要字型大小功能 , 因此重新將字型大小切換功能安裝至 Discuz X 以上的版本中 , 實現方法可以參考以下方式：

1. 先下載附件中 jQuery font-size 相關檔案 , 檔案已經做了防衝突撰寫 , 可以確實在DZ中執行jQuery效果 (延伸閱讀：如何解決jQuery與Discuz衝突問題)，並且將檔案上傳到伺服器中：

遊客，如果您要查看本帖隱藏內容請回復

2. 找到 template 資料夾中目前使用的風格的 forum 資料夾中 viewthread_node.htm 的檔案 , 添加以下程式碼

1. 
   
2. <link type="text/css" rel="stylesheet" href="自定義位置/jfontsize.css" /> //呼叫css
   
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> //呼叫jq程式庫
   
4. <script type="text/javascript" language="javascript" src="自定義位置/jquery.jfontsize-1.0.js"></script> //呼叫字型效果jq檔案
   

複製代碼

3.  一樣在 viewthread_node.htm 檔案中 , 決定要插入按鈕的位置 , 插入以下程式碼

1. 
   
2. <span class="pipe">|</span><a class="jfontsize-button" id="jfontsize-m2" href="#">小</a>
   
3.        <a class="jfontsize-button" id="jfontsize-d2" href="#">中</a>
   
4.        <a class="jfontsize-button" id="jfontsize-p2" href="#">大</a>
   

複製代碼

並且將下列程式碼添加在 viewthread_node.htm 檔案底部 , 注意不要被其它程式碼包覆：

1. 
   
2. <script type="text/javascript" language="javascript">
   
3.                         jq('此處請填入按鈕插入位置上層的id或class').jfontsize({
   
4.                             btnMinusClasseId: '#jfontsize-m2',
   
5.                             btnDefaultClasseId: '#jfontsize-d2',
   
6.                             btnPlusClasseId: '#jfontsize-p2',
   
7.                             btnMinusMaxHits: 2,
   
8.                             btnPlusMaxHits: 5,
   
9.                             sizeChange: 2
   
10.                         });
    
11. </script>
    

複製代碼

來看一下成功安裝後的效果吧 , 如果懂Css的話按鈕可以自行修改喔 ~


２０１３０８１５更新：目前應用中心已經有推出插件版了 ! 有需要的朋友, 不用自己修改啦 , 直接去應用中心下載安裝就可以囉 :)

vincent

queber

學習了! 很有用的教程

vincent

請問一下...兩個附件是要上傳到哪個資料夾中??

ws830106

應該不錯用，小說論壇都可以用到

eric0703

學習了!來看看

chaohsien

看起來不錯，希望真的有功能

PeterYa@FB

!really!!

PeterYa@FB

插件在哪嘞?

VincentWu@FB

感謝分享，實用的網頁功能