惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！
1、导入jquery-easyui-1.3.3包( http://www.jeasyui.com/) 2、在页面导入easyui css js链接(demo/menu/basic.html)；修改为本机链接地址；导入本地化中文包 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> 3、easyui-layout <body class="easyui-layout"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'east',split:true" title="East" style="180px;"></div> <div data-options="region:'west',split:true" title="West" style="100px;"></div> <div data-options="region:'center',title:'Main Title'"> </body> class="easyui-layout" region（区域）split（分隔条）title（标题） north south 设置height east west 设置width 4、tabs <div class="easyui-tabs" style="700px;height:250px"> <div title="About" style="padding:10px"></div> <div title="My Documents" style="padding:10px"></div> <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div> </div> class="easyui-tabs" fit（铺满浏览器）border（边框） 5、tree <ul id="tree"></ul> $(function(){ var treeData=[{ text:"学生信息管理系统", children:[{ text:"班级信息管理", attributes:{ url:"" } },{ text:"学生信息管理", attibutes:{ url:"" } }] }]; //实例化树型 $("#tree").tree({ data:treeData, lines:true }) }); text：显示在节点的文本。 attributes：可以为节点添加的自定义属性。 children：子节点，必须用数组定义。 6、新增tab function openTab(text,url){ if($("#tabs").tabs('exists',text)){ $("#tabs").tabs('select',text); }else{ $("#tabs").tabs('add',{ title:text, closable:true, content:"2" }); } } $("#tree").tree({ data:treeData, lines:true, onClick:function(node){ if(node.attributes){ openTab(node.text,node.attributes.url); } } }) 7、添加页面并美化 url:"gradeInfoManage.jsp" url:"StudentInfoManage.jsp" var content="<iframe frameborder='0' scrolling='auto' style='100%;height:100%;' src="+url+"></iframe>"; 8、权限验证 登录成功获取Session // 获取Session HttpSession session=request.getSession(); session.setAttribute("currentUser", currentUser); 登录页面验证Session <% //权限验证 if(session .getAttribute("currentUser")==null){ System.out.println("滚"); response.sendRedirect("index.jsp"); return; } %>