EasyUI学习总结(一)——EasyUI入门
一、EasyUI下载
EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1
下载完成之后,得到压缩包,解压后,得到一个【jquery-easyui-1.4.1】文件夹,里面有如下图所示的文件:
二、EasyUI入门
2.1、引入必要的js和css样式文件
要想在页面中使用EasyUI,那么首先要做的就是在页面中引入必要js和css样式文件,以在jsp文件中使用EasyUI为例,文件引入的顺序如下所示
1 <!-- 引入JQuery -->2 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>3 <!-- 引入EasyUI -->4 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>5 <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->6 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>7 <!-- 引入EasyUI的样式文件-->8 <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>9 <!-- 引入EasyUI的图标样式文件-->
10 <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
在jsp文件中引用了这些文件之后,就可以使用EasyUI了。
2.2、EasyUI使用范例
新建一个JavaWeb工程,然后将jquery-easyui-1.4.1加入到工程中,将jquery-easyui-1.4.1文件夹中一些不必要的文件删掉,只保留必要的就可以了,如下图所示:
新创建一个01.jsp页面,在01.jsp页面中使用EasyUI,代码如下:
1 <%@ page language="java" pageEncoding="UTF-8"%>2 <!DOCTYPE HTML>3 <html>4 <head>5 <title>EasyUI入门——创建EasyUI的Dialog</title>6 <!-- 引入JQuery -->7 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>8 <!-- 引入EasyUI -->9 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
10 <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
11 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
12 <!-- 引入EasyUI的样式文件-->
13 <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
14 <!-- 引入EasyUI的图标样式文件-->
15 <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
16
17 <script type="text/javascript">
18 $(function(){
19 //console.info($('#dd2'));
20 /*使用JavaScript动态创建EasyUI的Dialog的步骤:
21 1、定义一个div,并给div指定一个id
22 2、使用Jquery选择器选中该div,然后调用dialog()方法就可以创建EasyUI的Dialog
23 */
24 $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
25 //使用自定义参数创建EasyUI的Dialog
26 $('#dd3').dialog({
27 title: '使用JavaScript创建的Dialog',
28 width: 400,
29 height: 200,
30 closed: false,
31 cache: false,
32 modal: true
33 });
34 });
35 </script>
36
37 </head>
38
39 <body>
40 <%--使用纯html的方式创建创建EasyUI的Dialog的步骤:
41 1、定义一个div
42 2、将div的class样式属性设置成easyui-dialog,这样就可以将普通的div变成EasyUI的Dialog了
43 --%>
44 <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
45 Hello World!
46 </div>
47 <div id="dd2">Dialog Content</div>
48 <div id="dd3">Dialog Content</div>
49 </body>
50 </html>
01.jsp运行结果如下:
以上就是关于EasyUI的简单入门
https://www.cnblogs.com/xdp-gacl/category/571424.html
EasyUI学习总结(一)——EasyUI入门相关推荐
- EasyUI学习总结(五)——EasyUI组件使用
EasyUI学习总结(五)--EasyUI组件使用 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程 ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- easyUI学习笔记二
1. 拖拉大小 <!DOCTYPE html> <html> <head><title>easyui学习</title><scrip ...
- 开发实战:基于深度学习+maven+SSM+EasyUI的高校共享汽车管理系统(一)
基于深度学习+maven+SSM+EasyUI的高校共享汽车管理系统 1.项目简介 在现在,共享汽车在中国各地方开始热起来,于是本人想做一个基于maven+SSM+EasyUI的高校共享汽车管理系统, ...
- EasyUI学习笔记5:来点甜点_ menu和theme插件
摘要 使用easyui-menu插件实现右键菜单关闭tab页,实现更改主题 easyui menu 目录[-] 一.引言 二.右键菜单关闭tab 1.绑定tabs的右键菜单 2. 处理菜单点击事件 三 ...
- Hadoop学习笔记(1) ——菜鸟入门
Hadoop学习笔记(1) --菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户能够在不了解分布式底层细节的情况下.开发分布式 ...
- Maven学习总结(一)——Maven入门
2019独角兽企业重金招聘Python工程师标准>>> Maven学习总结(一)--Maven入门 一.Maven的基本概念 Maven(翻译为"专家",&quo ...
- 五本必读的深度学习圣经书籍,入门 AI 从 深度学习 开始
原标题:`五本必读的深度学习圣经书籍,入门 AI 从「深度学习」开始` (以下以 Daniel Jeffries 第一人称撰写) 多年来,由于实验室研究和现实应用效果之间的鸿沟,少有人持续研究人工智能 ...
- PyTorch 深度学习: 60 分钟极速入门
PyTorch 深度学习: 60 分钟极速入门 2019年年初,ApacheCN组织志愿者翻译了PyTorch1.2版本中文文档(github地址),同时也获得了PyTorch官方授权,我相信已经有许 ...
最新文章
- 【JVM】肝了一周,吐血整理出这份超硬核的JVM笔记(升级版)!!
- @Service注解的使用
- Eclipse使用gradle编译时,使用固定的jdk版本进行编译(修改gradle的jdk编译版本)
- 低级键盘钩子,在WIN7以上版本的问题
- 【百家稷学】深度学习在计算摄影中的方法与应用(vivo技术分享)
- Linux shell脚本编程(一)
- CentOS安装rpm包时遇到Header V3 DSA signature: NOKEY时解决办法
- beego 使用github.com/astaxie/beego/session异常问题
- Elizabeth Taylor【伊丽莎白·泰勒】
- C# 关闭主窗口后让所有线程都停止工作
- 数据结构与算法:实验一线性表(字符串分类统计)
- 把excel每一行中的数据输出为一个txt文档的VBA函数
- css实现圆球旋像水波波动_66 个超有用的CSS 特效!
- ps导出切片批量改名
- 单片机多级菜单的简单实现
- Python Tkinter Text控件随输入自动拓展到尾行
- 域名解析协议-DNS
- 二元logistics回归
- 【AIGC使用教程】AutoGPT 安装使用完全教程
- (最新react-native-0.59.5) 如何将ReactNative项目集成到现有得Android项目中(两种实现方法之一)
热门文章
- HDU 1284 钱币兑换问题 (动态规划 背包方案数)
- 18.QT-QPlainEdit 信号与槽
- mac下用xattr命令来删除文件的扩展属性
- 渗透测试流程(单台服务器)
- linux Packet socket (1)简单介绍
- [转载]细说Java反射
- 动态规划几种状态剪裁比较
- POJ 2299 - Ultra-QuickSort BIT
- linux c 读取摄像头,Linux下onvif客户端获取ipc摄像头 获取能力:GetCapabilities
- c++ 圆上任意点坐标计算_线性代数总结 第三章 向量代数与几何计算(空间平面和直线)...