使用Smooth Navigational Menu实现动态菜单

yiyu

浏览: 188861 次
性别:
来自: 北京

最近访客更多访客>>

彭彪321

webeasymail

dawei1980

akacd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

jQuery Ajax Struts 百度 CSS

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

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

查看图片附件

分享到：

关于ProcessBuilder执行dir命令报错 | jquery学习笔记（5） AJAX

2009-02-10 14:34
浏览 1416
评论(0)
论坛回复 / 浏览 (0 / 4768)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论