一、下载

  • 官网下载 ： 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. bootargs中的rootwait 与rootdelay有什么区别?

    答: rootwait是无限期等待,而rootdelay可以指定等待的时间,更加灵活.

  2. VSCode 设置 Tab 空格

    Windows 点击左下角的 Setting 按钮 输入 tabSize 进行查找

  3. PorterDuffXfermode之PorterDuff.Mode.DST_IN

    package com.loaderman.customviewdemo.view; import android.animation.ValueAnimator; import android.co ...

  4. 不同操作系统上DNS客户端操作区别汇总

    结论:windows有DNS缓存,Linux默认无DNS缓存,只能依赖于安装其他软件. 一.不同操作系统的客户端的DNS缓存差别 1.windows 系统中dns 解析器会使用系统的dns缓存来提高d ...

  5. VBA基础出发

    一.什么是VBA,学习的原因是什么. Visual Basic for Applicaion(VBA)是Visual Basic的一种宏语言,主要用来扩展Windows的应用程序功能.在日常生活中,使 ...

  6. 导出 VuePress构建的网站为 PDF

    前言 学 Rust 也有一段时间了,网上也有不少官方文档的中文翻译版,但是似乎只有 Rust中文网站 文档一直是最新的,奈何并没有 PDF 供直接下载,是在是不太方便,为了方便阅读以及方便后续文档更新 ...

  7. LeetCode_121. Best Time to Buy and Sell Stock

    121. Best Time to Buy and Sell Stock Easy Say you have an array for which the ith element is the pri ...

  8. hadoop：/bin/bash: /bin/java: No such file or directory

    Stack trace: ExitCodeException exitCode=127 In HADOOP_HOME/libexec/hadoop-config.sh look for the if ...

  9. Touchpal实习技术栈和总结

    在TouchPal工作三个月了,人生的第一份互联网实习工作,小节一下工作中用到的相关技术和学到的东西(流水账哈哈哈) 1. linux系统 .包括VIM使用,log抓取统计.grep使用.定时cret ...

  10. 最新 京东java校招面经 （含整理过的面试题大全）

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