在我的一个项目中,本人使用了一批可以收起并弹出的树菜单,这里拿出来和大家交流一下.
这里主要运用了Ul,li实现树菜单和JavaScript的动态修改节点风格的方法.
没有什么多说的了,直接列出代码吧,凡是我觉得比较重要的地方都给加重了一下.
<script language=javascript>
function expandShrinkCaseFromMe(){
// 用户点击的图片单元格
var elm=document.getElementById('expandShrinkCaseFromMeImg');
// 用户点击的图片
var images=elm.getElementsByTagName("IMG");
// 数据树
var datumTree=document.getElementById('expandShrinkCaseFromMeTree');
if(images[0].src.indexOf("allExpand")!=-1){
// 展开树
images[0].src='../images/allShrink.jpg';
datumTree.style.display="block";
}
else{
// 收起树
images[0].src='../images/allExpand.jpg';
datumTree.style.display="none";
}
}
//onmouseover="this.style.border='1'" onmouseout="this.style.border='0'"
</script>
<TABLE border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ccccd4">
<TR height=20>
<TD bgcolor="#ccccd4" align=left valign=center>
<TABLE border="0" width="100%" height=100% align=left valign=center>
<tr>
<td align=right><img width=1></td>
<td align=left><html:link page="/EnterProjectPageAction.do?Action=casefromme"><B>我提出的任务</B></html:link></td>
<%--点击的处理在此--%>
<td align=right id="expandShrinkCaseFromMeImg" width=16 align=center valign=center><IMG src="../images/allShrink.jpg" onclick="expandShrinkCaseFromMe()"></td>
</tr>
</TABLE>
</TD>
</TR>
<TR>
<TD bgcolor="#f2f3f7">
<%--菜单在此--%>
<ul class="tree" id="expandShrinkCaseFromMeTree" style="display:block">
<logic:iterate indexId="index" id="element" name="CaseFromMe">
<li>
<bean:define id="Id" name="element" property="id"/>
<IMG src="../images/arrow.gif">
<html:link page="/EnterHandleProjectAction.do?Action=enter" paramId="Id" paramName="Id">
<bean:write name="element" property="title"/>
</html:link>
</li>
</logic:iterate>
</ul>
</TD>
</TR>
</TABLE>
为帮助理解,贴上展开和收起的效果图:
展开效果图:
http://foto.yculblog.com/junglesong/expand.jpg
收起效果图:
http://foto.yculblog.com/junglesong/Shrink.jpg