在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. MSQL 数据完整性（约束）

    0. 前言 1. 实体完整性 1.1 主键约束(primary key) 1.2 唯一约束(unique) 1.3 自动增长列(auto_increment) 2. 域完整性 数据类型 非空约束 默认 ...

  2. curl 常用操作总结

    前言 curl 是一个强大的命令行工具,支持 HTTP, HTTPS, SCP 等多种协议,本文主要总结一下其常用的功能,方便及时查阅. curl --version curl 7.68.0 (x86 ...

  3. 【.NET 与树莓派】温度/湿度传感器——SHT30

    SHT3XX 系列的传感,常见的有三种:SHT 30.SHT 31.SHT 35.其中,比较便宜性价比较愉快的是 SHT 30. DHT 11 模块也是检测温度.湿度的,但SHT 11 使用的不是我们 ...

  4. 狂神说redis笔记（一）

    一.Nosql概述 1.单机Mysql时代 90年代,一个网站的访问量一般不会太大,单个数据库完全够用.随着用户增多,网站出现以下问题: 数据量增加到一定程度,单机数据库就放不下了 数据的索引(B+ ...

  5. 【Azure 环境】由为存储账号（Storage Account）拒绝分配权限而引出的Azure 蓝图（Blueprint）使用问题

    问题描述 当打开Azure存储账号(Storage Account)门户页面时,从 "访问控制(标识和访问管理)" 页面中发现有"拒绝分配"的功能,所以就思考, ...

  6. ES6深拷贝与浅拷贝

    今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据.而浅拷贝刚好相反.两个数据引用的是同一个堆内存地址, ...

  7. [Azure DevOps] 编译时自动修改版本号

    1. 需求 在使用 Pipeline 自动化 CI/CD 流程的过程中,我还还需要自动修改程序集的版本号.这个功能 EdiWang 和LeoLaw 都写文章讲解过做法.不过我的项目基本都是 .Net ...

  8. RPM安装MySQL5.7并更改数据目录

    RPM安装MySQL5.7并更改数据目录 文末附MySQL完整配置文件 官网地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 注意 ...

  9. ES6学习笔记之函数（二）

    5.作用域 使用默认参数时,参数会形成一个独立的作用域,此作用域与函数体中的作用域是平行关系,互不影响. var x = 1; function show(x, y= function () { x= ...

  10. Redis热点key优化

    热门新闻事件或商品通常会给系统带来巨大的流量,对存储这类信息的Redis来说却是一个巨大的挑战.以Redis Cluster为例,它会造成整体流量的不均知,个别节点出现OPS过大的情况,极端情况下热点 ...