文章参考来源：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. 有感于三个50岁的美国程序员的生活状态与IT职业杂想

    前言 这篇杂记其实是去年也就是 2013年9月30日写的,还上过博客园十日推荐的首页,后来在整理博客分类时七弄八弄误删掉了好多文章,就包括这一篇.今天,2014年9月29日,恰好恰好一年的时候居然在好 ...

  2. sql中的常见的全局变量

    select APP_NAME ( ) as w --当前会话的应用程序 select @@IDENTITY --返回最后插入的标识值 select USER_NAME() --返回用户数据库用户名 ...

  3. Linux下查看文件内容的命令

    查看文件内容的命令: cat     由第一行开始显示内容,并将所有内容输出 tac     从最后一行倒序显示内容,并将所有内容输出 more    根据窗口大小,一页一页的现实文件内容 less ...

  4. MMTx使用说明

    MMTx(MetaMap Transfer)是美国国家医学图书馆建立的用于文本数据挖掘的一种工具. 下面以Medine格式数据为例介绍使用方法 1.在PubMed数据库检索相关的文献. 2.将数据结果 ...

  5. Hanoi问题

    #include<stdio.h>int main(){ int m; void hanoi(int n,char x,char y,char z); printf("input ...

  6. ReactiveCocoa源码拆分解析(一)

    (整个关于ReactiveCocoa的工程可以在https://github.com/qianhongqiang/QHQReactive下载) ReactiveCocoa的介绍我就不说了,可以自行百度 ...

  7. iOS开发——源代码管理——svn 命令行下常用的几个命令

    1.将文件checkout到本地目录    svn checkout path(path是服务器上的目录)    例如:svn checkout svn://192.168.1.1/pro/domai ...

  8. 微软“One Windows”的梦想已经破灭了吗？

    导读 Windows 10 正式公布的时候,微软曾表示该系统将开启更为个性化的计算新纪元,可让用户在使用各类设备处理各项事务时,享受到一致.熟悉和可兼容的体验,从 Xbox 到 PC 和手机,再到平板 ...

  9. hihoCoder 1303 数论六·模线性方程组

    Description 求解模线性方程组, \(m_i\) 不互质. Sol 扩展欧几里得+中国剩余定理. 首先两两合并跟上篇博文一样. 每次通解就是每次增加两个数的最小公倍数,这对取模任意一个数都是 ...

  10. SNMP常用数据操作

    SNMP常用数据操作 snmp编程中常见的数据类型基本上就是integer32/oct_str(字节数组)/counter64/timeticks/dateAndTime这些.很多其它的比如Truth ...