搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 Discuz 使用教程 利用JQ為 Discuz 新增文字大小切換功能
byadmin 發表於 2013-5-7 00:23:23 , 11761人已閱讀 , 19人回應
早期Discuz 7.x時代其實文內大小切換的功能 , 不過後來 X 版本後取消了這個功能  ! 之前剛好有一個案件需要字型大小功能 , 因此重新將字型大小切換功能安裝至 Discuz X 以上的版本中 , 實現方法可以參考以下方式:

1. 先下載附件中 jQuery font-size 相關檔案 , 檔案已經做了防衝突撰寫 , 可以確實在DZ中執行jQuery效果 (延伸閱讀:如何解決jQuery與Discuz衝突問題),並且將檔案上傳到伺服器中:
遊客,如果您要查看本帖隱藏內容請回復


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

  1. <link type="text/css" rel="stylesheet" href="自定義位置/jfontsize.css" /> //呼叫css
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> //呼叫jq程式庫
  3. <script type="text/javascript" language="javascript" src="自定義位置/jquery.jfontsize-1.0.js"></script> //呼叫字型效果jq檔案
複製代碼
3.  一樣在 viewthread_node.htm 檔案中 , 決定要插入按鈕的位置 , 插入以下程式碼

  1. <span class="pipe">|</span><a class="jfontsize-button" id="jfontsize-m2" href="#">小</a>
  2.        <a class="jfontsize-button" id="jfontsize-d2" href="#">中</a>
  3.        <a class="jfontsize-button" id="jfontsize-p2" href="#">大</a>
複製代碼
並且將下列程式碼添加在 viewthread_node.htm 檔案底部 , 注意不要被其它程式碼包覆:

  1. <script type="text/javascript" language="javascript">
  2.                         jq('此處請填入按鈕插入位置上層的id或class').jfontsize({
  3.                             btnMinusClasseId: '#jfontsize-m2',
  4.                             btnDefaultClasseId: '#jfontsize-d2',
  5.                             btnPlusClasseId: '#jfontsize-p2',
  6.                             btnMinusMaxHits: 2,
  7.                             btnPlusMaxHits: 5,
  8.                             sizeChange: 2
  9.                         });
  10. </script>
複製代碼
來看一下成功安裝後的效果吧 , 如果懂Css的話按鈕可以自行修改喔 ~
字型大小切換.jpg


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

byvincent 發表於 2013-7-27 02:51:26

回覆 顯示全部樓層 道具 舉報

byqueber 發表於 2013-7-31 12:16:11
學習了! 很有用的教程

回覆 顯示全部樓層 道具 舉報

byvincent 發表於 2013-8-12 01:44:28
請問一下...兩個附件是要上傳到哪個資料夾中??
admin 發表於 2013-8-12 15:16
隨意都可以, 重點是呼叫js的路徑要寫對
byws830106 發表於 2013-9-1 04:00:38
應該不錯用,小說論壇都可以用到

回覆 顯示全部樓層 道具 舉報

byeric0703 發表於 2013-10-7 06:11:44
學習了!來看看

回覆 顯示全部樓層 道具 舉報

bychaohsien 發表於 2014-2-13 14:04:08
看起來不錯,希望真的有功能

回覆 顯示全部樓層 道具 舉報

byPeterYa@FB 發表於 2014-3-8 21:18:44
!really!!

回覆 顯示全部樓層 道具 舉報

byPeterYa@FB 發表於 2014-3-31 13:53:33
插件在哪嘞?

回覆 顯示全部樓層 道具 舉報

byVincentWu@FB 發表於 2014-4-1 10:44:05
感謝分享,實用的網頁功能

回覆 顯示全部樓層 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.079297 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-29 23:44

回頂部