myfaces 中 Horizontal Panel Navigation 不能使用的解决办法

于 2007-09-06 10:36:48 发布 · 147 阅读

文章标签：

#IE #JSF #CSS #Apache #SVN

本文介绍了一种使用MyFaces实现HorizontalPanelNavigation的方法。通过调整JavaScript和CSS样式，成功解决了面板导航显示的问题。示例代码展示了如何设置导航条的各项属性。

java 代码

最近想用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>

<!--

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.onmouseover=function()

{

this.className+=" over";

}

node.onmouseout=function()

{

this.className=this.className.replace(" over", "");

}

window.onload=startList;

// -->

</script>

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:panelNavigation2>

</t:div>

</f:view>

</body></html>