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

你的名字 2022-09-23 03:45 260阅读 0赞

##  ##

## 一、EasyUI下载 ##

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

![Center][]

下载完成之后，得到![Image 1][]压缩包，解压后，得到一个【jquery-easyui-1.4.1】文件夹，里面有如下图所示的文件：

![Center 1][]

## 二、EasyUI入门 ##

## 2.1、引入必要的js和css样式文件 ##

## 　　要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例，文件引入的顺序如下所示 ##

![复制代码][copycode.gif]

1  
     2   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>
     3   
     4   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
     5   
     6   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
     7   
     8   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
     9   
    10   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>

![复制代码][copycode.gif]

在jsp文件中引用了这些文件之后，就可以使用EasyUI了。

2.2、EasyUI使用范例

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

![Center 2][]

新创建一个01.jsp页面，在01.jsp页面中使用EasyUI，代码如下：

![复制代码][copycode.gif]

1 <%@ page language="java" pageEncoding="UTF-8"%>
     2 <!DOCTYPE HTML>
     3 <html>
     4   <head>
     5     <title>EasyUI入门——创建EasyUI的Dialog</title>
     6   
     7   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>
     8   
     9   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    10   
    11   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    12   
    13   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
    14   
    15   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
    16   
    17   <script type="text/javascript">
    18 $(function(){ 19           //console.info($('#dd2'));
    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   </script>
    36   
    37   </head>
    38   
    39   <body>
    40       <%--使用纯html的方式创建创建EasyUI的Dialog的步骤： 41       1、定义一个div 42       2、将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog了 43        --%>
    44     <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
    45 Hello World! 46     </div>
    47     <div id="dd2">Dialog Content</div>
    48     <div id="dd3">Dialog Content</div>
    49   </body>
    50 </html>

![复制代码][copycode.gif]

01.jsp运行结果如下：

![Center 3][]

以上就是关于EasyUI的简单入门

[Center]: /images/20220721/f8fa0a02747d4e40ace2d0628f6f72ca.png
[Image 1]: 
[Center 1]: /images/20220721/a6c7d92894e04cbba9f025783b65ccea.png
[copycode.gif]: /images/20220721/12587613823846bdb69ea5386149fe65.png
[Center 2]: /images/20220721/d1ba62be356546e3b604c7ff764f1a26.png
[Center 3]: /images/20220721/319b901fdb2d42d6b0e7bc591c98e0c1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery EasyUI（一）

一、什么是jQuery EasyUI？　　jQuery EasyUI是一组基于 jQuery的 UI插件集合，而 jQuery EasyUI的目标就是帮助Web开发者更轻松

桃扇骨/ 2023年10月17日 17:21/ 0 赞/ 20 阅读

相关 EasyUI学习总结(三)——EasyUI组件使用

一、EasyUI组件的简单介绍　　easyUI提供了很多组件让我们使用，如下图所示：　　![Center][] 　　使用这些组件可以帮助我们快速地进行项目开发，下

水深无声/ 2022年09月23日 03:46/ 0 赞/ 362 阅读

相关 EasyUI学习总结(二)——EasyUI布局

一、EasyUI布局介绍　　easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、

拼搏现实的明天。/ 2022年09月23日 03:46/ 0 赞/ 140 阅读

相关 EasyUI学习总结(一)——EasyUI入门

一、EasyUI下载　　EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQue

你的名字/ 2022年09月23日 03:45/ 0 赞/ 261 阅读

相关 Easyui 问题总结

最近使用Easyui，其中遇到一些问题，在这里记载一下，以备将来查找。 1，在使用linkbutton时，遇到icon-add图标不显示，其他图标都能显示的情况。经过在ch

朱雀/ 2022年07月15日 13:39/ 0 赞/ 172 阅读

相关 JQuery EasyUI入门

JQuery EasyUI入门 @(JavaScript)\[jQuery, EasyUI, 入门\] JQuery EasyUI入门基

╰+攻爆jí腚メ/ 2022年07月13日 11:13/ 0 赞/ 242 阅读

相关 Bootstrap与EasyUI入门

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

向右看齐/ 2022年06月07日 11:44/ 0 赞/ 226 阅读

相关 jQuery EasyUI详细入门学习一

> 前言：当你看到这篇文章的时候，首先，你需要有一定的javascript与jquery的基础，要不你真的是不明白的。所以请先学习javaCript与html等基础知识，然后

小咪咪/ 2022年04月14日 06:06/ 0 赞/ 321 阅读

相关 easyui学习记录：combotree的使用总结

一、简介：　　combotree控件是对combo（自定义下拉框）与tree（树）控件的扩展，它与combobox（下拉列表框）类似，但是它将下拉列表框的列表替换成了树

落日映苍穹つ/ 2022年01月15日 00:41/ 0 赞/ 733 阅读

相关 jQuery EasyUI学习一

1. jQuery EasyUI介绍 1. 创建组件的方式和原理（掌握） 2. 组件三要素（掌握） 3. Panel、LinkButton、上

Dear 丶/ 2021年10月23日 16:12/ 0 赞/ 452 阅读