一、下载

  • 官网下载 ： 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. spring could 微服务 跨域问题（CORS ）

    问题发现 正常情况下,跨域是这样的:1. 微服务配置跨域+zuul不配置=有跨域问题2. 微服务配置+zuul配置=有跨域问题3. 微服务不配置+zuul不配置=有跨域问题4. 微服务不配置+zuul ...

  2. 【集成模型】Bootstrap Aggregating（Bagging）

    0 - 思想 如下图所示,Bagging(Bootstrap Aggregating)的基本思想是,从训练数据集中有返回的抽象m次形成m个子数据集(bootstrapping),对于每一个子数据集训练 ...

  3. OSError: image file is truncated (28 bytes not processed)

    解决办法: 在代码中添加两行 from PIL import ImageFile ImageFile.LOAD_TRUNCATED_IMAGES = True

  4. linux下将文件上传到svn服务器

    linux下将文件上传到svn服务器 摘自:https://blog.csdn.net/sky_yangge/article/details/41544773 2014年11月27日 16:47:57 ...

  5. REUSE_ALV_POPUP_TO_SELECT使用技巧

    可以实现弹出一个对话框,提供选择数据的功能…… 栗子1: CALL FUNCTION 'REUSE_ALV_POPUP_TO_SELECT' TYPE-POOLS slis. DATA: selec ...

  6. IntelliJ-svn配置与使用

    目录 IntelliJ-svn配置与使用 SVN的配置 版本控制主要操作按钮 版本控制相关的常用设置 Version Control窗口 @(目录) IntelliJ-svn配置与使用 SVN的配置 ...

  7. Linux下-bash: Permission denied 或者 sudo: command not found 错误

    有时候执行一个脚本或者运行一个可执行文件时,如执行脚本./foo.sh,会报错-bash: ./foo.sh: Permission denied,你会再试sudo ./foo.sh,发现继续报错su ...

  8. 浅析 c# Queue

    1.Queue定义 System.Collections.Queue类表示对象的先进先出集合,存储在 Queue(队列) 中的对象在一端插入,从另一端移除. 2.优点 1.能对集合进行顺序处理(先进先 ...

  9. 【Leetcode_easy】686. Repeated String Match

    problem 686. Repeated String Match solution1: 使用string类的find函数: class Solution { public: int repeate ...

  10. 【Leetcode_easy】671. Second Minimum Node In a Binary Tree

    problem 671. Second Minimum Node In a Binary Tree 参考 1. Leetcode_easy_671. Second Minimum Node In a ...