[教學][外掛][修正]CodeExpand

文章由 **SatanEvil** » 2004-02-17 21:19

感覺大家寫的還是有點混亂，加上今天腦袋打結了
所以就花了時間去把整段整理了一下
也順便加上對於友善列印時沒有框框的問題的改進\r
(基本上是混用原本的<table>跟js的<div>來做的)
沒去測試區找小竹子大大的文章，所以從sh85216s兄對這篇的回應開始研究:
[問題]竹貓星球的這種外掛叫什麼名字啊
原始來源:
Topic :: [Release] FI CodeExpand - Code in Scrolling Divs
檔案下載連結:
FI CodeExpand

重新整理一下大致上的步驟:

1.1 下載FI CodeExpand
1.2 將 *.gif (共4個)解至 templates/subSilver/images下
1.3 將 fi_divexpand.js 解至 templates/subSilver 下 (我比較喜歡把跟格式有關的東西都放在 templates 下)

2.1 打開 fi_divexpand.js
2.2 將function codeDivStart()的內容改為

代碼: 選擇全部

function codeDivStart() {
  var randomId = Math.floor(Math.random() * 2000); 
  var imgSrc = 'templates/subSilver/images/'; 
  document.write('<div class="codetitle" align="none"><img src="' + imgSrc + 'nav_expand.gif" width="14" height="10" title="View More of this Code" onclick="resizeLayer(' + randomId + ', 200)" onmouseover="this.style.cursor = \'pointer\'" /><img src="' + imgSrc + 'nav_expand_more.gif" width="14" height="10" title="View Even More of this Code" onclick="resizeLayer(' + randomId + ', 500)" onmouseover="this.style.cursor = \'pointer\'" /><img src="' + imgSrc + 'nav_contract.gif" width="14" height="10" title="View Less of this Code" onclick="resizeLayer(' + randomId + ', 50)" onmouseover="this.style.cursor = \'pointer\'" /><img src="' + imgSrc + 'nav_select_all.gif" width="14" height="10" title="Select All of this Code" onclick="selectAll(' + randomId + ')" onmouseover="this.style.cursor = \'pointer\'" /></div><div class="codediv" id="' + randomId + '">'); 
}

主要修改的地方在:
var imgSrc = 'templates/subSilver/images/';
還有document.write中把Code:拿掉(因為打算延用原本bbcode.tpl中的抬頭那段)

3.1 打開 overall_header.tpl
3.2 在適當處(例如@import前)插入

代碼: 選擇全部

/* Code blocks */ 
.codetitle{background: #cdd6de;border:1px solid #9ca9b4;padding:5px;width:100%;font-weight:bold; text-align:left; 
margin-top:0px} 
.codediv{background:#fafafa;border: 1px solid #9ca9b4;color:#006600;border-top:0; 
font:12px Courier,"Courier New",sans-serif;padding:5px;overflow:auto;width:100%;height:50px;text-align:leftword-wrap:break-word;}

主要與修改的地方為width:100%、margin-top:0px、以及leftword-wrap:break-word;

4.1 打開 bbcode.tpl
4.2 將  ...  置換為

代碼: 選擇全部

<!-- BEGIN code_open --><table width="90%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr> 
	  <td><span class="genmed"><b>{L_CODE}:</b></span></td>
	</tr>
	<tr>
	  <td class="code"><script type="text/javascript" src="template/subSliver/fi_divexpand.js"></script>
<script type="text/javascript">codeDivStart()</script>
<!-- END code_open -->
<!-- BEGIN code_close --></div></td>
	</tr>
</table>
<span class="postbody"><!-- END code_close -->

主要用意為保留部份原本的<table>框架供友善列印但又能與CodeExpand的js部份結合的不太突兀
其中 script src 的連結部份自己注意與你放檔案的位置相符

目前我的修改法與 printer_topic_1.0.7 是相容的
由於沒特別一步步留下記錄，有任何錯誤，還請各位指正