Student（2）——后台主界面搭建

最新推荐文章于 2022-02-13 12:51:34 发布

程序员的时光

最新推荐文章于 2022-02-13 12:51:34 发布

阅读量412

点赞数

分类专栏： ● Jsp和Servlet动态网页 ——【学生信息管理系统】文章标签：主界面搭建

本文链接：https://blog.csdn.net/qq_37084904/article/details/102077715

版权

● Jsp和Servlet动态网页同时被 2 个专栏收录

56 篇文章 5 订阅

订阅专栏

——【学生信息管理系统】

7 篇文章 0 订阅

订阅专栏

目录

1. 引入EasyUI核心文件；

2. main.jsp完整代码；

后台主界面采用的是EasyUI框架，首先要去官网下载对应的jar包；

http://www.jeasyui.net/download/jquery.html

下载完之后直接复制粘贴在项目里面去；

1. 引入EasyUI核心文件；

<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>

2. main.jsp完整代码；

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息管理系统</title>
    <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>
    <script type="text/javascript">
        $(function(){
          //数据
          var treeData=[{
              text:"根",
              children:[{
                  text:"班级信息管理",
                  attributes:{
                      url:""
                  }
              },{
                  text:"学生信息管理",
                  attributes:{
                      url:""
                  }
              }]
          }];

          //实例化菜单
            $("#tree").tree({
                data:treeData,
                lines:true
            });
        });
    </script>
</head>
<body class="easyui-layout">
    <div region="north" style="height: 80px; background-color:#E0EDFF ">
        <img src="images/main.jpg">
    </div>
    <div region="center">
        <div class="easyui-tabs" fit="true" border="false" id="tabs">
            <div title="首页">
                <div align="center" style="padding-top: 100px;"><font color="red"; size="10">欢迎使用！</font></div>
            </div>
        </div>
    </div>
    <div region="west" style="width: 150px" title="导航菜单" split="true">
        <ul id="tree"></ul>
    </div>
    <div region="south" style="height: 50px;" align="center">版权所有 2019 Colin</div>
</body>
</html>

效果：

程序员的时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Student（2）——后台主界面搭建

目录1. 引入EasyUI核心文件；2. main.jsp完整代码；后台主界面采用的是EasyUI框架，首先要去官网下载对应的jar包；http://www.jeasyui.net/download/jquery.html下载完之后直接复制粘贴在项目里面去；1. 引入EasyUI核心文件；<link rel="stylesheet" type="...
复制链接

扫一扫