一、下载

  • 官网下载 : 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. coercing to Unicode: need string or buffer, geoprocessing value object found

    workbook.save(outxls),保存xls,出现上面的错误原因是:outxls不是错误 arcpy.AddMessage("--------"+outxls) cann ...

  2. 常用的xml头文件

    原文:https://www.cnblogs.com/uniquezhangqi/p/9199329.html#commentform xmlns,xmlns:xsi,xsi:schemaLocati ...

  3. Flutter移动电商实战 --(39)路由_Fluro的路由配置和静态化

    handler只是单个路由的配置,这节课我们要学习路由的整体配置 整体配置 新建routers.dart文件来做整体配置 detailsHandler就是我们在router_handler里面定义的d ...

  4. Java 13新特性

    switch表达式 switch表达式是Java 12开始就提供的预览特性,到了Java 13仍然没有被转正.此特性可以把switch的执行结果组合到复合表达式中进行运算. import java.t ...

  5. IFC数据模型构件控制

    控制ifc构件的隐藏与显示.着色 osg::ref_ptr<osg::Geode> geode1 = new osg::Geode(); osg::ref_ptr<osg::Stat ...

  6. CentOS7下搭建zabbix监控(四)——Zabbix报警设置

    CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 CentOS7下搭建zabbix监控(三)——Zabbix ...

  7. PAT 甲级 1040 Longest Symmetric String (25 分)(字符串最长对称字串,遍历)

    1040 Longest Symmetric String (25 分)   Given a string, you are supposed to output the length of the ...

  8. Linux hostname介绍

    以下操作均时基于 Centos 6.8 操作. 一.现象 在平时工作中,当需要修改主机名时,我们一般会这样操作: 第一步,通过 hostname 命令临时修改主机名. hostname kwang-t ...

  9. 最新 边锋网络java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.边锋网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了边锋网络.6.7月主要是做系统复习.项目复盘.Leet ...

  10. solr8.0创建core,报Can't find resource 'solrconfig.xml

    出现这个问题,主要是因为没有找到对应的配置文件, 只需要将solr_home\configsets\_default\conf下的配置文件,拷贝到自己新建的core文件夹下即可解决问题!