EasyUI入门

一、UI框架

 

easyui=jquery+tml4(用来做后台的管理界面)——2016版本,不要钱

bootstrap=jQuery+HTML5——2016-2018,要钱,api文档不全

layui——2018-2019,不要钱,有bug,文档不全

二、简介

why:快速开发

what:html4+jQuery的快速开发的前端框架

where:后端开发管理界面

常用控件:layout、tree、tabs、datagrid、form、messager、comboBox

三、我们为什么要学习easyUI 

效果来看easyUI的界面效果要远远差于bootstrap,跟layUI比界面效果也更差

从金钱的角度上,开发首先会排除掉bootstrap

从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyUI优于layUI

四、使用

在webcontent中新建一个新的folder文件名,取名为static,static中在新建三个folder文件,分别为css(主要放样式)、imager(放图片)、js(放样式)

 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> 

绝对路径改为相对路径

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

 然后把相对应的代码复制到body里面

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

 

 

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...