在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. pytorch空间变换网络

    pytorch空间变换网络 本文将学习如何使用称为空间变换器网络的视觉注意机制来扩充网络.可以在DeepMind paper 阅读更多有关空间变换器网络的内容. 空间变换器网络是对任何空间变换的差异化 ...

  2. x86 cpu卷积网络的自动调谐

    x86 cpu卷积网络的自动调谐 这是一个关于如何为x86cpu调整卷积神经网络的文档. 本文不会在Windows或最新版本的macOS上运行.要让它运行,需要将主体包装在 if __name__ = ...

  3. Imec推出高性能芯片的低成本冷却解决方案

    Imec推出高性能芯片的低成本冷却解决方案 Imec unveils low-cost cooling solution for high-performance chips 3D打印冷却器优于传统解 ...

  4. JavaScript 中精度问题以及解决方案

    JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示.其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E ...

  5. postman 获取Json 返回值的某个键值并进行断言判定

    前提: 当前接口返回的结果值为json格式 1.将响应正文信息copy 到  https://www.bejson.com/ 便于查看 2.取值并进行断言编写 //json对象解析取值 var jd  ...

  6. javaBean命名规范 get / set 后的首字母大写

    javaBean命名规范 Sun 推荐的命名规范 1 ,类名要首字母大写,后面的单词首字母大写 2 ,方法名的第一个单词小写,后面的单词首字母大写 3 ,变量名的第一个单词小写,后面的单词首字母大写 ...

  7. GD32F330 | ADC实例 基于DMA方式

    GD32F330 | ADC实例 基于DMA方式 简单记录一下 ADC多通道转换 DMA搬运 的使用,以 GD32F330G8U6 为例: 一.ADC 基础知识 12位ADC是一种采用逐次逼近方式的模 ...

  8. 实验5、Flask设计模式和Web服务体验

    1. 实验内容 Flask appbuilder包括基本的表单验证,内置管理模块.本节主要学习Flask appbuilder的后台管理模块使用和对Flask设计模式拓展作简要介绍 2. 实验要点 掌 ...

  9. 【C++】Vector排序

    1.普通类型(由大到小排序) int main() { sort(v.begin(),v.end()); } 2.普通类型(由小到大排序) bool comp(const int &a,con ...

  10. Luat Inside | 多功能YAP物联网终端机，你不会还不知道吧？

    简洁高效是合宙产品的一个重要特点,合宙的工程师们用Demo取代繁杂的说明书,以便于开发者快速上手. 有没有可能把这个学习的过程变得更有趣,并且把技术入门难度进一步降低?作为一名Luat技术爱好者,我对 ...