使用Smooth Navigational Menu实现动态菜单

yiyu · 发表于 2013-2-7 22:23:15

在企业应用中一般需要根据登录用户的身份动态生成系统菜单，本文演示了使用Smooth Navigational Menu插件，通过ajax技术，从后台获取数据动态生成菜单的方法。其中前台使用的Smooth Navigational Menu是一jquery插件，后台使用Struts的Action与其交互。

Smooth Navigational Menu的主页为：http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

将jquery和Smooth Navigational Menu引入项目很简单，只需将有关文件拷贝到 WebContent 目录下即可，本例中以如下结构引入：

/WebContent
/jquery                   jquery-1.3.1.js
      /smoothmenu    ddsmoothmenu.css, ddsmoothmenu.js, down.gif, right.gif

jsp文件中引入相关的css和js文件，并定义容纳菜单的<div>，代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery web app</title><link rel="stylesheet" type="text/css" href="jquery/smoothmenu/ddsmoothmenu.css" /><script type="text/javascript" src="jquery/jquery-1.3.1.js"></script><script type="text/javascript" src="jquery/smoothmenu/ddsmoothmenu.js"></script></head><body><div id="smoothcontainer"></div></body></html>

为了以ajax方式获取数据，需要修改ddsmoothmenu.js。修改的位置为文件末尾处的ddsmoothmenu.init( )处，代码如下：
ddsmoothmenu.init({mainmenuid: "smoothmenu-ajax", //菜单的idcustomtheme: ["#1c5a80", "#18374a"], //颜色定义contentsource: ["smoothcontainer", "GetMenuAction.action"] //容纳菜单的<div>的id，获取菜单数据的url})

其中mainmenuid是菜单数据中菜单<div>的id，这在后面的Action处可以看到，contentsource的第一项是jsp中容纳菜单的<div>的id，第二项是通过ajax获取菜单数据的url

另外，为了正确显示菜单中的箭头，需要修改ddsmoothmenu.js中down.gif和right.gif的路径。

示例的Action代码如下，其中的菜单数据可以想象为例如从数据库读取的。
package jqweb.actions;import java.io.ByteArrayInputStream;import java.io.InputStream;import com.opensymphony.xwork2.ActionSupport;public class MenuAction extends ActionSupport {private static final long serialVersionUID = -7891855010840306865L;private InputStream inputStream;public void setInputStream(InputStream inputStream) {this.inputStream = inputStream;}public InputStream getInputStream() {return inputStream;}public String execute() throws Exception {StringBuilder sb = new StringBuilder();sb.append("<div id='smoothmenu-ajax' class='ddsmoothmenu'>");sb.append("<ul>");sb.append("<li><a href='#'>菜单1</a>");sb.append("  <ul>");sb.append("  <li><a href='http://www.google.con'>谷歌中国</a></li>");sb.append("  <li><a href='http://www.baidu.com'>百度</a></li>");sb.append("  </ul>");sb.append("</li>");sb.append("<li><a href='#'>菜单2</a>");sb.append("  <ul>");sb.append("  <li><a href='http://www.google.con'>谷歌中国</a></li>");sb.append("  <li><a href='#'>菜单2.1</a>");sb.append(" <ul>");sb.append("    <li><a href='#'>菜单2.1.1</a></li>");sb.append("    <li><a href='#'>菜单2.1.2</a></li>");sb.append("    <li><a href='#'>菜单2.1.3</a></li>");sb.append(" </ul>");sb.append("  </li>");sb.append("  </ul>");sb.append("</li>");sb.append("</ul>");sb.append("<br style='clear: left' />");sb.append("</div>");inputStream = new ByteArrayInputStream(sb.toString().getBytes("utf-8"));return SUCCESS;}}

struts.xml中对这个action的定义与一般的action不同，定义如下：

<action name="GetMenuAction" class="jqweb.actions.MenuAction"><result type="stream"><param name="contentType">text/html</param><param name="inputName">inputStream</param></result></action>

最后实现的菜单效果如下：

		自动登录	找回密码
密码			立即注册

使用Smooth Navigational Menu实现动态菜单

浏览过的版块