文章参考来源：http://www.cnblogs.com/xdp-gacl/p/4075079.html

感谢博主的分享，写得非常精细，我在这边给看过的做一个记录。

一、EasyUI下载

使用easyui开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

EasyUI官方 http://www.jeasyui.com
EasyUI论坛 http://bbs.btboys.com

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

解压后的压缩包

二、EasyUI入门

建一个demo

导入easyUI的所需的东西

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

<%@ 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/jquery.min.js"></script>

<!-- 引入EasyUI -->

 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js"></script>

<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>

<!-- 引入EasyUI的样式文件-->

<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>

<!-- 引入EasyUI的图标样式文件-->

<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/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>

运行结果截图：

除了用上面的javascript的方式去选择当前控件的id，还可以直接让该控件的class属性为

class="easyui-dialog"来直接对其进行easyui的渲染

打开火狐的Firebugs的html可以对当前的id查看当前的id元素是div还是span，还可以查看引用的文件是否有引用进来。

1. EasyUI 学习总结（一）——对话框dialog的更多相关文章

  1. libgdx学习记录8——对话框Dialog

    Dialog在游戏中也很常用,尤其在设置.退出.商店.暂停等画面.Dialog的使用也可以通过skin实现,也可以自定义. 下面是一个简单的实例: package com.fxb.newtest; i ...

  2. easyui学习笔记1-（datagrid+dialog）

    jQuery EasyUI是一组基于jQuery的UI插件集合体.我的理解:jquery是js的插件,easyui是基于jquery的插件.用easyui可以很轻松的打造出功能丰富并且美观的UI界面. ...

  3. Android 对话框(Dialog)大全 建立你自己的对话框

    Android 对话框(Dialog)大全 建立你自己的对话框 原文地址: http://www.cnblogs.com/salam/archive/2010/11/15/1877512.html A ...

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

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  5. Android 对话框(Dialog)大全

    转自: http://www.cnblogs.com/salam/archive/2010/11/15/1877512.html Activities提供了一种方便管理的创建.保存.回复的对话框机制, ...

  6. VC学习笔记：对话框

    VC学习笔记:对话框 SkySeraph NOV.11st 2009 HQU Email-zgzhaobo@gmail.com  QQ-452728574 Latest Modified Date:O ...

  7. easyUI学习笔记一

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

  8. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  9. 转 Android 对话框(Dialog)大全 建立你自己的对话框

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...

  10. 95秀-自定义对话框 dialog 合集

    普通的确认对话框 NormalDialog.java import android.app.Dialog; import android.content.Context; import android ...

随机推荐

  1. ZooKeepr日志清理【转】

    转自 :@ni掌柜nileader@gmail.com 地址 数据文件管理 默认情况下,ZK的数据文件和事务日志是保存在同一个目录中,建议是将事务日志存储到单独的磁盘上. 1 数据目录 ZK的数据目录 ...

  2. jquery中的$("#id")与document.getElementById("id")的区别

    以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...

  3. 理解Memcached的分布式

    Memcached尽管是"分布式"的缓存系统,但是服务器端并没有分布式功能.各个Memcached实例不会相互通信以共享信息,Memcached如何进行分布式完全取决于客户端的实现 ...

  4. PHP从零开始-笔记-面向对象编程的概念

    面向对象变成的概念 需要一一种不同的方式来考虑如何构造应用程序.通过对象可以在对应用程序所处理的显示任务.过程和思想进行编码是,实施更贴切的建模.OOP方法并不是将应用程序考虑成一个将大量数据从一个函 ...

  5. RTX二次开发（二）（基于ASP.NET）

    上一篇,我们讲到我开发环境的配置,还没配置好开发环境或再看一遍开发环境配置?接下来,我们开始coding...... 在coding之前,我们先添加引用. 我们在SDK的安装目录中引用这个文件. 引用 ...

  6. 谈谈我眼中的CSDN吧

    昨天逛博客园看到了这篇曝光率很高的文章:博客搬家——从CSDN到博客园,一篇短短的文章竟然招致这么多人的讨论,可能程序员就喜欢“Java好还是PHP好”这类型的问题吧,好无聊.由于我一直在使用CSDN ...

  7. glusterFS分布式文件系统的搭建

    准备工作 1.安装IBA yum install libradmacm librdmacm-devel libmlx4 infiniband-diags 2.配置IPOIB /etc/sysconfi ...

  8. Redis学习笔记三：多机数据库的实现

    1.复制 执行slaveof命令或者设置slaveof选项,让一个服务器去复制另外一个服务器. 旧版复制功能的实现(Redis 2.8 之前的版本) 复制功能分为同步和命令传播两个操作. 同步(syn ...

  9. win7平台下React-Native Android：Unable to upload some APKs

    一.问题描述 根据网络上的Win7平台下React-native配置教程配置好开发环境的过程中,在艰难进行到react-native run-android这一步时,发现一直出现错误,截图如下: 错误 ...

  10. cocos2d事件处理机制之我见

    cocos2d是使用pyglet事件框架来处理事件的. 其中,包括分发器(发射器)和监听器两部分.下面形象的来打个比方. 这个机制就好比一把枪,三步:扣扳机(触发),上弹(注册),给子弹上***(这个 ...