easyui-01

最新推荐文章于 2024-07-11 23:07:02 发布

_清风明月.

最新推荐文章于 2024-07-11 23:07:02 发布

阅读量488

点赞数

文章标签： easyui javascript jquery

本文链接：https://blog.csdn.net/m0_61229046/article/details/124572956

版权

一、easyui简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

二、搭建框架

1、创建一个Dynamic Web Project

2、导入EasyUI必要的css样式和js文件

3.在jsp页面导入相关的js文件与css样式

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

三、layout布局

代码：

<body class="easyui-layout">   
    <div data-options="region:'north',title:'学生管理',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权/T277',split:true" style="height:100px;"></div>   
    <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  -->  
    <div data-options="region:'west',title:'操作列表',split:true" style="width:100px;">
    	<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>  
    </div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body>

页面展示效果

_清风明月.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui-01

一、easyui简介easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。二、搭建框架1、创建一个Dynamic Web Project2、导入
复制链接

扫一扫