在EasyUI的第1讲中我们介绍了学习EasyUI能够做什么，这次我们得快速搭建一个EasyUI环境，来测试一下它的运行效果

1.jQuery EasyUI环境搭建

<script type="text/javascript" src="../../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>

<link href="../../easyui/themes/default/easyui.css" type="text/css" rel="stylesheet">

<link href="../../easyui/themes/icon.css" type="text/css" rel="stylesheet">

2.运行第一个jQuery EasyUI程序

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>

<link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">

<link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">

</head>

<body>

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" iconCls="icon-save" title="我的面板" collapsible="true">

    我的第一个easyui程序

</div>

</body>

</html>

3.兼容HTML5的属性，在设置easyui相关属性使用data-options，此用法在EasyUI 1.3版本以后开始使用的

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>

<link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">

<link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">

</head>

<body>

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" iconCls="icon-save" title="我的面板" collapsible="true">

    我的第一个easyui程序

</div>

<p>

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true" title="我的面板">

    我的第一个easyui程序

</div>

</body>

</html>

4.JS方式创建EasyUI组件，那么EasyUI中的属性都是基于json数据风格来编写

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!--

1.引入jquery.min.js

2.引入jquery.easyui.min.js

3.引入jqueryeasyui的css

4.引入国际化资源文件

EasyUI创建组件有两种方式

1.html方式创建（推荐使用data-options方式来添加组件属性, data-options方式是html5）

2.js方式创建, 属性的添加是一种json格式风格

 -->

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<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/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

    $(function() {

        $("#d01").panel({

            width: 500,

            height: 200,

            iconCls: 'icon-save',

            collapsible: true,

            title: '我的面板'

        });

    });

</script>

</head>

<body>

<div id="d01" style="padding:10px;">

    我的第一个easyui程序

</div>

</body>

</html>

整个程序运行效果如下，大家可以参照上面的代码来测试一下

[刘阳Java]_EasyUI环境搭建_第2讲的更多相关文章

  1. [刘阳Java]_Java环境搭建_第2讲

    1.为什么搭建Java的环境 Java的程序语言不能独立在操作系统上运行 Java程序需要一个JVM(Java虚拟机)才能将程序员写好的Java程序运行在操作系统 Java程序的跨平台(Mac, Li ...

  2. [刘阳Java]_JVM工作流程_第4讲

    程序员写好一段Java源程序-->编译-->字节码-->JVM-->硬件平台(操作系统)

  3. [刘阳Java]_Spring AOP入门_第7讲

    AOP技术个人认为是能够完善(改善)面向对象编程OOP.为什么这么说,我们得先从AOP的概念说起,然后通过一段简单的例子加以佐证.这样子大家就可以慢慢地了解AOP 1. AOP概念 AOP为Aspec ...

  4. [刘阳Java]_Spring IoC原理_第2讲

    Spring IoC(DI)是Spring框架的核心,所有对象的生命周期都是由它们来管理.对于弄懂Spring IOC是相当关键,往往我们第一次接触Spring IOC大家都是一头雾水.当然我们这篇文 ...

  5. [刘阳Java]_eayui-searchbox搜索组件_第6讲

    EasyUI中搜索框也是常用的基本组件,可以用到条件搜索中 <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. [刘阳Java]_eayui-pagination分页组件_第5讲

    分页组件也是很基本的应用,这里我只给出一段简单的代码 关键注意一点:分页组件可以在上面添加buttons按钮,或者自定义分页组件的外观.这些内容需要自行的查看EasyUI的API文档 <!DOC ...

  7. [刘阳Java]_easyui-draggable拖动组件_第4讲

    easyui-draggable的拖动组件还是比较好用的,它能够快速地实现网页中元素的拖动效果 实现easyui-draggable拖动组件有两种方式:纯HTML方式和JS方式 纯HTML方式实现拖动 ...

  8. [刘阳Java]_easyui-panel组件入门级_第3讲

    EasyUI中的panel组件在前面一节中我们简单告诉了大家代码如何写.这一节我们会从panel的入门级开始讲起走,重点包括它的事件监听,属性tool介绍 1. 事件监听-通过data-options ...

  9. [刘阳Java]_TortoiseSVN基础应用_第1讲

    TortoiseSVN是一个免费的SVN客户端,非常好用.这里我们介绍一下TortoiseSVN基础应用. 下面的内容是转载博客园的某兄弟写的,个人觉得很不错.所以尊重转载的这篇文章,必须要给出这篇博 ...

随机推荐

  1. 目标形体形状轮廓重建：ICCV2019论文解析

    目标形体形状轮廓重建:ICCV2019论文解析 Shape Reconstruction using Differentiable Projections and Deep Priors 论文链接: ...

  2. 英特尔Intel® Arria® 10 FPGA加速器设计

    英特尔Intel Arria 10 FPGA加速器设计 Introducing the Intel Vision Accelerator Design with Intel Arria 10 FPGA ...

  3. 单点突破：MySQL之日志

    前言 开发环境:MySQL5.7.31 日志是 mysql 数据库的重要组成部分,记录着数据库运行期间各种状态信息.若数据库发生故障,可通过不同日志记录恢复数据库的原来数据.因此实际上日志系统直接决定 ...

  4. 单点突破：MySQL之索引

    前言 开发环境:MySQL5.7.31 什么是索引 在MySQL中,索引(Index)是帮助高效获取数据的数据结构. 我们可以将数据库理解为一本书,数据库中的各个数据列(column)就是目录中的章节 ...

  5. 【Android编程实战】源码级免杀_Dex动态加载技术_Metasploit安卓载荷傀儡机代码复现

    /文章作者:MG193.7 CNBLOG博客ID:ALDYS4 QQ:3496925334/ 在读者阅读本文章前,建议先阅读笔者之前写的一篇对安卓载荷的分析文章 [逆向&编程实战]Metasp ...

  6. Nebula 基于 ElasticSearch 的全文搜索引擎的文本搜索

    本文首发于 Nebula Graph 公众号 NebulaGraphCommunity,Follow 看大厂图数据库技术实践. 1 背景 Nebula 2.0 中已经支持了基于外部全文搜索引擎的文本查 ...

  7. MySQL零散知识点（02）

    存储过程 存储过程包含了一系列可执行的sql语句,存储过程存放于MySQL中,通过调用它的名字可以执行其内部的一堆sql,类似于python中的自定义函数 基本使用 delimiter $$ crea ...

  8. 使用Flutter设计一个好看的"我"页面

    近期遇到一些很烦的琐事,状态比较down,很多原本计划好的事情都耽搁了,实在是难顶-- 看到后台一直有朋友问怎么博客和公众号没有更新,所以我忙完得闲就来更了! 前言 起因是最近重拾以前的旧项目(业余做 ...

  9. Java的一些细节语法（不定时更新。。。）

    可信考试Java相关题目 目录 可信考试Java相关题目 ConcurrentHashMap不允许key为null,但是HashMap是可以的.TreeMap key不支持null. 以下代码里面,请 ...

  10. Unity异步加载进度条

    先上代码: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngi ...