##公布一个目录树形代码[XML+XSLT+JAVASCRIPT],类似windows的帮助,各位大侠看看能否优化一下,小弟先抛砖了,各位有玉的尽管砸进来~~~

houjianxun 2003-06-24 01:46:38
前几天要做一个树形目录,要和windows的帮助一样,找了N多的资料,现在修改了很多,拿出来请各手再优化一下


感谢以下几位,曾在我写这个东东时给过帮助:
moonpiazza(月下小生)
saucer(思归, MS .NET MVP)
zlyperson(rookie)

//--------------------------------------------------------
// 以下是程序代码
//--------------------------------------------------------

Left.XML:
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/xsl" href="menu.xsl"?>
<root>
<menu id="1" value="系统设置" follow="0" />
<menu id="4" value="物品管理" follow="0" />
<menu id="5" value="主任查询" follow="0" />
<menu id="6" value="办公管理" follow="0" />
<menu id="9" value="员工、部门、权限设置" follow="1" />
<menu id="11" value="收费项目设置" follow="1" />
<menu id="12" value="物品供应商设置" follow="1" />
<menu id="13" value="票证格式设置" follow="1" />
<menu id="14" value="系统初始化" follow="1" />
<menu id="15" value="软件注册" follow="1" />
<menu id="17" value="正式购买" follow="2" />
<menu id="19" value="收费开票" follow="2" />
<menu id="23" value="报表打印" follow="2" />
<menu id="26" value="物品购进制单" follow="4" />
<menu id="27" value="库存物品报损" follow="4" />
<menu id="28" value="销售制单" follow="4" />
<menu id="29" value="物品限制设置" follow="4" />
<menu id="30" value="报表打印" follow="4" />
<menu id="31" value="报表打印" follow="15" />
<menu id="32" value="日程计划" follow="6" />
<menu id="33" value="短消息" follow="6" />
<menu id="34" value="通知" follow="6" />
<menu id="35" value="通讯录" follow="6" />
<menu id="36" value="报表分析" follow="6" />
<menu id="37" value="报表分析" follow="5" />
</root>
...全文
62 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
houjianxun 2003-06-26
  • 打赏
  • 举报
回复
感谢楼上各位的回答,小弟先结贴了
rightyeah 2003-06-25
  • 打赏
  • 举报
回复
function _treeExpend(tid,toExpend)
{
tid=''+tid;
var ob=this.searchObject(tid,'xml');
if(ob==null)return;
var hob=this.searchObject(tid,'html');
if (hob==null) return;
if((ob.getAttribute('expend').toLowerCase()=='true')!=toExpend)
{
ob.setAttribute('expend',''+toExpend);
var rows=hob.parentNode.rows;
var dsp=toExpend?'':'none';
for(var i=1;i<rows.length;i++) rows[i].style.display=dsp; //show/hide sub tree
/////////修改展开收缩标记
if(!this.getStatus(tid,'?isleaf')&&!this.getStatus(tid,'?isroot'))
hob.parentNode.parentNode.parentNode.parentNode.cells(0).all(0).src =this.imgPath+this.imgList[toExpend?1:0];
//owner.src=((dsp=="none")?(pThis.imgPath+pThis.imgList[0]): (pThis.imgPath+pThis.imgList[1]));
}
if(this.getStatus(tid,'?needload')&&this.getStatus(tid,'expend')=='true')
this.loadData(tid);

}
function _treeGetStatus(tid,str)
{
tid=''+tid;
var ob=this.searchObject(tid,'xml');
str=trim(str).toLowerCase();
if(str.substr(0,1)=='?')
switch(str.substr(1))
{
case 'isleaf':
var sub=ob.selectNodes("*"+this.hideStr);
var load=ob.selectSingleNode("@load");
if (load==null) load=''; else load=load.value;
load=(load.toLowerCase()=="true");
return !((sub.length>0)||load);
break;
case 'isroot':
return (ob==this.data.selectSingleNode('/*'));
break;
case 'needload':
var load=ob.selectSingleNode("@load");
if (load==null) load=''; else load=load.value;
return (load.toLowerCase()=="true");
break;
case 'depth':
var cnt=0;
for(;ob!=this.data.selectSingleNode('/*');++cnt)
ob=ob.selectSingleNode('..');
return cnt;
break;
}
else
{
var x=ob.selectSingleNode('@'+str);
if(x==null) return null;
return x.value;
}
}
function _treeSearchObject(tid,type)
{
tid=''+tid;
switch(type.toLowerCase())
{
case 'xml':
var i;
var s=0;
for(i=0;i<tid.length;i++)
s+=tid.charCodeAt(i);
i=s%this.searchBufSize;
if(!(this.searchBuf[i]!=null &&this.searchBuf[i][0]==tid))
{
this.searchBuf[i]=new Array(2);
this.searchBuf[i][0]=tid;
this.searchBuf[i][1]=this.data.selectSingleNode('//*[@id="'+tid+'"]');
}
return this.searchBuf[i][1];
break;
case 'html':
var ob=this.outer.all;
for(var i=0;i<ob.length;i++)
if (''+ob(i).t_id==tid)
return ob(i); //return a tr tag
return null;
break;
}
}
function ie_treeOnInvert(tid)
{
this.expend(tid,!(this.getStatus(tid,'expend')=='true'));
}
function _treeLoadData(tid)
{
tid=''+tid;
var str=this.onLoadSubTree(tid);

if(str==null)
{//loading data asynchronism
//this.expend(tid,true); //show string "loading... "
return;
}
this.expend(tid,false);
var dom=newObject('xmldom');
dom.loadXML('<root id="'+tid+'">'+str+'</root>');
if(dom.selectNodes('//*[@id="'+tid+'"]').length>1)
dom.loadXML(str); //传入的数据已经包含当前节点了
this.appendData(dom.xml);
}
function _treeAppendData(str)
{
var dom=newObject('xmldom');
dom.loadXML(str);
var tid=dom.selectSingleNode('/*/@id').value;
var ob=this.searchObject(tid,'xml'); //current node
var hob=this.searchObject(tid,'html'); //current html object
var isLeaf=this.getStatus(tid,'?isleaf'); //current leaf status
dom=dom.selectNodes('/*/*');
for(i=0;i<dom.length;i++)
if(this.searchObject(dom[i].id,'xml')==null)
ob.appendChild(dom[i]);
this.flushBuf();
ob.setAttribute('load','false');
hob=hob.parentNode.parentNode;
//alert(hob.nodeName);
if(!isLeaf&&this.getStatus(tid,'?isleaf')&&!this.getStatus(tid,'?isroot'))
{
var ob2=hob.parentNode.parentNode.cells(0);
var last=ob.selectNodes('../*'+this.hideStr);
last=(last[last.length-1].getAttribute('id')==tid);
ob2.innerHTML='<img border=0 src="'+(last?(this.imgPath+this.imgList[4]) :(this.imgPath+this.imgList[3]))+'">';

}
/* if(isLeaf && !this.getStatus(tid,'?isleaf')&&!this.getStatus(tid,'?isroot'))
{
var ob2=hob.parentNode.parentNode.cells(0);
var str=ob2.innerHTML;
ob2.innerHTML=str.replace('<IMG','<IMG onclick="'+this.name+'.onInvertI('+tid+')"') ;
}*/
hob.outerHTML=this.toTreeHTML(ob);
this.expend(tid,true);
}
function _treeDel(tid)
{
tid=''+tid;
var ob=this.searchObject(tid,'xml');
if(ob==null) return ;
var pob=ob.selectSingleNode('..');
pob.removeChild(ob);
this.flushBuf();
var id=pob.getAttribute('id');
this.expend(id,false);
var phob=this.searchObject(id,'html');
phob=phob.parentNode.parentNode;
phob.outerHTML=this.toTreeHTML(pob);
this.expend(id,true);
if(''+this.selectedFolder==tid) this.selectedFolder=null;
this.select(id);
if(this.getStatus(id,'?isleaf')&&!this.getStatus(id,'?isroot'))
{
var iob=this.searchObject(id,'html').parentNode.parentNode.parentNode.parentNode.cells(0);
var str='<img src="'+this.imgPath;
if(iob.background=="")
str+=this.imgList[4];
else
str+=this.imgList[3];
str+='" border=0>';
iob.innerHTML=str;
}
//alert(pob.getAttribute('name'));
}
function ie_treeOnClick(tid)
{
tid=''+tid;
event.cancelBubble=true;
if(!this.getStatus(tid,'?isleaf'))
{
this.onInvertI(tid);
}
this.select(tid);
}
function ie_treeOnContextMenu(tid)
{
event.returnValue=false;
//this.editItem(tid);
}
function _treeEditItem(tid)
{
this.select(tid);
this.setEdit(tid,true);
}
function _treeSetEdit(tid,isEdit)
{
var ob=this.searchObject(tid,'html');
if (ob==null) return;
ob=ob.cells(1).all(0);
if (isEdit)
{
ob.style.border='solid 1px';
ob.contentEditable=true;
}
else
{
if (ob.contentEditable+''=='true')
{
ob.contentEditable=false;
ob.style.border='none';
var xob=this.searchObject(tid,'xml');
var newText=ob.innerText;
xob.setAttribute('name',newText);
this.onChanged(tid,newText);
}
}
}
function _treeSelect(tid)
{
tid=''+tid;
var n_ob=this.searchObject(tid,'xml');
var n_hob=this.searchObject(tid,'html');
if(n_ob==null||n_hob==null) return;
var type,o_hob;
//change openned folder
if (this.selectedFolder!=null)
{
o_hob=this.searchObject(this.selectedFolder,'html');
type=parseInt(this.getStatus(this.selectedFolder,'type'));
o_hob.cells(0).all(0).src=this.imgPath+this.icoListNormal[type];
o_hob.cells(1).all(0).className=this.classListNormal[0]; //change <a> tag class
this.setEdit(this.selectedFolder,false);
}
this.selectedFolder=tid;
type=parseInt(n_ob.getAttribute('type'));
n_hob.cells(0).all(0).src=this.imgPath+this.icoListSelected[type];
n_hob.cells(1).all(0).className=this.classListSelected[0];
n_hob.cells(1).all(0).focus();
this.onClick(tid);
}
function _treeFlushBuf()
{
this.searchBuf=new Array(this.searchBufSize);
}
function _treeExpendAll(tid)
{
this.expend(tid,true);
if (!this.getStatus(tid,'?isleaf'))
{
var ob=this.searchObject(tid,'xml').selectNodes('*'+this.hideStr);
for(var i=0;i<ob.length;i++)
this.expendAll(ob[i].getAttribute('id'));
}
}
/**/
//////////////////use to create event handle, don't erase this
function oe_treeOnClick(id)
{}
function oe_treeOnLoadSubTree(id)
{return '';}
function _treeGetAnchorAttribute(ob)
{
return 'style="cursor:hand"';
}
function oe_treeOnChanged(id,newText)
{}
///////////no use
rightyeah 2003-06-25
  • 打赏
  • 举报
回复
function _treeLoad(file)
{
if(this.data==null)
this.data=newObject('xmldom');
return this.data.load(file);
}
function _treeLoadXML(str)
{
if(this.data == null)
this.data = newObject('xmldom');
return this.data.loadXML(str);
}
function _treeToHTML()
{
var ob;
var str='';
if(this.data.selectSingleNode('/*/@type')==null)
this.data.selectSingleNode('/*').setAttribute('type','0');
for(var i=0;i<this.hideTypes.length;i++)
str+=' and @type!="'+this.hideTypes[i]+'"';
if(str!='')
str='['+str.substr(5)+']';
this.hideStr=str;
str='';
ob=this.data.selectSingleNode("/*"+this.hideStr);
if (ob==null)
return;
// alert(ob.xml);
//str='<table border=0 width="300" cellpadding=0 cellspacing=0>\n'+'<tr><td>\n';
str+=this.toTreeHTML(ob);
//str+='</td></tr></table>';
return str;
}
function _treeToTreeHTML(ob)
{
var str='',i;
var sub=ob.selectNodes('*'+this.hideStr);
var id=ob.selectSingleNode('@id').value;
var name=ob.selectSingleNode("@name");
if (name==null) name=''; else name=name.value;
var url=ob.selectSingleNode("@url");
if (url==null) url=''; else url=url.value;
if (url=='') url='#';
var load=ob.selectSingleNode("@load");
if (load==null) load=''; else load=load.value;
load=(load.toLowerCase()=="true");
var type=ob.selectSingleNode("@type");
if (type==null) type=''; else type=type.value;
ob.setAttribute('expend','');//设置所有的节点为未展开

var folderImg=this.imgPath; //构造图片路径
folderImg+=this.icoListNormal[type];
str+=this.tableHead;
str+='<tr t_id="'+id+'" height="'+this.rowHeight+'"><td width="'+this.colWidth+'" valign=top>\n';
str+='<img border=0 src="'+folderImg+'"></td>\n';
str+='<td nowrap>\n';
str+='<a class="'+this.classListNormal[0];
str+='" onclick="'+this.name+'.onClickI(\''+ id+'\')"';
str+=' oncontextmenu="'+this.name+'.onContextMenuI(\''+ id+'\')"';
str+=' title="'+name+'"';
str+=' '+this.getAnchorAttribute(ob)+'>';
if (this.itemLength>0)
str+=name.substr(0,this.itemLength-this.getStatus(id,'?depth'));
else
str+=name;
str+='</a></td></tr>\n';
if (sub.length>0||load)
{
for(i=0;i<sub.length+(load?1:0);i++)
{
var last=(i+1==sub.length+(load?1:0));
str+='<tr height="'+this.rowHeight+'" style="display:none">\n';
str+='<td width="'+this.colWidth+'" valign=top'+(last?'':' background="'+this.imgPath+this.imgList[2]+'"')+'>\n';
if (i<sub.length) id=sub[i].selectSingleNode('@id').value;
if (i<sub.length&&!this.getStatus(id,'?isleaf'))
str+='<img onclick="'+this.name+'.onInvertI('+id+')" border=0 src="'+this.imgPath+this.imgList[0]+'">\n';
else
str+='<img border=0 src="'+(last?(this.imgPath+this.imgList[4]) :(this.imgPath+this.imgList[3]))+'">\n';
str+='</td><td>\n';
if(load&&last)
str+=this.tableHead+'<tr height=20><td nowrap=true>'+this.loadingString+'</td></tr></table>\n';
else
str+=this.toTreeHTML(sub[i]);
str+='</td></tr>\n';
}
}
str+='</table>\n';
return str;
}
rightyeah 2003-06-25
  • 打赏
  • 举报
回复
呵呵,同好啊!!我也有目录树的代码,用xml+javascript实现的,也想请各位指正
function trim(v)
{
if (v==null) return "";
if (typeof(v)=='object'&&(''+v=='null'||''+v=='undefined')) return '';
if (typeof(v)!="string") v=""+v;
return v.replace(/^\s+|\s+$/g,"");
}
//////////////////////////////////
//创建com对象,指定对象名name
//支持xmldom,xmlhttp
//////////////////////////////////
function newObject(name)
{
var xdoms=new Array("Msxml2.DOMDocument.4.0","Msxml2.DOMDocument","microsoft.xmldom");
var xhttps=new Array("Msxml2.xmlhttp","microsoft.xmlhttp");
var strs;
name=(''+name).toLowerCase();
switch(name)
{
case 'xmldom':
strs=xdoms;break;
case 'xmlhttp':
strs=xhttps;break;
default:
strs=new Array();break;
}
for(var i=0;i<strs.length;i++)
try
{
return new ActiveXObject(strs[i]);
}catch(x)
{}
throw(new Error(-1,"不能创建"+name+"对象"));
}
/************************************************************************************************
*名称: DHTML目录树
*版本: 1.1
*最后修改: 2002年10月8日, 10:40:00
*作者: 汤卫华
*使用环境: ie5.0以上
*功能简述: ie5.0环境下jscript类,接受一个xml文档,转换成为html文档。该html文档模仿了windows
*资源管理器的树结构,支持多种图标,可定制显示风格。除了常规的展开收缩功能外,额外提供了若干增强
*功能:1、支持分步加载,允许用户根据需要,分批提供数据;2、可定制的<a>标记,用户可以根据需要,
*自行定义该标记的参数;3、可隐藏项目,用户可以指定不显示的项目类型,从而实现同样的数据能产生
*不同的树结构;4、提供右键功能,用户可以自定义右键的功能(目前绑定了修改项目名称的功能);
*5、采用事件绑定机制,可以方便事件处理函数,也可以不予理会;6、限制树宽度的功能,能将超长的项目
*截断;7、项目改名,用户必须绑定onChanged事件响应改名的动作;
*用法: 1、创建一个对象 var ob=new tree('ob',container);
* 这里需要2个参数,'ob'就是对象自己的名字,container是一个html文档对象,作为树的容器
* 2、加载xml文档 ob.loadXML(str);
* 参数str为字符串,内有一个xml文档,也可以用ob.load(filename)从文件加载
* 3、显示树 container.innerHTML=ob.toHTML();
* 把转换后的html文档写入容器,由ie创建树结构
************************************************************************************************/
function tree(name,container)
{
////properties
this.name=name; //class name
this.outer=container; //容器对象的引用
this.data=null; //xml tree
this.selectedFolder=null; //id of the selected node
////const strings
//项目长度(字符数)
this.itemLength=0;
//图标大小设置
this.rowHeight='20px';
this.colWidth='15px';
//表头字符串
this.tableHead='<table width="100%" border=0 cellpadding=0 cellspacing=0 align=left>\n'; //
//the html script to show "Loading..."
this.loadingString='<font size=2 color=silver>Loading...</font>';
//类型表,下标0指定<a>的类型
this.classListNormal=new Array('tree');
this.classListSelected=new Array('treeselected');
//隐藏类型列表,凡是出现在列表中的类型都不显示
this.hideTypes=new Array();
//图片存放路径
this.imgPath='../images/folders/';
//项目图标,分为选中和未选中2种,用类型作为下标访问
this.icoListNormal=new Array('addr.gif','folder.gif','folder_sc.gif');
this.icoListSelected=new Array('openaddr.gif','openfolder.gif','openfolder_sc.gif');
//树结构图片,可更换
this.imgList=new Array('shownode.gif','hidenode.gif','dot.gif','line.gif','lineend.gif');
//查找缓冲,用于提高this.searchObject(tid,'xml')调用的效率
this.searchBufSize=97;
this.searchBuf=new Array(this.searchBufSize);
////methods
this.load=_treeLoad;
this.loadXML=_treeLoadXML;
this.toHTML=_treeToHTML;
this.toTreeHTML=_treeToTreeHTML;
this.getStatus=_treeGetStatus;
this.searchObject=_treeSearchObject;
this.del=_treeDel;
this.flushBuf=_treeFlushBuf;
this.expend=_treeExpend;
this.expendAll=_treeExpendAll;
this.select=_treeSelect;
this.loadData=_treeLoadData;
this.appendData=_treeAppendData;
this.setEdit=_treeSetEdit;
this.editItem=_treeEditItem;
//callback method
this.getAnchorAttribute=_treeGetAnchorAttribute;
////events
//inner events
this.onInvertI=ie_treeOnInvert;
//this.onLoadI=ie_treeOnLoad;
this.onClickI=ie_treeOnClick;
this.onContextMenuI=ie_treeOnContextMenu;
//outer events
this.onClick=oe_treeOnClick;
this.onLoadSubTree=oe_treeOnLoadSubTree;
this.onChanged=oe_treeOnChanged;
}
ssm1226 2003-06-25
  • 打赏
  • 举报
回复
用js,好点
houjianxun 2003-06-25
  • 打赏
  • 举报
回复
To:ssm1226
如果改成用javascript写的那么应该不会有那么多的局限性了吧?
blues-star 2003-06-25
  • 打赏
  • 举报
回复
其中不仅仅有这一个例子,这只是可以拖拽结点的版本。
blues-star 2003-06-25
  • 打赏
  • 举报
回复
讲解:http://www.15seconds.com/Issue/011129.htm

演示:http://www.15seconds.com/demo/011129/TreeView.html
liuzxit 2003-06-25
  • 打赏
  • 举报
回复
看了那麼多的樹狀,實在忍不住先公布一下自己的作品,http://www.nphtl.com.cn/aujs/
主頁還沒搞好,先提供給大家下載,樓主認為可以的話,可別少了我的分
allforly 2003-06-24
  • 打赏
  • 举报
回复
呵呵,不错,把我的xsl草案版的无限级菜单转换成了xslt版本的
我的意见就是通过onclick操作来判断是否有下一级菜单的方法不是挺好,最近有点忙,过阵子我会升级的
Kyle-soft 2003-06-24
  • 打赏
  • 举报
回复
应用xslt可以在服务器端转化,这样客户端就不需要解释转换了。
ssm1226 2003-06-24
  • 打赏
  • 举报
回复
To:ssm1226

是不是客户端也要安装msXML3.0和IE6才可以看?
---------------------------------------------
因为标准XSL只有MSXML3.0以上支持
cmsoft 2003-06-24
  • 打赏
  • 举报
回复
其实ms的.net的TreeView.htc不错,可以研究一下呀:)
houjianxun 2003-06-24
  • 打赏
  • 举报
回复
感谢楼上各位的支持!

To:cmsoft
CSDN的树,写的太乱了,我能力有限,看完要很长时间....:_(

To:ssm1226

是不是客户端也要安装msXML3.0和IE6才可以看?
希偌 2003-06-24
  • 打赏
  • 举报
回复
mark
ssm1226 2003-06-24
  • 打赏
  • 举报
回复
实用性目前来说不是很强(IE6.0以上或以替换模式安装MSXML3.0才支持),做为学习来说,不错,努力:)
laily 2003-06-24
  • 打赏
  • 举报
回复
晕,不如用这个来得方便:http://www.9499.net?go=tc
cmsoft 2003-06-24
  • 打赏
  • 举报
回复
不错呀,你可以参考CSDN的树:)
houjianxun 2003-06-24
  • 打赏
  • 举报
回复
<body>
<xsl:for-each select="//menu[@follow=0]">
<xsl:element name="div">
<xsl:attribute name="id">menu<xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="style">left:0;cursor:hand;</xsl:attribute>
<xsl:attribute name="onclick"><xsl:variable name="attr" select="@id"/><xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/><xsl:choose><xsl:when test="$nodeCount > 0">
showMenu('<xsl:value-of select="$attr"/>') ;
</xsl:when><xsl:otherwise>
javascript:;
</xsl:otherwise></xsl:choose></xsl:attribute>
<xsl:variable name="attr" select="@id"/>
<xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/>
<xsl:choose>
<xsl:when test="$nodeCount > 0">
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:2px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
+
</xsl:element>
</xsl:when>
<xsl:otherwise>
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:0px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
-
</xsl:element>
</xsl:otherwise>
</xsl:choose>
<xsl:element name="img">
<xsl:attribute name="style">position: relative;left:2;cursor:hand;</xsl:attribute>
<xsl:attribute name="src">image/folder_Close.gif</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
<xsl:value-of select="@value"/>
</xsl:element>
<xsl:for-each select="@id">

<xsl:variable name="id" select="."/>
<xsl:for-each select="../../menu[@follow=$id]">

<xsl:element name="div">
<xsl:attribute name="id">menuitem<xsl:value-of select="@follow"/></xsl:attribute>
<xsl:attribute name="style">display:none;left:expression(parseInt(document.getElementsByName('menu<xsl:value-of select="@follow"/>')[0].style.left)+20);</xsl:attribute>
<xsl:attribute name="onclick"><xsl:variable name="attr" select="@id"/><xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/><xsl:choose><xsl:when test="$nodeCount > 0">
showMenu('<xsl:value-of select="$attr"/>') ;
</xsl:when><xsl:otherwise>
javascript:;
</xsl:otherwise></xsl:choose></xsl:attribute>
<xsl:variable name="attr" select="@id"/>
<xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/>
<xsl:choose>
<xsl:when test="$nodeCount > 0">
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:2px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
+
</xsl:element>
</xsl:when>
<xsl:otherwise>
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:0px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
-
</xsl:element>
</xsl:otherwise>
</xsl:choose>
<xsl:element name="img">
<xsl:attribute name="style">position: relative;left:2;cursor:hand;</xsl:attribute>
<xsl:attribute name="src">image/folder_Close.gif</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
<xsl:value-of select="@value"/>
</xsl:element>
<xsl:apply-templates select="@id"/>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
</body>
</html>
</xsl:template>
<xsl:template match="@id">
<xsl:variable name="id" select="."/>
<xsl:for-each select="../../menu[@follow=$id]">
<xsl:element name="div">
<xsl:attribute name="id">menuitem<xsl:value-of select="@follow"/></xsl:attribute>
<xsl:attribute name="style">display:none;left:expression(parseInt(document.getElementsByName('menuitem<xsl:for-each select="@follow"><xsl:variable name="follow" select="."/><xsl:for-each select="../../menu[@id=$follow]"><xsl:value-of select="@follow"/></xsl:for-each></xsl:for-each>')[0].style.left)+20);</xsl:attribute>
<xsl:attribute name="onclick"><xsl:variable name="attr" select="@id"/><xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/><xsl:choose><xsl:when test="$nodeCount > 0">
showMenu('<xsl:value-of select="$attr"/>') ;
</xsl:when><xsl:otherwise>
javascript:;
</xsl:otherwise></xsl:choose></xsl:attribute>
<xsl:variable name="attr" select="@id"/>
<xsl:variable name="nodeCount" select="count(../menu[@follow = $attr])"/>
<xsl:choose>
<xsl:when test="$nodeCount > 0">
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:2px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
+
</xsl:element>
</xsl:when>
<xsl:otherwise>
<xsl:element name="span">
<xsl:attribute name="style">padding-left:1px;padding-top:0px;width:11px;height:11px;border:solid 1px black;background-color:#ffffff;line-height:6px;text-align : center;</xsl:attribute>
<xsl:attribute name="align">center</xsl:attribute>
-
</xsl:element>
</xsl:otherwise>
</xsl:choose>
<xsl:element name="img">
<xsl:attribute name="style">position: relative;left:2;cursor:hand;</xsl:attribute>
<xsl:attribute name="src">image/folder_Close.gif</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
<xsl:value-of select="@value"/>
</xsl:element>
<xsl:apply-templates select="@id"/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
houjianxun 2003-06-24
  • 打赏
  • 举报
回复
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>帮助</title>
<style>
div{width:200;position:relative;cursor:hand;FONT-SIZE: 9pt;}
</style>
<script language="javascript">
<xsl:comment><![CDATA[
function showMenu()
{
var menuitem = document.getElementsByName("menuitem" + arguments[0]);
for (var i=0;i<menuitem.length;i++)
{
menuitem[i].style.display = (menuitem[i].style.display=='')?'none':''
var oc = menuitem[i].getAttribute("onclick").toString()
var ev = oc.substring(oc.indexOf("{")+2,oc.indexOf("}")-1)
if (ev!='')
{
if (menuitem[i].style.display=='none')
{
hideMenu(ev.substring(ev.indexOf("(")+1,ev.indexOf(")")))
}
}
}
if(window.event.srcElement.tagName=="DIV")
{
if(menuitem[0].style.display=='')
{
window.event.srcElement.childNodes(1).src = "image/folder_Open.gif";
window.event.srcElement.childNodes(0).innerHTML = "-";
}
else
{
window.event.srcElement.childNodes(1).src = "image/folder_Close.gif";
window.event.srcElement.childNodes(0).innerHTML = "+";
}
}
else
{
if(menuitem[0].style.display=='')
{
window.event.srcElement.parentNode.childNodes(1).src = "image/folder_Open.gif";
window.event.srcElement.parentNode.childNodes(0).innerHTML = "-";
}
else
{
window.event.srcElement.parentNode.childNodes(1).src = "image/folder_Close.gif";
window.event.srcElement.parentNode.childNodes(0).innerHTML = "+";
}
}
}


function hideMenu()
{
var menuitem = document.getElementsByName("menuitem" + arguments[0].replace("'","").replace("'",""))
for (var i=0;i<menuitem.length;i++)
{
menuitem[i].style.display = 'none';
var oc = menuitem[i].getAttribute("onclick").toString();
var ev = oc.substring(oc.indexOf("{")+2,oc.indexOf("}")-1);
menuitem[i].childNodes(1).src = 'image/folder_Close.gif';
if (ev!='')
{
if (menuitem[i].style.display=='none')
{
hideMenu(ev.substring(ev.indexOf("(")+1,ev.indexOf(")")))
}
}
}
}
]]></xsl:comment>
</script>
</head>

8,906

社区成员

发帖
与我相关
我的任务
社区描述
XML/XSL相关问题讨论专区
社区管理员
  • XML/XSL社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧