Jsp&Servlet入门级项目全程实录第2讲

惯例广告一发，对于初学真，真的很有用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="width:180px;"></div>
          <div data-options="region:'west',split:true" title="West" style="width: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="width: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='width: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;               
          }
     %>

 

posted @ 2013-06-24 13:25  cnmotive  阅读(345)  评论(0)  编辑  收藏  举报