EasyUI入门

最新推荐文章于 2023-07-28 14:36:07 发布

@十九.

最新推荐文章于 2023-07-28 14:36:07 发布

阅读量137

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/qq_59025975/article/details/120211371

版权

思维导图

1、ui框架：
easyui=jquery+html4（用来做后台的管理界面）   2016   不要钱；
bootstrap=jquery+html5   2016-2018   要钱、api文档不全；
layui   2018-2021   不要钱   有bug、文档不全。

2、为什么要学习easyui
   从效果来看easyui的界面效果要远远差于bootstrap；
   跟layui比，界面效果也更差；

   从金钱的角度上，开发首先会排除掉bootstrap；
   从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要；
   优于layui；

3、从公司的角度考虑选用那个框架
   成本、公司的后端技术人员前端功底、前端的社区活跃度（使用讨论区）；

4、常用控件

layout、tree、tabs、datagrid、form、messager、combobox.

EasyUI下载：Download EasyUI Package - jQuery,Angular,React,Vue

一、WebContext下建一个Static静态文件夹内放easyui相关依赖库

二、下载程序库并导入EasyUI的CSS和Javascript文件到页面

1、绝对路径

快捷键：Ctrl+Shift+R

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

2、相对路径

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

三、Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

1、使用完整页面创建布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'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;"></div>   
    <div data-options="region:'center',title:'内容区'" style="padding:5px;background:#eee;"></div>   
</body>

2、界面展示

今天到这里就结束了~~~

@十九.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI入门

思维导图1、ui框架： easyui=jquery+html4（用来做后台的管理界面） 2016 不要钱； bootstrap=jquery+html5 2016-2018 要钱、api文档不全； layui 2018-2021 不要钱有bug、文档不全。2、为什么要学习easyui 从效果来看easyui的界面效果要远远差于bootstrap；跟layui比，界面效果也更差；从金钱的角度上...
复制链接

扫一扫