sitemesh+jquery制作web项目统一导航条

目标

1. 可复用的导航条。统一的导航条页面，可以应用在项目中各个页面，后续如果需要变更，只需一处修改。
2. 导航条页面跳转与样式关联。点击导航栏可进行页面跳转，并选中对应的导航栏。

思路

1. 利用sitemesh的模板页面功能，sitemesh的基本使用参见sitemesh Demo
2. 在每个具体的业务页面内放置一个隐藏的input元素，帮助定位当前页对应选中的导航元素。

文件结构

    /decorators                     存储sitemesh的模板页面
        /mainframe.jsp              sitemesh模板，编写导航栏的页面

    /frames                         具体的业务页面
        /frame1.jsp                 页面1
        /frame2.jsp                 页面2
        /frame3.jsp                 页面3

    /resources                      资源目录
        /css                        样式文件目录
            /common.css             全局样式
        /images
            /logo.png               Logo图标
        /js
            /jquery-1.8.0.min.js    Jquery文件

    /WEB-INF
        /lib
            /sitemesh-2.4.2.jar     sitemesh的jar包
        /decorators.xml             配置sitemesh页面装饰规则
        /web.xml                    注册sitemesh的过滤器

界面截图

源码下载

源码下载：源码CSDN下载地址