javascript 常用代码大全（2）

       
                一个可以在页面上随意画线、多边形、圆，填充等功能的js  （part 2）

function mkOv2D(left, top, width, height)
{
var s = this.stroke;
width += s-1;
height += s-1;
var a = width>>1, b = height>>1,
wod = width&1, hod = (height&1)+1,
cx = left+a, cy = top+b,
x = 0, y = b,
aa = (a*a)<<1, bb = (b*b)<<1,
st = (aa>>1)*(1-(b<<1)) + bb,
tt = (bb>>1) - aa*((b<<1)-1);

if (s-4 < 0 && (!(s-2) || width-51 > 0 && height-51 > 0))
{
var ox = 0, oy = b,
w, h,
pxl, pxr, pxt, pxb, pxw;
while (y > 0)
{
if (st < 0)
{
st += bb*((x<<1)+3);
tt += (bb<<1)*(++x);
}
else if (tt < 0)
{
st += bb*((x<<1)+3) - (aa<<1)*(y-1);
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
w = x-ox;
h = oy-y;

if (w-1)
{
pxw = w+1+(s&1);
h = s;
}
else if (h-1)
{
pxw = s;
h += 1+(s&1);
}
else pxw = h = s;
this.mkOvQds(cx, cy, -x+1, ox-pxw+w+wod, -oy, -h+oy+hod, pxw, h);
ox = x;
oy = y;
}
else
{
tt -= aa*((y<<1)-3);
st -= (aa<<1)*(--y);
}
}
this.mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);
this.mkDiv(cx+a+wod-s+1, cy-oy, s, (oy<<1)+hod);
}

else
{
var _a = (width-((s-1)<<1))>>1,
_b = (height-((s-1)<<1))>>1,
_x = 0, _y = _b,
_aa = (_a*_a)<<1, _bb = (_b*_b)<<1,
_st = (_aa>>1)*(1-(_b<<1)) + _bb,
_tt = (_bb>>1) - _aa*((_b<<1)-1),

pxl = new Array(),
pxt = new Array(),
_pxb = new Array();
pxl[0] = 0;
pxt[0] = b;
_pxb[0] = _b-1;
while (y > 0)
{
if (st < 0)
{
st += bb*((x<<1)+3);
tt += (bb<<1)*(++x);
pxl[pxl.length] = x;
pxt[pxt.length] = y;
}
else if (tt < 0)
{
st += bb*((x<<1)+3) - (aa<<1)*(y-1);
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
pxl[pxl.length] = x;
pxt[pxt.length] = y;
}
else
{
tt -= aa*((y<<1)-3);
st -= (aa<<1)*(--y);
}

if (_y > 0)
{
if (_st < 0)
{
_st += _bb*((_x<<1)+3);
_tt += (_bb<<1)*(++_x);
_pxb[_pxb.length] = _y-1;
}
else if (_tt < 0)
{
_st += _bb*((_x<<1)+3) - (_aa<<1)*(_y-1);
_tt += (_bb<<1)*(++_x) - _aa*(((_y--)<<1)-3);
_pxb[_pxb.length] = _y-1;
}
else
{
_tt -= _aa*((_y<<1)-3);
_st -= (_aa<<1)*(--_y);
_pxb[_pxb.length-1]--;
}
}
}

var ox = 0, oy = b,
_oy = _pxb[0],
l = pxl.length,
w, h;
for (var i = 0; i < l; i++)
{
if (typeof _pxb[i] != "undefined")
{
if (_pxb[i] < _oy || pxt[i] < oy)
{
x = pxl[i];
this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, _oy+hod, x-ox, oy-_oy);
ox = x;
oy = pxt[i];
_oy = _pxb[i];
}
}
else
{
x = pxl[i];
this.mkDiv(cx-x+1, cy-oy, 1, (oy<<1)+hod);
this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
ox = x;
oy = pxt[i];
}
}
this.mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);
this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
}
}

function mkOvDott(left, top, width, height)
{
var a = width>>1, b = height>>1,
wod = width&1, hod = height&1,
cx = left+a, cy = top+b,
x = 0, y = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
st = (aa2>>1)*(1-(b<<1)) + bb,
tt = (bb>>1) - aa2*((b<<1)-1),
drw = true;
while (y > 0)
{
if (st < 0)
{
st += bb*((x<<1)+3);
tt += (bb<<1)*(++x);
}
else if (tt < 0)
{
st += bb*((x<<1)+3) - aa4*(y-1);
tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3);
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
if (drw) this.mkOvQds(cx, cy, -x, x+wod, -y, y+hod, 1, 1);
drw = !drw;
}
}

一个可以在页面上随意画线、多边形、圆，填充等功能的js  （part 3）

function mkRect(x, y, w, h)
{
var s = this.stroke;
this.mkDiv(x, y, w, s);
this.mkDiv(x+w, y, s, h);
this.mkDiv(x, y+h, w+s, s);
this.mkDiv(x, y+s, s, h-s);
}

function mkRectDott(x, y, w, h)
{
this.drawLine(x, y, x+w, y);
this.drawLine(x+w, y, x+w, y+h);
this.drawLine(x, y+h, x+w, y+h);
this.drawLine(x, y, x, y+h);
}

function jsgFont()
{
this.PLAIN = 'font-weight:normal;';
this.BOLD = 'font-weight:bold;';
this.ITALIC = 'font-style:italic;';
this.ITALIC_BOLD = this.ITALIC + this.BOLD;
this.BOLD_ITALIC = this.ITALIC_BOLD;
}
var Font = new jsgFont();

function jsgStroke()
{
this.DOTTED = -1;
}
var Stroke = new jsgStroke();

function jsGraphics(id, wnd)
{
this.setColor = new Function('arg', 'this.color = arg.toLowerCase();');

this.setStroke = function(x)
{
this.stroke = x;
if (!(x+1))
{
this.drawLine = mkLinDott;
this.mkOv = mkOvDott;
this.drawRect = mkRectDott;
}
else if (x-1 > 0)
{
this.drawLine = mkLin2D;
this.mkOv = mkOv2D;
this.drawRect = mkRect;
}
else
{
this.drawLine = mkLin;
this.mkOv = mkOv;
this.drawRect = mkRect;
}
};

this.setPrintable = function(arg)
{
this.printable = arg;
if (jg_fast)
{
this.mkDiv = mkDivIe;
this.htmRpc = arg? htmPrtRpc : htmRpc;
}
else this.mkDiv = jg_n4? mkLyr : arg? mkDivPrt : mkDiv;
};

this.setFont = function(fam, sz, sty)
{
this.ftFam = fam;
this.ftSz = sz;
this.ftSty = sty || Font.PLAIN;
};

this.drawPolyline = this.drawPolyLine = function(x, y, s)
{
for (var i=0 ; i<x.length-1 ; i++ )
this.drawLine(x[i], y[i], x[i+1], y[i+1]);
};

this.fillRect = function(x, y, w, h)
{
this.mkDiv(x, y, w, h);
};

this.drawPolygon = function(x, y)
{
this.drawPolyline(x, y);
this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);
};

this.drawEllipse = this.drawOval = function(x, y, w, h)
{
this.mkOv(x, y, w, h);
};

this.fillEllipse = this.fillOval = function(left, top, w, h)
{
var a = (w -= 1)>>1, b = (h -= 1)>>1,
wod = (w&1)+1, hod = (h&1)+1,
cx = left+a, cy = top+b,
x = 0, y = b,
ox = 0, oy = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
st = (aa2>>1)*(1-(b<<1)) + bb,
tt = (bb>>1) - aa2*((b<<1)-1),
pxl, dw, dh;
if (w+1) while (y > 0)
{
if (st < 0)
{
st += bb*((x<<1)+3);
tt += (bb<<1)*(++x);
}
else if (tt < 0)
{
st += bb*((x<<1)+3) - aa4*(y-1);
pxl = cx-x;
dw = (x<<1)+wod;
tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3);
dh = oy-y;
this.mkDiv(pxl, cy-oy, dw, dh);
this.mkDiv(pxl, cy+oy-dh+hod, dw, dh);
ox = x;
oy = y;
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
}
this.mkDiv(cx-a, cy-oy, w+1, (oy<<1)+hod);
};

this.fillPolygon = function(array_x, array_y)
{
var i;
var y;
var miny, maxy;
var x1, y1;
var x2, y2;
var ind1, ind2;
var ints;

var n = array_x.length;

if (!n) return;

miny = array_y[0];
maxy = array_y[0];
for (i = 1; i < n; i++)
{
if (array_y[i] < miny)
miny = array_y[i];

if (array_y[i] > maxy)
maxy = array_y[i];
}
for (y = miny; y <= maxy; y++)
{
var polyInts = new Array();
ints = 0;
for (i = 0; i < n; i++)
{
if (!i)
{
ind1 = n-1;
ind2 = 0;
}
else
{
ind1 = i-1;
ind2 = i;
}
y1 = array_y[ind1];
y2 = array_y[ind2];
if (y1 < y2)
{
x1 = array_x[ind1];
x2 = array_x[ind2];
}
else if (y1 > y2)
{
y2 = array_y[ind1];
y1 = array_y[ind2];
x2 = array_x[ind1];
x1 = array_x[ind2];
}
else continue;

if ((y >= y1) && (y < y2))
polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);

else if ((y == maxy) && (y > y1) && (y <= y2))
polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
}
polyInts.sort(integer_compare);

for (i = 0; i < ints; i+=2)
{
w = polyInts[i+1]-polyInts[i]
this.mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1);
}
}
};

this.drawString = function(txt, x, y)
{
this.htm += '<div style="position:absolute;white-space:nowrap;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
' this.ftFam + ';'+
'font-size:' + this.ftSz + ';'+
'color:' + this.color + ';' + this.ftSty + '">'+
txt +
'<"/div>';
}

this.drawImage = function(imgSrc, x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' +  w + ';'+
'height:' + h + ';">'+
'<img src="' + imgSrc + '" width="' + w + '" height="' + h + '">'+
'<"/div>';
}

this.clear = function()
{
this.htm = "";
if (this.cnv) this.cnv.innerHTML = this.defhtm;
};

this.mkOvQds = function(cx, cy, xl, xr, yt, yb, w, h)
{
this.mkDiv(xr+cx, yt+cy, w, h);
this.mkDiv(xr+cx, yb+cy, w, h);
this.mkDiv(xl+cx, yb+cy, w, h);
this.mkDiv(xl+cx, yt+cy, w, h);
};

this.setStroke(1);
this.setFont('verdana,geneva,helvetica,sans-serif', String.fromCharCode(0x31, 0x32, 0x70, 0x78), Font.PLAIN);
this.color = '#000000';
this.htm = '';
this.wnd = wnd || window;

if (!(jg_ie || jg_dom || jg_ihtm)) chkDHTM();
if (typeof id != 'string' || !id) this.paint = pntDoc;
else
{
this.cnv = document.all? (this.wnd.document.all[id] || null)
: document.getElementById? (this.wnd.document.getElementById(id) || null)
: null;
this.defhtm = (this.cnv && this.cnv.innerHTML)? this.cnv.innerHTML : '';
this.paint = jg_dom? pntCnvDom : jg_ie? pntCnvIe : jg_ihtm? pntCnvIhtm : pntCnv;
}

this.setPrintable(false);
}

function integer_compare(x,y)
{
return (x < y) ? -1 : ((x > y)*1);
}

 

   JS 中，一些东西不可用的三种展现方式。
我 们在WEB项目中，有时候需要在用户点击某个东西的时候，一些东西不可用。如果在客户端实现。最简单的就是利用disabled 。下面罗列的其中三种方式：依次是：不可用（disabled）；用一个空白来代替这个地方（Blank）；这个区域为空(None)。具体可以查看这个 Blog的源文件：
obj.disabled = false;

obj.style.visibility = "hidden";

obj.style.display = "none";

<SCRIPT language=javascript>
function ShowDisableObject(obj)
{
 if(obj.disabled == false)
 {
  obj.disabled = true;
 }
 else{
  obj.disabled = false;
 }
 var coll = obj.all.tags("INPUT");
 if (coll!=null)
 {
  for (var i=0; i<coll.length; i++)
  {
   coll[i].disabled = obj.disabled;
  }
 }
}

function ShowBlankObject(obj)
{
 if(obj.style.visibility == "hidden")
 {
  obj.style.visibility = "visible";
 }
 else
 {
  obj.style.visibility = "hidden";
 }
}

function ShowNoneObject(obj)
{
 if(obj.style.display == "none")
 {
  obj.style.display = "block";
 }
 else
 {
  obj.style.display = "none";
 }
}

</SCRIPT>

<P></P>
<DIV id=Show01>dadd
<DIV>ccc</DIV><INPUT> <INPUT type=checkbox> </DIV>
<P><INPUT onclick=ShowDisableObject(Show01); type=button value=Disable> <INPUT id=Button1 onclick=ShowBlankObject(Show01); type=button value=Blank name=Button1> <INPUT id=Button2 onclick=ShowNoneObject(Show01); type=button value=None name=Button2> </P><!--演示代码结束//-->

On this page I explain a simple DHTML example script that features invisibility, moving and the changing of text colour.

Example
Test TextMake test text invisible.
Make test text visible.
Move test text 50 pixels down.
Move test text 50 pixels up.
Change colour to red.
Change colour to blue.
Change colour to black.
Change the font style to italic.
Change the font style to normal.
Change the font family to 'Times'.
Change the font family to 'Arial'.

The script
The scripts work on this HTML element:

<DIV ID="text">Test Text</DIV>

#text {position: absolute;
top: 400px;
left: 400px;
font: 18px arial;
font-weight: 700;
}

These scripts are necessary for the three effects:

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name)
{
  if (document.getElementById)
  {
  this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
this.obj = document.all[name];
this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   this.obj = document.layers[name];
   this.style = document.layers[name];
  }
}

function invi(flag)
{
if (!DHTML) return;
var x = new getObj('text');
x.style.visibility = (flag) ? 'hidden' : 'visible'
}

var texttop = 400;

function move(amount)
{
if (!DHTML) return;
var x = new getObj('text');
texttop += amount;
x.style.top = texttop;
}

function changeCol(col)
{
if (!DHTML) return;
var x = new getObj('text');
x.style.color = col;
}

一段实现DataGrid的“编辑”、“取消”功能脚本，目的是不产生页面刷新
<SCRIPT language="javascript">
var selectRow="";
var selectObject;
function EditCell(thisObject,type)
{
var id = thisObject.id;
var buttonID="Button"+type;
var row=id.replace(buttonID,"");
if(type==1&&selectRow.length>0&&selectObject!=null)
{
EditRow(selectRow,2,selectObject);
selectRow="";
}
if(type==1){selectRow=row;selectObject=thisObject;}else{selectRow="";selectObject=null;}
EditRow(row,type,thisObject);
}

function EditRow(row,type,thisObject)
{
var visible1="none";
var visible2="inline";
if(type!=1)
{
visible1="inline";
visible2="none";
}
var buttonID="Button"+type;
var style;
var i;
for(i=1;i<8;i++)
{
var name1=row+"Img"+i;
document.all[name1].getAttribute("style").display=visible1;
name1=row+"Text"+i;
var name2=row+"Checkbox"+i;
document.all[name2].getAttribute("style").display=visible2;
if(type!=1)
{
if(document.all[name1].value==1)
document.all[name2].checked=true;
else
document.all[name2].checked=false;
}
}

var tdIndex = thisObject.parentElement.cellIndex;
if(type>1) tdIndex = tdIndex -1;
thisObject.parentElement.parentElement.cells[tdIndex].getAttribute("style").display=visible2;

thisObject.parentElement.colSpan=type;

var name;
name=row+buttonID;
document.all[name].getAttribute("style").display="none";

if(type==1)
{
document.all[name].parentElement.parentElement.getAttribute("style").backgroundColor="LightYellow";
name=row+"Button2";
document.all[name].getAttribute("style").display="inline";
}
else
{
document.all[name].parentElement.parentElement.getAttribute("style").backgroundColor="";
name=row+"Button1";
document.all[name].getAttribute("style").display="inline";
}
}

</SCRIPT>
<asp:datagrid id="GridItem" runat="server" cellPadding="0" BorderStyle="Solid" AutoGenerateColumns="False"
Width="100%" AllowPaging="True">
<SelectedItemStyle BackColor="LightYellow"></SelectedItemStyle>
<EditItemStyle CssClass="tdbg-dark" BackColor="Ivory"></EditItemStyle>
<ItemStyle HorizontalAlign="Center" Height="23px" CssClass="tdbg"></ItemStyle>
<HeaderStyle HorizontalAlign="Center" Height="25px" CssClass="summary-title"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="id" ReadOnly="True" HeaderText="人员编号">
<HeaderStyle Width="120px"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn ReadOnly="True" HeaderText="姓名">
<HeaderStyle Width="120px"></HeaderStyle>
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="管理权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img1" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox1" style="DISPLAY: none" type="checkbox" runat="server">
<INPUT id="Text1" type="text" runat="server" style="DISPLAY: none">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="查询权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img2" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox2" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox2">
<INPUT id="Text2" type="text" runat="server" style="DISPLAY: none" NAME="Text2">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="录入权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img3" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox3" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox3">
<INPUT id="Text3" type="text" runat="server" style="DISPLAY: none" NAME="Text3">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="修改权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img4" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox4" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox4">
<INPUT id="Text4" type="text" runat="server" style="DISPLAY: none" NAME="Text4">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="删除权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img5" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox5" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox5">
<INPUT id="Text5" type="text" runat="server" style="DISPLAY: none" NAME="Text5">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="导出权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img6" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox6" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox6">
<INPUT id="Text6" type="text" runat="server" style="DISPLAY: none" NAME="Text6">
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="导入权">
<HeaderStyle Width="60px"></HeaderStyle>
<ItemTemplate>
<IMG id="Img7" style="DISPLAY: inline" alt="" src=http://chinaitpower.com/A200507/2005-07-27/"Images/CheckBoxUnSelect.gif" runat="server"><INPUT id="Checkbox7" style="DISPLAY: none" type="checkbox" runat="server" NAME="Checkbox7">
<INPUT id="Text7" type="text" runat="server" style="DISPLAY: none" NAME="Text7">
</ItemTemplate>
</asp:TemplateColumn>
<asp:ButtonColumn Text="保存" HeaderText="操作" CommandName="cmdSave">
<ItemStyle Font-Size="10pt"></ItemStyle>
</asp:ButtonColumn>
<asp:TemplateColumn>
<ItemTemplate>
<INPUT id="Button1" style="cursor: hand; WIDTH: 35px; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
onclick="EditCell(this,1);" type="button" value="编辑" runat="server"><INPUT id="Button2" style="cursor: hand; DISPLAY: none; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
onclick="EditCell(this,2);" type="button" value="取消" runat="server">
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle NextPageText="下一页" PrevPageText="上一页"></PagerStyle>
</asp:datagrid>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>
<META NAME="Author" CONTENT="sTarsjz@hotmail.com" >
<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<base href="http://vip.5d.cn/star/dstree/" _fcksavedurl=""http://vip.5d.cn/star/dstree/"" _fcksavedurl=""http://vip.5d.cn/star/dstree/"" />
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement("span");
var upobj = document.createElement("span");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()?"hasItems":"Items";
innerHTML = "<img src=/Article/UploadPic/2005-11/20051115154649577.gif class=ec>" + thisn.getAttribute("text") +"";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute("cn")){
this.setAttribute("open",!this.getAttribute("open"));
this.cn.style.display = this.getAttribute("open")?"inline":"none";
this.all.tags("img")[0].src = this.getAttribute("open")?"/Article/UploadPic/2005-11/20051115154649577.gif":"/Article/UploadPic/2005-11/20051115154649577.gif";
}
if(IO){
IO.runtimeStyle.cssText = "";
IO.setAttribute("selected",false);
}
IO = this;
this.setAttribute("selected",true);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = "";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}

if(thisn.getAttribute("treeId") != null){
upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
}
if(thisn.getAttribute("href") != null){
upobj.setAttribute("href",thisn.getAttribute("href"));
}
if(thisn.getAttribute("target") != null){
upobj.setAttribute("target",thisn.getAttribute("target"));
}

nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML("beforeEnd","<br/>")

if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement("span");
upobj.setAttribute("cn",cn);
if(thisn.getAttribute("open") != null){
upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="/Article/UploadPic/2005-11/20051115154649577.gif";
}

for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags("img")[0].src ="/Article/UploadPic/2005-11/20051115154649577.gif";
}
return nodeObj;
}
window.onload = initTree;
</script>

<script>
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute("treeId");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version="1.0" encoding="GB2312"?>
<DSTreeRoot text="根节点" open="true" href="http://"; treeId="123">

<DSTree text="技术论坛" open="false" treeId="">
<DSTree text="5DMedia" open="false" href="http://"; target="box" treeId="12">
<DSTree text="网页编码" href="http://"; target="box" treeId="4353" />
<DSTree text="手绘" href="http://"; target="box" treeId="543543" />
<DSTree text="灌水" href="http://"; target="box" treeId="543543" />
</DSTree>
<DSTree text="BlueIdea" open="false" href="http://"; target="box" treeId="213">
<DSTree text="DreamWeaver &amp; JS" href="http://"; target="box" treeId="4353" />
<DSTree text="FlashActionScript" href="http://"; target="box" treeId="543543" />
</DSTree>
<DSTree text="CSDN" open="false" href="http://"; target="box" treeId="432">
<DSTree text="JS" href="http://"; target="box" treeId="4353" />
<DSTree text="XML" href="http://"; target="box" treeId="543543" />
</DSTree>
</DSTree>

<DSTree text="资源站点" open="false" treeId="">
<DSTree text="素材屋" href="http://"; target="box" treeId="12" />
<DSTree text="桌面城市" open="false" href="http://"; target="box" treeId="213">
<DSTree text="壁纸" href="http://"; target="box" treeId="4353" />
<DSTree text="字体" href="http://"; target="box" treeId="543543" />
</DSTree>
<DSTree text="MSDN" open="false" href="http://"; target="box" treeId="432">
<DSTree text="DHTML" href="http://"; target="box" treeId="4353" />
<DSTree text="HTC" href="http://"; target="box" treeId="543543" />
<DSTree text="XML" href="" target="box" treeId="2312" />
</DSTree>
</DSTree>

</DSTreeRoot>
</xml>
<table style="position:absolute;left:100;top:100;">
<tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
<tr><td style="font:10px verdana;color:#999999" align=right>by <font color=#660000>sTar</font><br/> 2003-4-8</td></tr>
</table>
</BODY>
</HTML>