Terry.Li-彬

虚其心，可解天下之问；专其心，可治天下之学；静其心，可悟天下之理；恒其心，可成天下之业。

BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合

:: 管理 ::

143 随笔 :: 344 文章 :: 130 评论 :: 0 Trackbacks

我的左栏树菜单ing...

下面写几个菜单用到的html代码，可以在程序中得到相应的树形菜单信息，然后用下面的部分代码做循环就可以实现树形菜单了

tree.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3

<html>
4

<head>
5

</head>
6

<body>
7

<center>
8

<%@include file="mode.jsp" %>
9

</center>
10

</body>
11

</html>
12

mode.jsp

1<%@ page language="java" pageEncoding="GBK"%>
2<table>
3    <tr>
4        <td>
5            <table>
6                <tr>
7                    <td>
8                        <span onclick="showType(type01);">模块01</span>
9                    </td>
10                </tr>
11                <tr id="type01" style="display: block;">
12                    <td>
13                        <%@include file="type.jsp"%>
14                    </td>
15                </tr>
16            </table>
17        </td>
18    </tr>
19    <tr>
20        <td>
21            <table>
22                <tr>
23                    <td>
24                        <span onclick="showType(type02);">模块02</span>
25                    </td>
26                </tr>
27                <tr id="type02" style="display: block;">
28                    <td>
29                        <%@include file="type.jsp"%>
30                    </td>
31                </tr>
32            </table>
33        </td>
34    </tr>
35    <tr>
36        <td>
37            <table>
38                <tr>
39                    <td>
40                        <span onclick="showType(type03);">模块03</span>
41                    </td>
42                </tr>
43                <tr id="type03" style="display: block;">
44                    <td>
45                        <%@include file="type.jsp"%>
46                    </td>
47                </tr>
48            </table>
49        </td>
50    </tr>
51    <tr>
52        <td>
53            <table>
54                <tr>
55                    <td>
56                        <span onclick="showType(type04);">模块04</span>
57                    </td>
58                </tr>
59                <tr id="type04" style="display: block;">
60                    <td>
61                        <%@include file="type.jsp"%>
62                    </td>
63                </tr>
64            </table>
65        </td>
66    </tr>
67    <tr>
68        <td>
69            <table>
70                <tr>
71                    <td>
72                        <span onclick="showType(type05);">模块05</span>
73                    </td>
74                </tr>
75                <tr id="type05" style="display: block;">
76                    <td>
77                        <%@include file="type.jsp"%>
78                    </td>
79                </tr>
80            </table>
81        </td>
82    </tr>
83    <tr>
84        <td>
85            <table>
86                <tr>
87                    <td>
88                        <span onclick="showType(type06);">模块06</span>
89                    </td>
90                </tr>
91                <tr id="type06" style="display: block;">
92                    <td>
93                        <%@include file="type.jsp"%>
94                    </td>
95                </tr>
96            </table>
97        </td>
98    </tr>
99</table>

type.jsp

1<%@ page language="java" pageEncoding="GBK"%>
2<table>
3    <tr>
4        <td>
5            <table>
6                <tr>
7                    <td>
8                        <span onclick="showPage(page01);">  类别01</span>
9                    </td>
10                </tr>
11                <tr id="page01" style="display: block;">
12                    <td>
13                        <%@include file="page.jsp" %>
14                    </td>
15                </tr>
16            </table>
17        </td>
18    </tr>
19    <tr>
20        <td>
21            <table>
22                <tr>
23                    <td>
24                        <span onclick="showPage(page02);">  类别02</span>
25                    </td>
26                </tr>
27                <tr id="page02" style="display: block;">
28                    <td>
29                        <%@include file="page.jsp" %>
30                    </td>
31                </tr>
32            </table>
33        </td>
34    </tr>
35    <tr>
36        <td>
37            <table>
38                <tr>
39                    <td>
40                        <span onclick="showPage(page03);">  类别03</span>
41                    </td>
42                </tr>
43                <tr id="page03" style="display: block;">
44                    <td>
45                        <%@include file="page.jsp" %>
46                    </td>
47                </tr>
48            </table>
49        </td>
50    </tr>
51    <tr>
52        <td>
53            <table>
54                <tr>
55                    <td>
56                        <span onclick="showPage(page04);">  类别04</span>
57                    </td>
58                </tr>
59                <tr id="page04" style="display: block;">
60                    <td>
61                        <%@include file="page.jsp" %>
62                    </td>
63                </tr>
64            </table>
65        </td>
66    </tr>
67    <tr>
68        <td>
69            <table>
70                <tr>
71                    <td>
72                        <span onclick="showPage(page05);">  类别05</span>
73                    </td>
74                </tr>
75                <tr id="page05" style="display: block;">
76                    <td>
77                        <%@include file="page.jsp" %>
78                    </td>
79                </tr>
80            </table>
81        </td>
82    </tr>
83    <tr>
84        <td>
85            <table>
86                <tr>
87                    <td>
88                        <span onclick="showPage(page06);">  类别06</span>
89                    </td>
90                </tr>
91                <tr id="page06" style="display: block;">
92                    <td>
93                        <%@include file="page.jsp" %>
94                    </td>
95                </tr>
96            </table>
97        </td>
98    </tr>
99</table>

page.jsp

1<%@ page language="java" pageEncoding="GBK"%>
2<table>
3    <tr>
4        <td>    页面01</td>
5    </tr>
6    <tr>
7        <td>    页面02</td>
8    </tr>
9    <tr>
10        <td>    页面03</td>
11    </tr>
12    <tr>
13        <td>    页面04</td>
14    </tr>
15    <tr>
16        <td>    页面05</td>
17    </tr>
18</table>

显示和隐藏的js

1<script type="text/javascript" language="javascript">
2            var old_mode = "";
3            function showMode(mode){
4                if(old_mode != mode){
5                    if(old_mode != ""){
6                        old_mode.style.display = "none";
7                        mode.style.display = "block";
8                    }else{
9                        mode.style.display = "block";
10                    }
11                    old_mode = mode;
12                }else{
13                    var mode_style = mode.style.display;
14                    if(mode_style == "none"){
15                        mode.style.display = "block";
16                    }else{
17                        mode.style.display = "none";
18                    }
19                    old_mode = mode;
20                }
21            }
22        </script>

其中mode.jsp和type.jsp很像，可以发挥想象做循环操作，实现多级菜单

模块01

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05

模块02

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05

模块03

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05

模块04

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05

模块05

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05

模块06

  类别01

    页面01

    页面02

    页面03

    页面04

    页面05

  类别02

    页面01

    页面02

    页面03

    页面04

    页面05

  类别03

    页面01

    页面02

    页面03

    页面04

    页面05

  类别04

    页面01

    页面02

    页面03

    页面04

    页面05

  类别05

    页面01

    页面02

    页面03

    页面04

    页面05

  类别06

    页面01

    页面02

    页面03

    页面04

    页面05