浏览 4752 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-10
在企业应用中一般需要根据登录用户的身份动态生成系统菜单，本文演示了使用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> 最后实现的菜单效果如下： 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
