0
点赞
收藏
分享

微信扫一扫

easyui(基本布局)

邯唐情感 2022-05-05 阅读 61

http://www.jeasyui.net/(中文网)
http://www.jeasyui.com/(英文版)

EasyUI官方下载地址:http://www.jeasyui.com/download/index.php

常见UI:
    Layui,Bootstrap,element ui,ant design,iview

1.什么是easyui?
easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处?
1)easyui是个完美支持HTML5网页的完整框架
2)easyui节省网页开发的时间和规模
3)easyui很简单但功能强大

3.easyui如何使用?
    pageContext.request.contextPath

3.1 引入必要的js和css样式文件
1)引入JQuery(jquery.min.js)
2)引入EasyUI(jquery.easyui.min.js)
3)引入EasyUI的中文国际化js,让EasyUI支持中文(locale/easyui-lang-zh_CN.js)
4)引入EasyUI的样式文件(/themes/default/easyui.css)
5)引入EasyUI的图标样式文件(/themes/icon.css)

3.2 路径问题
  3.2.1 相对路径/绝对路径
  3.2.2 base标签

3.3 页面缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  

4.组件
分类:Base(基础)、Layout(布局)、Menu and Button(菜单和按钮)、Form(表单)、Window(窗口)、
DataGrid and Tree(表格和树)、Extension(扩展)
本章节主要讲述以下组件的使用:
1)layout(布局组件)
2)accordion(分类组件)
3)tree(树形组件)
4)tabs(选项卡组件)
5)datagrid和pagination(表格和分页组件)
6)dialog和messager(窗口组件)
7)form(表单组件)

思路解析:

 

 

 课堂案例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入页面 包含 -->
<%@ include file="commom/head.jsp"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

alert(ctx);
</script>

</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:85px;text-align:center;">
       <h1>书籍后台管理</h1>
    
    </div>   
    <div data-options="region:'south',split:true" style="height:68px;text-align:center;">
          <h4>&copy;沉山工作室版权所有,维权使用必究</h4>
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#fff;">
      
    </div>   
</body>  

</html>

公共页面有利于引入:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
  //获取绝对路径
   String path=request.getContextPath();
   //存域对象中
   request.setAttribute("ctx", path);//后期用${ctx}
   

%>
<script type="text/javascript">
 // var ctx='${ctx}';
 
</script>
<!-- 引入easyui的css -->
   <link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!-- 引入easyui的图标库 -->
   <link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<!-- 引入juuery的类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入easyui的类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入easyui的中文包 支持中文 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
    

代码界面展示

 

举报

相关推荐

0 条评论