一、下载

  • 官网下载 ： http://www.jeasyui.net/download/   同时并下载官方中文API文档。
  • 解压后的目录结构：

二、第一个demo

  • 　　1      新建工程并导入包

  • 2.       在页面中引入资源

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

  • 3.       编写html页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

</head>

<script type="text/javascript">

    jQuery(function() {

        $("#panel_2").panel({

            title : "第二个面板",

            collapsible : true,

            maximizable : true,

            minimizable : true,

            //事件

            onMaximize : function() {

                alert("执行最大化操作");

            }

        });

    });

    function changeTitle() {

        $("#panel_1").panel("setTitle", "修改后的标题");

    }

    function changeTitle2() {

        $("#panel_2").panel("setTitle", "修改后的标题");

    }

</script>

<body>

    <pre>

    1.    组件渲染的方法一：调用css的名称

    <div id="panel_1" class="easyui-panel" title="My Panel"

            style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"

            data-options="iconCls:'icon-save',closable:true,

                collapsible:true,minimizable:true,maximizable:true">

        <p>panel content1.</p>

        <p>panel content2.</p>

    </div>

    调用easyUI中的方法

    <input type="button" value="改变第一个面板的标题" onclick="changeTitle();">

    2.   组件渲染的方法二：javascript

    <div id="panel_2"

            style="width: 500px; height: 150px; padding: 10px; background: grey">

        <p>第二个面板</p>

        <p>this is no.2 panel</p>

    </div>

    调用easyUI中的方法

    <input type="button" value="改变第二个面板的标题" onclick="changeTitle2();">

</pre>

</body>

</html>

  • 　　结果

（一）easyUI之第一个demo的更多相关文章

  1. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  2. 初识nginx之第一个demo

    商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...

  3. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  4. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  5. 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）

    关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...

  6. 白盒测试之gtest第一个demo

    认识gtest工具后,关于它的使用,下面将用一个demo程序演示一下gtest的用法以及成果展示. 一.需要测试的C++代码: #include "myfunction.h" // ...

  7. 在VS中实现webService的一个demo（图解）

    在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...

  8. Cocos2d-x 学习（1）—— 通过Cocos Studio创建第一个Demo

    近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...

  9. 使用android的mediaplayer做成 一个demo,欢迎测试使用

    附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...

随机推荐

  1. Mininet系列实验（四）：基于Mininet测量路径的损耗率

    1 实验目的 熟悉Mininet自定义拓扑脚本的编写与损耗率的设定: 熟悉编写POX脚本,测量路径损耗速率 2 实验原理 在SDN环境中,控制器可以通过对交换机下发流表操作来控制交换机的转发行为,此外 ...

  2. Cesium获取经度 ，纬度，高度

    实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. Microsoft Visual C++ Runtime library not enough space for thread data

    Microsoft Visual C++ Runtime library not enough space for thread data     电脑最近一直在运行的时候,弹出提示框,如下: 解决办 ...

  4. 001-poi-excel-基础、单元格使用操作

    一.概述 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人员则可以利用NPOI (POI ...

  5. ORA-00911: invalid character 错误解决集锦

    转: ORA-00911: invalid character 错误解决集锦 参考https://www.linuxidc.com/Linux/2017-05/144361.htm ORA-00911 ...

  6. mouse without borders无界鼠标使用教程

    mouse without borders无界鼠标使用教程 摘自https://www.jianshu.com/p/6a0209ad03f8   老黑随笔 关注  0.4 2018.05.18 11: ...

  7. Qt编写控件属性设计器3-拉伸控件

    一.前言 插件控件加载了,拖曳控件也实现了,接下来就是一个最难点了,跟QtDesigner或者其他开发环境一样,能够任意自由的拉伸控件大小,移动位置,为了这个功能,还特别编写了一个控件来实现这个功能, ...

  8. [Paper翻译]Scalable Lock-Free Dynamic Memory Allocation

    原文: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.87.3870&rep=rep1&type=pdf Abstr ...

  9. java构造方法前加void有什么作用

    构造方法前面是没有任何返回符,不能加任何返回类型,包括void.一个构造方法一旦加了void,那么这个就不是构造方法了,变成了一个普通的方法.至于你程序出现的情况,是这样的.任何一个Java类,如果你 ...

  10. ES SQL使用说明文档

    ES SQL使用说明文档 一.Elasticsearch术语介绍 l  接近实时(NRT): Elasticsearch 是一个接近实时的搜索平台.这意味着,从索引一个文档直到这个文档能够被搜索到有一 ...