EasyUI 01（EasyUI基本布局）

最新推荐文章于 2022-05-10 13:02:50 发布

xiongᥫᩣ

最新推荐文章于 2022-05-10 13:02:50 发布

阅读量816

点赞数 3

分类专栏： Java EasyUI 前端文章标签： easyui javascript 前端开发语言 eclipse

本文链接：https://blog.csdn.net/weixin_65474399/article/details/124680242

版权

Java 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

EasyUI

1 篇文章 0 订阅

订阅专栏

前言：

前几篇文章给大家简单介绍了一下bootstrap及它的基本使用，今天就来给大家介绍一个新的知识——EasyUI。

一，什么是EasyUI？

EasyUI是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的WEB[后台前端]JavaScript现成的组件库。

EasyUI为创建现代化，互动，JavaScript应用程序，提供必要的功能。

EasyUI的使用与bootstrap有点相似。

二，EasyUI地址

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

http://www.jeasyui.net/（中文网）
http://www.jeasyui.com/（英文版）

三，EasyUI的好处

easyui是个完美支持HTML5网页的完整框架
easyui节省网页开发的时间和规模
easyui很简单但功能强大

四，EasyUI的使用

1，引入必要的js和css样式文件

引入JQuery（jquery.min.js）
引入EasyUI（jquery.easyui.min.js）
引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
引入EasyUI的样式文件（/themes/default/easyui.css）
引入EasyUI的图标样式文件（/themes/icon.css）

2 ，路径问题

1. 相对路径/绝对路径
2 .base标签

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（扩展）

五，案例示范

利用EasyUI排出基本的操作界面：

1.导入jar包

2.导入EasyUI美化包文件

3.效果图

4.编写代码

index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="zh">
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'网站信息',collapsible:false" style="height:100px;"></div>
<div data-options="region:'south',title:'赞助链接',collapsible:false" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单',split:true" style="width:20%;">
    <ul id="sidebarTree"></ul>
</div>
<div data-options="region:'center',title:'主体部分'" style="padding:5px;background:#eee;"></div>
<script>
    $("#sidebarTree").tree({
        url: "${pageContext.request.contextPath}/sidebarTree.json",
        lines: true,
        onClick(node) {
            /**
             if (node.attributes["pid"]) {
                console.log("点击了子菜单")
            } else {
                console.log("点击了大菜单")
            }
             **/
            /**
             console.log(node)
             if (!node.children || node.children && node.children.length === 0) {
                console.log("点击了子菜单")
            } else {
                console.log("点击了大菜单")
            }
             **/
        }
    })
</script>
</body>
</html>