robertbao's website

版权声明：本文可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者署名及本版权声明。

上面说了Monkeygrease的基本用法，这里有一个示例，用于表示可变大小的文本域。

Javascript代码如下，保存为resizeabletextareas.js：

var resizeTa={loaded:null,TAlength:0,init:function(){
if(resizeTa.loaded){
return;
}else{
resizeTa.loaded=true;
var _1=document.getElementsByTagName("body")[0];
if(_1){
window.addEventListener("load",resizeTa.pageload,true);
}
}
},pageload:function(_2){
resizeTa.doc=_2.originalTarget;
resizeTa.TA=resizeTa.doc.getElementsByTagName("TEXTAREA");
resizeTa.TAlength=resizeTa.TA.length;
if(resizeTa.TAlength==0){
return;
}else{
resizeTa.rootElem=resizeTa.doc.getElementsByTagName("HTML")[0];
var i=resizeTa.TAlength;
while(i–){
resizeTa.newdiv("5","1","gripH_",i,"w");
resizeTa.newdiv("1","5","gripV_",i,"n");
resizeTa.newdiv("10","10","gripX_",i,"se");
}
resizeTa.newdiv("0","0","showCursor","","w");
CursorDiv=resizeTa.doc.getElementById("showCursor");
CursorDiv.removeEventListener("mousedown",resizeTa.activate,true);
CursorDiv.style.left="0px";
CursorDiv.style.top="0px";
resizeTa.posdivs();
window.addEventListener("resize",resizeTa.posdivs,true);
}
},newdiv:function(w,h,id,nr,cu){
var _9=resizeTa.doc.createElement("div");
_9.setAttribute("ID",id+nr);
_9.setAttribute("STYLE","position:absolute;width:"+w+"px;height:"+h+"px;cursor:"+cu+"-resize");
_9.addEventListener("mousedown",resizeTa.activate,true);
resizeTa.rootElem.appendChild(_9);
},getposition:function(i){
var _b=resizeTa.TA[i];
var _c=_b.offsetLeft;
while(_b.offsetParent){
_c+=_b.offsetParent.offsetLeft;
_b=_b.offsetParent;
}
_b=resizeTa.TA[i];
var _d=_b.offsetTop;
while(_b.offsetParent){
_d+=_b.offsetParent.offsetTop;
_b=_b.offsetParent;
}
return [_c,_d];
},posdivs:function(){
var k=resizeTa.TAlength;
while(k–){
curPos=resizeTa.getposition(k);
resizeTa.doc.getElementById("gripH_"+k).style.left=curPos[0]+resizeTa.TA[k].offsetWidth-3+"px";
resizeTa.doc.getElementById("gripH_"+k).style.top=curPos[1]+"px";
resizeTa.doc.getElementById("gripH_"+k).style.height=resizeTa.TA[k].offsetHeight-8+"px";
resizeTa.doc.getElementById("gripV_"+k).style.left=curPos[0]+"px";
resizeTa.doc.getElementById("gripV_"+k).style.top=curPos[1]+resizeTa.TA[k].offsetHeight-3+"px";
resizeTa.doc.getElementById("gripV_"+k).style.width=resizeTa.TA[k].offsetWidth-8+"px";
resizeTa.doc.getElementById("gripX_"+k).style.left=curPos[0]+resizeTa.TA[k].offsetWidth-8+"px";
resizeTa.doc.getElementById("gripX_"+k).style.top=curPos[1]+resizeTa.TA[k].offsetHeight-8+"px";
}
},activate:function(e){
resizeTa.doc=e.target.ownerDocument;
resizeTa.TA=resizeTa.doc.getElementsByTagName("TEXTAREA");
CursorDiv=resizeTa.doc.getElementById("showCursor");
resizeTa.TAlength=resizeTa.TA.length;
var _10=e.target.getAttribute("ID").split("_");
curTarget=_10[0];
curTA_Nr=parseInt(_10[1]);
resizeTa.doc.addEventListener("mouseup",resizeTa.deactivate,true);
switch(curTarget){
case "gripH":
resizeTa.doc.addEventListener("mousemove",resizeTa.resizeta_h,true);
break;
case "gripV":
resizeTa.doc.addEventListener("mousemove",resizeTa.resizeta_v,true);
break;
case "gripX":
resizeTa.doc.addEventListener("mousemove",resizeTa.resizeta_x,true);
break;
}
CursorDiv.style.width=resizeTa.rootElem.offsetWidth+"px";
CursorDiv.style.height=resizeTa.rootElem.offsetHeight+"px";
CursorDiv.style.cursor=e.target.style.cursor;
},deactivate:function(){
resizeTa.doc.removeEventListener("mouseup",resizeTa.deactivate,true);
switch(curTarget){
case "gripH":
resizeTa.doc.removeEventListener("mousemove",resizeTa.resizeta_h,true);
break;
case "gripV":
resizeTa.doc.removeEventListener("mousemove",resizeTa.resizeta_v,true);
break;
case "gripX":
resizeTa.doc.removeEventListener("mousemove",resizeTa.resizeta_x,true);
break;
}
CursorDiv.style.width="0px";
CursorDiv.style.height="0px";
resizeTa.posdivs();
},resizeta_h:function(e){
curPos=resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.width=e.pageX-curPos[0]+"px";
},resizeta_v:function(e){
curPos=resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.height=e.pageY-curPos[1]+"px";
},resizeta_x:function(e){
curPos=resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.width=e.pageX-curPos[0]+2+"px";
resizeTa.TA[curTA_Nr].style.height=e.pageY-curPos[1]+2+"px";
}};
window.addEventListener("load",resizeTa.init,false);

在monkeygrease.xml中加入如下规则：

<rule enabled="true" name="Resizeable Textarea" url-pattern="\/.*" insert-at="head-end">
    <![CDATA[
    <script type="text/javascript" src="/yourScriptPath/resizeabletextareas.js"></script>
    ]]>
</rule>

这句话<script type="text/javascript" src="/yourScriptPath/resizeabletextareas.js"></script>就自动加入到客户端获得的html代码的head区域的后部。

这段JS只在Firefox下有效，实际上这篇文章跟Monkeygrease相关性不大，主要就是展示这段代码。