javascript常用コード大全(スーパーコレクション、強く推奨)(2)

33274 ワード

モードダイアログを開き、モードダイアログの値を返します.全画面でIEウィンドウのスクリプトを開くには、xml一、認証クラス1、デジタル認証クラス2、時間種別3、フォームクラス4、文字クラス5、ブラウザクラス6、結合クラス6を使用します.
二、機能類1、時間と関連コントロール類2、フォーム類3、印刷類4、イベント類5、ウェブページデザイン類6、ツリー構造.7、フレーム効果のない製作8、フレーム技術9、テキスト並べ替え10、グラフ類、円盤、柱、ベクトルベズ曲線11を含み、クライアントのレジストリ類12、DIV層関連(ドラッグ、表示、非表示、移動、増加)13、TABLAE関連(クライアントダイナミック増設行列、アナログプログレスバー、スクロールリストなど)14、各種object classid=>関連カテゴリプレーヤーのように、flashとスクリプトのインタラクティブなど16、非同期コールクラス(XMLHttpまたはiframe、frame)を更新/シミュレーションしません.
ページに線、多角形、円、塗りつぶしなどの機能を自在に描くことができる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="[email protected]" > 
<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>