一、EasyUI下载

　　EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jquery-easyui-1.7.2

　　解压后得到如下文件夹：

　　

二、EasyUI入门案例

　　第一步：新建一个JavaWeb工程，然后将jquery-easyui-1.7.2加入到工程中，将jquery-easyui-1.7.2文件夹中一些不必要的文件删掉，只保留必要的就可以了，如下图所示：

　　

　　第二步：新建一个demo1.jsp，在demo1.jsp中使用EasyUI

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>EasyUI入门——创建EasyUI的Dialog</title>
  5.  
  6.     <!--引入JQuery-->
  7.     <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
  8.     <!--引入EasyUI-->
  9.     <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
  10.     <!--引入EasyUI的中文国际化,让EasyUI支持中文-->
  11.     <script type="application/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
  12.     <!--引入EasyUI的样式文件-->
  13.     <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>
  14.     <!-- 引入EasyUI的图标样式文件-->
  15.     <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>
  16.  
  17.     <script type="text/javascript">
  18.         $(function () {
  19.             /**
  20.              * 使用JavaScript动态创建EasyUI的Dialog的步骤:
  21.              * 1、定义一个div,并给div指定一个id
  22.              * 2、使用JQuery选择器选中该div,然后调用dialog()的方法就可以创建EasyUI的dialog了
  23.              */
  24.             $("#dd2").dialog(); //使用默认的参数创建EasyUI的Dialog
  25.             //使用自定义参数创建EasyUI的Dialog
  26.             $("#dd3").dialog({
  27.                 title: '使用JavaScript创建的Dialog',
  28.                 width: 400,
  29.                 height: 200,
  30.                 closed: false,
  31.                 cache: false,
  32.                 modal: true
  33.             });
  34.  
  35.         });
  36.     </script>
  37.  
  38. </head>
  39. <body>
  40.  
  41.     <%--使用纯html的方式创建EasyUI的dialog的步骤:
  42.         1、定义一个div
  43.         2、将div的class样式属性设置为easyui-dialog,这样就可以将普通的div变成EasyUI的Dialog了
  44.     --%>
  45.     <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width:500px;height: 300px">
  46.         Hello world!
  47.     </div>
  48.     <div id="dd2">Dialog Content</div>
  49.     <div id="dd3">Dialog Content</div>
  50. </body>
  51. </html>

　　第三步：启动tomcat，查看demo1.jsp的结果

　　

参考：https://www.cnblogs.com/xdp-gacl/p/4075079.html

EasyUI学习笔记（一）EasyUI入门的更多相关文章

  1. Hadoop学习笔记(1) ——菜鸟入门

    Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...

  2. iOS学习笔记-地图MapKit入门

    代码地址如下:http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错漏 ...

  3. tensorflow学习笔记二：入门基础 好教程 可用

    http://www.cnblogs.com/denny402/p/5852083.html tensorflow学习笔记二:入门基础   TensorFlow用张量这种数据结构来表示所有的数据.用一 ...

  4. EasyUI学习总结(一)——EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1

  5. EasyUI学习总结(一)——EasyUI入门（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4075079.html 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/ ...

  6. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  7. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  8. spark学习笔记总结-spark入门资料精化

    Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...

  9. EasyUI学习总结(六)——EasyUI布局

    一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

随机推荐

  1. linux su su -

    本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行, ...

  2. libevent源码深度剖析六

    libevent源码深度剖析六 ——初见事件处理框架 张亮 前面已经对libevent的事件处理框架和event结构体做了描述,现在是时候剖析libevent对事件的详细处理流程了,本节将分析 lib ...

  3. 代理模式 静态代理、JDK动态代理、Cglib动态代理

    1 代理模式 使用代理模式时必须让代理类和被代理类实现相同的接口: 客户端通过代理类对象来调用被代理对象方法时,代理类对象会将所有方法的调用分派到被代理对象上进行反射执行: 在分派的过程中还可以添加前 ...

  4. JSP页面使用EL表达式出现的问题：javax.el.PropertyNotFoundException: Property 'ID' not found on type java.lang.Str

    问题描述: 1. 后台返回到JSP前台的的list,在jsp页面使用EL表达式遍历时出现如下问题:javax.el.PropertyNotFoundException: Property 'ID' n ...

  5. 535. Encode and Decode TinyURL 长短URL

    ［抄题］: TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/problem ...

  6. 686. Repeated String Match 字符串重复后的子字符串查找

    ［抄题］: Given two strings A and B, find the minimum number of times A has to be repeated such that B i ...

  7. jquery select 左右移动

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  8. 编写高质量代码改善C#程序的157个建议——建议59：不要在不恰当的场合下引发异常

    建议59:不要在不恰当的场合下引发异常 常见的不易于引发异常的情况是对在可控范围内的输入和输出引发异常. private void SaveUser3(User user) { ) { throw n ...

  9. 设计模式06： Adapter 适配器模式（结构型模式）

    Adapter 适配器模式(结构型模式) 适配(转换)的概念无处不在:电源转接头.电源适配器.水管转接头... 动机(Motivation)在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象 ...

  10. smartUpload上传下载

    上传 file_upload_smart_form.jsp文件代码 <%@ page contentType="text/html;charset=gb2312" langu ...