easyui

最新推荐文章于 2024-04-28 12:03:45 发布
原创 最新推荐文章于 2024-04-28 12:03:45 发布 · 103 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

layout: post
title: easyui
subtitle: 简单使用
date: 2018-06-20
author: ZL
header-img: img/20180620.jpg
catalog: true
tags:
- easyui
- 前端

导入

6262743-1e86105c2dc7e1a9.png
image

引用

<!--指向导入 easyui的目录位置-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

使用

五个区域

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>layout</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

</head>
<body class="easyui-layout">
    <!-- 使用div元素描述每个区域 -->
    <div title="XXX管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
    <div title="系统菜单" style="width: 200px" data-options="region:'west'">西部区域</div>
    <div data-options="region:'center'">中心区域</div>
    <div style="width: 100px" data-options="region:'east'">东部区域</div>
    <div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
</html>
6262743-33e8769495ddd490.png
image

折叠面板

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>accordion</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

</head>
<body class="easyui-layout">
    <!-- 使用div元素描述每个区域 -->
    <div title="XXX管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
    <div title="系统菜单" style="width: 200px" data-options="region:'west'">
        <!-- 制作accordion折叠面板 
            fit:true----自适应(填充父容器)
        -->
        <div class="easyui-accordion" data-options="fit:true">
            <!-- 使用子div表示每个面板 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>
    </div>
    <div data-options="region:'center'">中心区域</div>
    <div style="width: 100px" data-options="region:'east'">东部区域</div>
    <div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
</html>
6262743-5082c0c5504d933a.png
image

tabs选项卡

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>tabs</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

</head>
<body class="easyui-layout">
    <!-- 使用div元素描述每个区域 -->
    <div title="XXX管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
    <div title="系统菜单" style="width: 200px" data-options="region:'west'">
        <!-- 制作accordion折叠面板 
            fit:true----自适应(填充父容器)
        -->
        <div class="easyui-accordion" data-options="fit:true">
            <!-- 使用子div表示每个面板 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>
    </div>
    <div data-options="region:'center'">
        <!-- 制作一个tabs选项卡面板 -->
        <div class="easyui-tabs" data-options="fit:true">
            <!-- 使用子div表示每个面板 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div data-options="closable:true" title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>
    </div>
    <div style="width: 100px" data-options="region:'east'">东部区域</div>
    <div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
</html>
6262743-1b47b37cda8c410b.png
image
EasyUI总结
私信可回答各种问题~
03-21 1341
EasyUI总结
JSP中集成easyui前端ui框架
guoyp2126的博客
04-22 4436
前言 EasyUI是一款优秀的前段UI框架，我们无需花费太大的精力，使得我们的页面具有专业标准，使用起来也很简单。 EasyUI下载与配置 使用EasyUI，必须下载其js包，下载官网地址：https://www.jeasyui.cn/ ...
easyui中图片显示总结
killmanback的博客
04-09 8708
一、easyui-datagrid中单元格显示图片jsp中代码：&lt;table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do" toolbar="#toolbar" pagination="true" rownumbers="true&quo
easyui结合iframe的使用
qq_37069064的博客
05-29 2670
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title ...
【EasyUI】EasyUI学习笔记
热门推荐
寒泉
09-27 2万+
一.EasyUI 简介 1.EasyUI 是前端框架. 2.前端框架 2.1 封装大量css 2.2 封装大量JS 3.使用前端框架 3.1 给标签设置easyui提供的 class 属性即可，id属性可以随便起名。 4.easyui 中需要注意的地方 4.1 data-options 属性定义easyui 属性的. 4.2 如果easyui 提供的属性和html 标签属性相同,可以把这个属性 不...
easyUI简介、不足之处、学easyUI的好处以及它的特点
qq_47906421的博客
06-20 4367
easyUI入门前言一、easyUI的简介二、easyUI的不足之处三、学easyUI的好处四、easyUI的特点1.下载easyui版本2.打开软件创建动态web项目3.导入easyui的css文件和JavaScript文件4.引入相对应的js跟css5.主体代码6.结果 前言 今天分享的是叫easyUI的前端框架，下面我们来看看吧！ 一、easyUI的简介 easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。 二、easyUI的不足之处 现在据了解到有三种U
EasyUI学习
Yuncoco的博客
06-18 900
一、
Vue 集成easyUI
weixin_30387799的博客
06-19 617
原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320 参考vue官网用cli创建了Vue项目之后： npm install vx-easyui --save 安装 推荐使用 cnpm install vx-easyui --save 淘宝的cnpm ...
easyui了解
qq_64001795的博客
05-13 3578
目录 一、框架概述 1、什么是Easyui？ 2、EasyUI的常用组件 3、EasyUI的特点 缺点 使用： 4、EasyUI的目录说明 4.1下载路径 4.2 必须的基础支持库 4.3 目录说明 二、WEB项目搭建EasyUI环境 1.EasyUI入门示例 1.1标准开发步骤 1.2 代码模板 1.3 EasyUI的三大基础概念 1.3.1 属性设置 1.3.2 事件触发设置 1.3.3 方法调用设置 2.注意事项 5.关于组件之间的依赖关系 6.控件使...
EasyUI切换主题风格
缘如风的博客
11-17 1442
实现EasyUI切换主题。 参考文档如下： https://www.jeasyui.net/extension/209.html https://www.runoob.com/jeasyui/ext-themes.html 以上各主题下载地址：jquery easyui themes 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换主题&.
easyui,Bootstrap以及Layui的对比，EasyUi的入门
m0_46699799的博客
06-20 2236
easyuiui框架easyuiBootStrapLayUiesayui Layout布局示例结果总结 ui框架 ui框架主流有三种： easyui 由jQuery和html4组成，一般用来做后台的管理界面 特点/优势： easyui的学习资料比较饱和。（在他们官网里可看） 代码比较简洁 easyui简化了代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。 有强大的数据交互功能 比较稳定 组件比较丰富 easyui节省很多网页开发的时间和规模。 easyui很简单但功能强大的 免费 缺点是不
EasyUi入门
weixin_52639224的博客
09-09 615
一、ui框架 1.easyui=jquery+html4（用来做后台的管理界面） 2.bootstrap=jQuery+html5 3.layui 二、为什么选择使用easyui 从效果来看，easyui比不上bootstrap那样美观 与layui相比，界面效果也更差 在这种情况下，我们为什么要使用相对较差的easyui呢，首先，使用bootstrap要钱，easyui比layui更加稳定，所以使用easyui，如果你有钱，那当我没说 当然最终还是从公司的角度考虑用哪个框架 考虑方面：成
EasyUI
HYN205的博客
05-25 376
什么是EasyUI？ jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 EasyUI的使用 引入EasyUI的开发JS和CSS EasyUI的使用有两种方...
easyUI学习记录
John的专栏
09-27 1275
1.引入文件顺序 最基本的使用就是引入easyui.min.js文件，以及其对应的jquery.min.js文件。注意的是jquery-easyui是基于jquery的,因此jquery.min.js文件最好先于easyui.min.js先引入           2.改变panel的位置 step1：引入文件 step2：data-options的style step3：js
easyUI入门
java_dazhuzhu的博客
04-28 951
解压下面的压缩包。
easyui入门
weixin_67780833的博客
05-04 2468
​ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、easyui布局 先创建一个static文件，然后里面css、images、js文件。 把jquery-easyui-1.5.1文件复制到js文件中。 二、easyui使用步骤 1.新建一个页面引入下面四行代码至新建的页面 代码如下（示例）： ...
EasyUI-Panel Tools
dxm809的博客
03-20 946
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Sc...
EasyUI Demo
燃烧的梦
08-18 1195
EasyUI Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeas
easyui--easyui的快速入门
u011252234的专栏
12-31 2873
一前言：针对easyui快速入门，从以下几个方面说明：1.前端调试工具：firebug;2.应用easyui需要引入的文件；3.说明一下easyui API的一般用法；4错误调试。5.我是跟孙宇大哥学的，以后就叫宇神吧！水平有限（或者说没有水平也对-@ @-）；所以请见谅！ 二直接内容：1.我推荐大家用火狐或者谷歌，看自已喜欢了！添加firebug 我是添加过了，所以列表里面没有了
EasyUI 第一个demo
zhanyouwen的博客
06-08 2148
EasyUI 第一个demo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值