使用Smooth Navigational Menu实现动态菜单

最新推荐文章于 2024-10-12 13:30:38 发布

chinabluedolphin

最新推荐文章于 2024-10-12 13:30:38 发布

阅读量202

点赞数

分类专栏： javascript 文章标签： jQuery Ajax Struts 百度 CSS ViewUI

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在企业应用中一般需要根据登录用户的身份动态生成系统菜单，本文演示了使用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", //菜单的id
	customtheme: ["#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>

最后实现的菜单效果如下：
[img]/upload/attachment/74155/58c8c378-687c-348a-9aca-a56f7c984e93.jpg[/img]