Easyui入门

最新推荐文章于 2024-06-13 06:30:00 发布

小依不秃头

最新推荐文章于 2024-06-13 06:30:00 发布

阅读量133

点赞数

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

本文链接：https://blog.csdn.net/qq_54936371/article/details/120225007

版权

EasyUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

知识总结

一、EasyUI框架的概述

UI框架介绍：

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

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

为什么学习？

从效果来看easyui的界面效果要远远差于bootstrap；
跟layui比，界面效果也更差；
从金钱的角度上，开发首先会排除掉bootstrap；
从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui；
从公司的角度考虑选用那个框架
成本、公司的后端技术人员前端功底、前端的社区活跃度（使用讨论区）；

特点：

easyui=jquery+html4

easyui是一种基于jQuery的用户界面插件集合
是HTML5网页的完整框架
界面简洁
有完整详细的api文档

easyui目录介绍：

*demo：easyui的各个组件使用示例
demo-mobile：easyui在移动终端上各个组件使用示例
locale：是国际化支持文件夹
src：是部分easyui插件的源码
plugins：是easyui使用的插件
themes：easyui基础自带的主题

常用组件：

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

二、下载

jQuery EasyUI的官网地址为：http://www.jeasyui.com/

三、开发步骤

1.在WebContext下建一个Static静态文件夹建立js，css，image文件加在js文件内放easyui相关依赖库

2.并导入EasyUI的CSS和Javascript文件到您的页面。

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

3.建立你需要的组件

四、layout的使用（布局）

在API中找到layouy（布局）

找到代码：

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

运行结果

拜拜~

小依不秃头

关注

0
点赞
踩
0

收藏

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

知识总结目录知识总结一、EasyUI框架的概述UI框架介绍：为什么学习？特点：easyui目录介绍：常用组件：二、下载三、开发步骤四、layout的使用（布局）一、EasyUI框架的概述UI框架介绍：easyui=jquery+html4（用来做后台的管理界面） 2016 不要钱；bootstrap=jquery+html5 2016-2018 要钱、api文档不全；layui 2018-2021 不...
复制链接

扫一扫