使用Smooth Navigational Menu实现动态菜单

最新推荐文章于 2013-12-16 20:14:00 发布

chinabluedolphin

最新推荐文章于 2013-12-16 20:14:00 发布

阅读量3.3k

点赞数

分类专栏： web前端文章标签： menu action jquery插件 stylesheet ajax div

本文链接：https://blog.csdn.net/yiyuyiyu/article/details/3876102

版权

web前端专栏收录该内容

5 篇文章 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" mce_href="jquery/smoothmenu/ddsmoothmenu.css" /> <mce:script type="text/javascript" src="jquery/jquery-1.3.1.js" mce_src="jquery/jquery-1.3.1.js"></mce:script> <mce:script type="text/javascript" src="jquery/smoothmenu/ddsmoothmenu.js" mce_src="jquery/smoothmenu/ddsmoothmenu.js"></mce: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="#" mce_href="#">菜单1</a>"); sb.append(" <ul>"); sb.append(" <li><a href="http://www.google.con" mce_href="http://www.google.con">谷歌中国</a></li>"); sb.append(" <li><a href="http://www.baidu.com" mce_href="http://www.baidu.com">百度</a></li>"); sb.append(" </ul>"); sb.append("</li>"); sb.append("<li><a href="#" mce_href="#">菜单2</a>"); sb.append(" <ul>"); sb.append(" <li><a href="http://www.google.con" mce_href="http://www.google.con">谷歌中国</a></li>"); sb.append(" <li><a href="#" mce_href="#">菜单2.1</a>"); sb.append(" <ul>"); sb.append(" <li><a href="#" mce_href="#">菜单2.1.1</a></li>"); sb.append(" <li><a href="#" mce_href="#">菜单2.1.2</a></li>"); sb.append(" <li><a href="#" mce_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" mce_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>

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

chinabluedolphin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用Smooth Navigational Menu实现动态菜单

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

扫一扫

专栏目录