easyui自学模板代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        
        <!--导入easyui资源文件-->
        <link rel="stylesheet" type="text/css" href="${ctx }/static/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="${ctx }/static/easyui/themes/icon.css">
        
        <script type="text/javascript" src="${ctx }/static/easyui/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="${ctx }/static/easyui/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="${ctx }/static/easyui/jquery.easyui.min.js"></script>
    </head>

    <body class="easyui-layout">
        <!--north导航部分start-->
        <div data-options="region:'north',border:false" class="easyui-layout" style="height:50px;background:#B3DFDA;padding:4px;">
            <div class="easyui-layout">
                <div style="float: left;"><h2 style="margin-top: 6px;padding-left: 10px;">EasyUI 后台管理</h2></div>
                <div style="float: right;" id="nav">
                    <ul style="list-style: none;">
                        <li style="float: left;">欢迎你,<strong>超级管理员</strong></li>
                        <li style="float: left;margin-left: 10px;">
                            <strong><a href="#" style="text-decoration: none;color:#436EEE;">退出</a></strong>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!--north导航部分end-->
        
        <!--west(西)侧边导航部分start-->
        <div data-options="region:'west',split:true,title:'主菜单'" style="width:150px;padding:2px;">
            <div class="easyui-accordion" data-options="fit:true,border:true">
                <div title="客户管理" data-options="iconCls:'icon-search',selected:false" style="padding:10px;">
                    <ul class="easyui-tree">
                        <li><a href="javascript:;" onclick="addTabByTitle(this)">客户列表</a></li>
                        <li><a href="javascript:;" onclick="addTabByTitle(this)">客户添加</a></li>
                    </ul>
                </div>
                <div title="系统设置" data-options="iconCls:'icon-ok'" style="padding:10px;">
                    <ul class="easyui-tree">
                        <li><a href="#">客户列表</a></li>
                        <li><a href="">客户列表</a></li>
                    </ul>
                </div>
                <div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px">
                    <ul class="easyui-tree">
                        <li><a href="">客户列表</a></li>
                    </ul>
                </div>
            </div>  
        </div><!--west(西)侧边导航部分end-->
        
        <!--south底部部分start-->
        <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">
            <div class="easyui-layout" style="text-align: center;line-height: 27px;">
                Copyright ©2019-2099 easyui.admin v3.1 All Rights Reserved.
                本后台系统由easyui提供前端技术支持
            </div>
        </div><!--south底部部分end-->
        
        <!--center主要部分start-->
        <div data-options="region:'center',title:'控制台'">
            <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true" style="">
                <div title="起始页" data-options="fit:true,plain:true,selected:true,border:true" style="padding:5px;"></div>
                <div title="客户列表" data-options="href:'${ctx }/customer/toCustList.action',closable:true" style="padding:10px;"></div>
            </div>
        </div><!--center主要部分end-->
    </body>

    <script type="text/javascript">
        
        function addTabByTitle(obj){
            var title = $(obj).html();
            alert(title);
            $('#tt').tabs('add',{
                title: title,
                content: '<div style="padding:10px"></div>',
                closable: true
            }); 
        }
    </script>
</html>
上一篇:abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理七(二十五)


下一篇:easyui页面一打开的时候出现短暂混乱的问题