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

1.jQuery EasyUI环境搭建

  1. <script type="text/javascript" src="../../easyui/jquery.min.js"></script>
  2. <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
  3. <link href="../../easyui/themes/default/easyui.css" type="text/css" rel="stylesheet">
  4. <link href="../../easyui/themes/icon.css" type="text/css" rel="stylesheet">

2.运行第一个jQuery EasyUI程序

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  9. <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">
  10. <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">
  11. </head>
  12. <body>
  13. <div class="easyui-panel" style="width:500px;height:200px;padding:10px;" iconCls="icon-save" title="我的面板" collapsible="true">
  14.     我的第一个easyui程序
  15. </div>
  16. </body>
  17. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  9. <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">
  10. <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">
  11. </head>
  12. <body>
  13. <div class="easyui-panel" style="width:500px;height:200px;padding:10px;" iconCls="icon-save" title="我的面板" collapsible="true">
  14.     我的第一个easyui程序
  15. </div>
  16. <p>
  17. <div class="easyui-panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true" title="我的面板">
  18.     我的第一个easyui程序
  19. </div>
  20. </body>
  21. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <!--
  7. 1.引入jquery.min.js
  8. 2.引入jquery.easyui.min.js
  9. 3.引入jqueryeasyui的css
  10. 4.引入国际化资源文件
  11.  
  12. EasyUI创建组件有两种方式
  13. 1.html方式创建（推荐使用data-options方式来添加组件属性, data-options方式是html5）
  14. 2.js方式创建, 属性的添加是一种json格式风格
  15.  -->
  16. <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  17. <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  18. <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
  19. <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
  20. <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  21. <script type="text/javascript">
  22.     $(function() {
  23.         $("#d01").panel({
  24.             width: 500,
  25.             height: 200,
  26.             iconCls: 'icon-save',
  27.             collapsible: true,
  28.             title: '我的面板'
  29.         });
  30.  
  31.     });
  32. </script>
  33. </head>
  34. <body>
  35. <div id="d01" style="padding:10px;">
  36.     我的第一个easyui程序
  37. </div>
  38. </body>
  39. </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. SOLO: 按位置分割对象

    SOLO: 按位置分割对象 SOLO: Segmenting Objectsby Locations 论文链接: https://arxiv.org/pdf/1912.04488.pdf 代码链接: ...

  2. 激光雷达Lidar Architecture and Lidar Design（上）

    激光雷达Lidar Architecture and Lidar Design(上) 介绍 激光雷达结构: 基本条件 构型和基本布置 激光雷达设计: 基本思想和基本原则 总结 介绍 激光雷达结构是激光 ...

  3. Anchor Boxes示例实战

    Anchor Boxes示例实战 目标检测算法通常对输入图像中的大量区域进行采样,判断这些区域是否包含感兴趣的目标,并调整这些区域的边缘,以便更准确地预测目标的真实边界框.不同的模型可能使用不同的区域 ...

  4. Python_Selenium 之PO模式的思想、优化思路

    一.PO模式思想 PO模式是一种自动化测试设计模式,将页面定位和业务操作分开,也就是把对象的定位和测试脚本分开,从而提供可维护性. PO设计模式基础(页面作为类.元素对象作为属性.元素操作作为方法) ...

  5. C++ QT安装教程2021

    第一步 去官网下载 https://download.qt.io/archive/qt/ 第二步 next 然后 我是注册的账号 注意密码的格式,要求至少7位,包含大小写字母和数字 第三步 点击下一步 ...

  6. Golang Heap 源码剖析

    堆原理解析 堆一般指二叉堆.是使用完全二叉树这种数据结构构建的一种实际应用.通过它的特性,分为最大堆和最小堆两种. 如上图可知,最小堆就是在这颗二叉树中,任何一个节点的值比其所在子树的任意一个节点都要 ...

  7. STM32学习笔记-NVIC中断知识点

    STM32学习笔记-NVIC中断知识点总结 中断优先级设置步骤 1. 系统运行后先设置中断优先级分组 函数:void NVIC_PriorityGroupConfig(uint32_tNVIC_Pri ...

  8. SpringCloud+Docker+Jenkins+GitLab+Maven实现自动化构建与部署实战

    1.前言与初衷 本文章会涉及Docker常见命令基础知识点结合不同场景实操一起使用. 本文章会涉及结合工作过程中部署不同环境服务器的项目案例场景为初心进行实际细讲. 本文章主要讲述Docker.Jen ...

  9. 安装ogg软件报错：[INS-75012]Sofware Location specified is already an existing Oracle

    1.安装ogg软件时报错: [INS-75012]Sofware Location specified is already an existing Oracle 2.根据报错,是说我们选择ogg软件 ...

  10. 如何把excel中的行转为列?

    步骤:选择复制要转行的内容--->新建一张表格---->右键选择性粘贴---->转置----->成功把行转为列(具体操作看下图) 选择复制这些内容