在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. GPU编程和流式多处理器（三）

    GPU编程和流式多处理器(三) 3. Floating-Point Support 快速的本机浮点硬件是GPU的存在理由,并且在许多方面,它们在浮点实现方面都等于或优于CPU.全速支持异常可以根据每条 ...

  2. Excel创建序列号1000个

    一.输入1,并且选择 二.开始-填充 三.选择序列 四.选择列-等差序列-步张值输入1 终止值输入1000 点击确定 五.查看结果,选中这一列 六.快捷键 Ctrl+下键 则跳转到最下方,上键则是最上 ...

  3. 10分钟用JS实现微信 "炸屎"大作战

    大家好,我是秋风,近日,微信又发布了新功能(更新到微信8.0.6).最火热的非"炸屎"功能莫属了,各种群里纷纷玩起了炸屎的功能. 不知道大家是否经历过那样一个时候,小时候(我是说很 ...

  4. Java swing JFrame用repaint出现闪烁的问题解决

    这几天用swing写登录页面背景动图的时候发现一直会有闪烁(我的类是继承JFrame),就来搜原因后发现好像是因为repaint会调用update()方法中的清屏操作导致闪烁. 我当时看的是这个文章 ...

  5. MySQL：count()用法

    语法 COUNT() 函数返回匹配指定条件的行数. COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入): SELECT CO ...

  6. 使用regulator_get时的一个小注意事项

    Linux kernel 使用 regulator 框架来管理电源,比如 PMIC 芯片上常见的LDO.使用 regulator 的常规流程如以下代码所示: void set_vbus_voltage ...

  7. jmeter+ant+jenkins框架搭建问题

    工具介绍:   jmeter 接口编写,调试,执行.   ant Ant是Java的生成工具,都是用来编译.生成:Ant的主要目的就是把你想做的事情自动化,不用你手动一步一步做,因为里面内置了java ...

  8. 【NX二次开发】Block UI 切换开关

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  9. NX二次开发-将3X3矩阵修正为正交且长度为单位长度的矩阵

    函数:UF_MTX3_ortho_normalize() 函数说明:将矩阵修正为正交且xyz长度为单位长度的矩阵.下图中输入的矩阵为三条线段的端点,经过修正后,生成一个坐标系. 1 #include ...

  10. 【VBA】日期时间

    当前日期: Sub 测试() Debug.Print Date End Sub 当前时间: Sub 测试() Debug.Print Date End Sub 几月: Sub 测试() Debug.P ...