`
yiyu
  • 浏览: 183361 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用Smooth Navigational Menu实现动态菜单

jQueryAjaxStruts百度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>


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

  • 大小: 8.9 KB
分享到：
| jquery学习笔记（5） AJAX
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics