EasyUI学习（一）创建EasyUI的Dialog和JavaScript动态创建EasyUI的Dialog

最新推荐文章于 2021-06-07 19:21:18 发布

Isringring

最新推荐文章于 2021-06-07 19:21:18 发布

阅读量1.8k

点赞数

分类专栏： jQuery EasyUI

本文链接：https://blog.youkuaiyun.com/Isringring/article/details/81238110

版权

jQuery EasyUI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何开始使用EasyUI，首先从官方下载地址获取EasyUI压缩包，然后在Eclipse中创建一个新的Dynamic Web Project，将EasyUI资源引入。接着通过实例展示在01.jsp中创建Dialog，最后讲解如何配置Tomcat进行程序运行和调试，展示运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载EasyUI

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

下载完得到压缩包：

二、新建一个Web项目，并加入。

【File】--->【new】----->【Project】---- ->【Dynamic Web Project】，将添加到WebRoot文件夹下并删除不必要的文件。

创建01.jsp，代码如下。

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>EasyUI入门——创建EasyUI的Dialog</title>
  <!-- 引入JQuery -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.4/jquery.min.js"></script>
  <!-- 引入EasyUI -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
  <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
  <!-- 引入EasyUI的样式文件-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.4/themes/default/easyui.css" type="text/css"/>
  <!-- 引入EasyUI的图标样式文件-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.4/themes/icon.css" type="text/css"/>
  
  <script type="text/javascript">
      $(function(){
          //console.info($('#dd2'));
          /*使用JavaScript动态创建EasyUI的Dialog的步骤：
          1、定义一个div，并给div指定一个id
          2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
          */
          $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
          //使用自定义参数创建EasyUI的Dialog
          $('#dd3').dialog({
              title: '使用JavaScript创建的Dialog',
              width: 400,
              height: 200,
              closed: false,
              cache: false,
              modal: true
          });
      });
  </script>
  
  </head>
  
  <body>
      <%--使用纯html的方式创建创建EasyUI的Dialog的步骤：
      1、定义一个div
      2、将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog了
       --%>
    <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
        Hello World!
    </div>
    <div id="dd2">Dialog Content</div>
    <div id="dd3">Dialog Content</div>
  </body>
</html>

添加程序，右键Tomcat---->【Add Deployment... 】，并点击【Debug Server】或【Run Server】在eclipse自带的tomcat上运行：