一、下载

  • 官网下载 ： 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. 组合数学---P1358 扑克牌

    P1358 扑克牌 题解 组合数学 Π c[剩余未选牌数][ai] ( i = 1,2,...,m ) 注意 组合数也要取模,不然数字太大会炸 组合数的具体实现就是Dp啊 代码 #include< ...

  2. excel怎么把一个sheet的 全部内容打印到一页纸上

    参考 https://jingyan.baidu.com/article/5225f26b04005ee6fa090830.html

  3. 强大全面的C++框架和库推荐！

    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...

  4. C# 将文本写入到文件

    将字符串数组写入到文件,每个元素为一行 string[] lines = { "First line", "Second line", "Third ...

  5. 手把手教你MyEclipseUML建模(上)

    手把手教你MyEclipseUML建模(上) 转 https://blog.csdn.net/qq_37939251/article/details/83444359 1.用UML 1建模 MyEcl ...

  6. sql日期比较

    sql 中 datetime日期类型字段比较 mysql 可以直接用大于号,也可以用  between  and SELECT * FROM staff WHERE UPDATE_DATE >= ...

  7. Sql Server 数字金额转中文金额 函数

    在做一些订单金额.合同金额转换的时候,经常会遇到数字转成中文的情况,所以整理了一个数字转中文的函数: /* 说明:数字金额转中文金额 示例:187.4 转成 壹佰捌拾柒圆肆角整 */ ,)) ) BE ...

  8. Docker - 在CentOS7中安装Docker

    在CentOS 7中安装Docker 1-确认系统信息 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) # uname - ...

  9. 如何去除PATH里的重复项并排序

    注意sed的用法,linux和Mac os不同,linux是Gnu的,Mac是BSD的 PATH排序去掉重复内容 mac和linux的换行符替换方法不一样,如下是Mac下的操作 export PATH ...

  10. 使用ASP.NET Core支持GraphQL( restful 配套)

    https://github.com/graphql-dotnet https://github.com/graphql GraphQL简介 官网:https://graphql.cn/code/ 下 ...