Struts2 与 struts-menu 集成

struts-menu 官方guide中似乎只提到跟struts的集成，与struts2集成有以下几个点：
1. 由于没有了struts-config.xml，需要在web.xml里添加如下监听器：

	<listener>
		<listener-class>net.sf.navigator.menu.MenuContextListener</listener-class>
	</listener>

2. 把struts-menu-*.jar 放到classpath上

3. 创建 menu-config.xml，放到web/WEB-INF，可以从例子程序中拷贝再修改。http://tinyurl.com/x5zt是所有属性的参考。

4.jsp中声明taglib： <%@ taglib uri="http://struts-menu.sf.net/tag" prefix="menu" %>

5、页面code例子：

   <menu:useMenuDisplayer name="TabbedMenu" 
     bundle="org.apache.struts.action.MESSAGE">
     <menu:displayMenu name="Home"/>
     <menu:displayMenu name="About"/>
   </menu:useMenuDisplayer>

6. 对于漂亮的css菜单CSSListMenu，需要添加如下代码到页面中：

 <script type="text/javascript">
    /*<![CDATA[*/
    function IEHoverPseudo() {

        var navItems = document.getElementById("primary-nav").getElementsByTagName("li");

        for (var i=0; i<navItems.length; i++) {
            if(navItems[i].className == "menubar") {
                navItems[i].onmouseover=function() { this.className += " over"; }
                navItems[i].onmouseout=function() { this.className = "menubar"; }
            }
        }

    }
    window.onload = IEHoverPseudo;
    /*]]>*/
    </script>

    <style type="text/css">

        body { font: normal 80% verdana; }

        ul#primary-nav,
        ul#primary-nav ul {
            margin: 0;
            padding: 0;
            width: 150px; /* Width of Menu Items */
            border-bottom: 1px solid #ccc;
            background: #fff; /* IE6 Bug */
            font-size: 100%;
        }

        ul#primary-nav li {
            position: relative;
            list-style: none;
        }

        ul#primary-nav li a {
            display: block;
            text-decoration: none;
            color: #777;
            padding: 5px;
            border: 1px solid #ccc;
            border-bottom: 0;
        }

        /* Fix IE. Hide from IE Mac \*/
        * html ul#primary-nav li { float: left; height: 1%; }
        * html ul#primary-nav li a { height: 1%; }
        /* End */

        ul#primary-nav ul {
            position: absolute;
            display: none;
            left: 149px; /* Set 1px less than menu width */
            top: 0;
        }

        ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

        ul#primary-nav li:hover ul ul,
        ul#primary-nav li:hover ul ul ul,
        ul#primary-nav li.over ul ul,
        ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

        ul#primary-nav li:hover ul,
        ul#primary-nav li li:hover ul,
        ul#primary-nav li li li:hover ul,
        ul#primary-nav li.over ul,
        ul#primary-nav li li.over ul,
        ul#primary-nav li li li.over ul { display: block; } /* The magic */

        ul#primary-nav li.menubar { background: transparent url(images/arrow.gif) right center no-repeat; }

        ul#primary-nav li:hover,
        ul#primary-nav li.over { background-color: #f9f9f9; }

        ul#primary-nav li a:hover { color: #E2144A; }

    </style>

其中，primary-nav 是展示菜单的div id

评论

1 楼 paulwong 2012-05-09  

如果菜单数据放数据库里，怎么和数据库集成？