easyui01（基本布局）

最新推荐文章于 2024-04-08 13:00:00 发布

x成.

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量90

点赞数 1

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/weixin_61001769/article/details/124572557

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概括

什么是easyUI？

jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面

为什么学？

①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面
②.easyui 是个完美支持 HTML5 网页的完整框架
③.easyui 能节省网页开发的时间和规模
④.easyui 很简单但功能很强大，容易上手

用在哪？

后台管理

二、准备工作

①.下载easyui
   http://www.jeasyui.com/
②.页面中引入库
引入JQuery（jquery.min.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></scrip>

   引入EasyUI（jquery.easyui.min.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

   引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>\

引入EasyUI的样式文件（/themes/default/easyui.css）

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>

   引入EasyUI的图标样式文件（/themes/icon.css）
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

三、使用

两种方式：

[API文档]
使用布局组件-Layout搭建后台框架

进行优化:
提取公共页面

四。举例（layout tree）

<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<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>  
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'学生管理',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',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> 
</html>

总结：通过学习easyui，让项目页面美化度提高。

x成.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui01（基本布局）

一、概括什么是easyUI？jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面为什么学？①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面②.easyui 是个完美支持 HTML5 网页的完整框架③.easyui 能节省网页开发的时间和规模④.easyui 很简单但功能很强大，容易上手用在哪？后台管理二、准备工作①.下载easyui http:...
复制链接

扫一扫