最近想用myfaces网站上的Horizontal Panel Navigation ,结果copy它的例子都不能使用。google一番,发现如下解决方案。
来源:http://www.nabble.com/Horizontal-Panel-Navigation---panelNavigation2-tf2035583.html#a5600977
能够运行的代码如下
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://www.gluonvision.com/images/myfaces.ico">
<script type="text/javascript">
<!--
startList = function()
{
if (document.all && document.getElementById)
{
// *************************************************************************
// RM-comment: HERE IS THE CHANGE TO "hNav_outer" from
// http://svn.apache.org/viewvc/myfaces/tomahawk/trunk/core/src/main/resources/org/apache/myfaces/custom/navmenu/htmlnavmenu/resource/HMenuIEHover.js?revision=427657&view=markup
// *************************************************************************
navDivRoot = document.getElementById("myhNav_outer");
navRoot = navDivRoot.childNodes[0];
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.οnmοuseοver=function()
{
this.className+=" over";
}
node.οnmοuseοut=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.οnlοad=startList;
// -->
</script>
<style type="text/css">
body { font-family : arial, verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 14px; }
/*
RM-comment: this is the section from the original css/basic.css file, but:
"hNav_outer got replaced by "myhNav_outer", "on" by "on2", and "off" by "off2".
--------------------------------------------------------------
Horizontal Panelnavigation
--------------------------------------------------------------
*/
#myhNav_outer {
margin: 0;
padding: 0;
height: 60px;
width: 800px;
}
#myhNav_outer ul {
padding: 0;
margin: 0;
}
#myhNav_outer ul li ul {
margin: 0;
padding: 0;
}
#myhNav_outer ul a {
text-decoration: none;
}
#myhNav_outer ul li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding: 5px;
}
#myhNav_outer ul li ul {
display: none;
}
#myhNav_outer ul li.off2 ul, #myhNav_outer ul li.on2 ul { /*put the subnav below*/
position: absolute;
top: 36px;
*top: 44px;/*reposition for IE*/
background: #224d6f;
left: 13px;
*left: 15px;
width: 740px;
}
#myhNav_outer ul li.on2 ul {
display: block;
background: #f90;
}
#myhNav_outer ul li.on2:hover ul, #myhNav_outer ul li.over ul { /*for ie*/
background: #224d6f;
}
#myhNav_outer ul li a {
color: #224d6f;
font-weight: bold;
display: block;
padding: 5;
}
#myhNav_outer ul li.on2 a {
color: #fff;
background: #f90;
}
#myhNav_outer ul li.on2 ul a, #myhNav_outer ul li.off2 ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #f90;
width: auto;
}
#myhNav_outer ul li.on2:hover ul a, #myhNav_outer ul li.over ul li a { /*for ie - the specificity is necessary*/
background: #224d6f;
}
#myhNav_outer ul li.off2:hover ul, #myhNav_outer ul li.over ul {
display: block;
z-index: 6000;
}
#myhNav_outer ul li.off2 a:hover, #myhNav_outer ul li:hover a, #myhNav_outer ul li.over a {
background: #29497b;
color: #f90;
}
#myhNav_outer ul li.off2 a:hover, #myhNav_outer ul li.on2 a:hover {
color: #f90;
}
/*subnav formatting*/
#myhNav_outer ul li.off2 ul a {
display: block;
background: #224d6f;
color: #fff;
}
#myhNav_outer ul li.on2 ul a {
display: block;
background: #f90;
color: #fff;
}
</style>
</head>
<body>
<f:view>
<t:div id="myhNav_outer" forceId="true">
<t:panelNavigation2 id="mynav1" layout="list" itemClass="off2" activeItemClass="on2" openItemClass="on2"
renderAll="true">
<t:commandNavigation2>
<t:outputText value="Issues ..."/>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="MyFaces Documentation ..."/>
</t:commandNavigation2>
<t:commandNavigation2 externalLink="http://www.drupal.org" target="_blank">
<t:outputText value="what the PHP world can do ..."/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="missing examples ..."/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:view>
</body></html>