文章参考来源：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. 论Linux运维的一些基础安全知识和简单办法

    不知不觉本人来北京也已经第三个年头了,从一个Linux小小鸟,开始,2012年我参加了第一份工作,其实现在想想其实我是幸运的,本来求学的时候,就没好好的学Linux,我认为有Cisco知识从上wind ...

  2. SQLServer安装错误之--->无法打开项 UNKNOWN\Components\DA42BC89BF25F5BD0AF18C3B9B1A1EE8\c1c4f01781cc94c4c8fb1542c0981a2a

    – 错误 1402.无法打开项 UNKNOWN\Components\7ABFE44842C12B390AF18C3B9B1A1EE8\54D21D49F3A8C1C49AC11A1B6445A83E ...

  3. findByExample(Object exampleEntity)方法得到的List判断是否为空，不可用(lis != null)

    用findByExample(Object exampleEntity)方法可以应用在用户登录上面,获得有登陆名和密码的user对象进行查询. 返回两者都符合的对象列表,为空则登陆失败. 错误的方法: ...

  4. js做灯泡明灭特效

    W3school中的js专讲这一块 http://www.w3school.com.cn/tiy/t.asp?f=js_lightbulb

  5. CPU核数跟多线程的关系

    一直以来有这样的疑惑,单核CPU适合多线程吗?是不是几个核的CPU开几个线程是最合适的? 今天就这一问题查了一些资料,现整理如下: 要说多线程就离不开进程,进程和线程的区别在这里就不详细说了,只将关键 ...

  6. git之远程标签下载（远程分支）

    一般我们发布一个新版本到线上服务器时都会在版本库中打一个标签,这样我们可以随时查看这个打标签的版本,就是说标签其实是版本库中一个快照.git的标签与分支类似,区别是分支是可变的而标签是不可变.接下来我 ...

  7. 目前主流的Android定位有如下几种：

    1.通过GPS模块 GPS方式准确度是最高的,但是它的缺点也非常明显:1,比较耗电:2,绝大部分用户默认不开启GPS模块:3,从GPS模块启动到获取第一次定位数据,可能需要比较长的时间:4,室内几乎无 ...

  8. Effective Java 读书笔记之三 类和接口

    一.使类和成员的可访问性最小化 1.尽可能地使每个类或者成员不被外界访问. 2.实例域决不能是共有的.包含公有可变域的类不是线程安全的. 3.除了公有静态final域的特殊情形之外,公有类都不应该包含 ...

  9. BZOJ4610——[Wf2016]Ceiling Functi

    水题一道,不是很懂为啥没人做... 1.题意:纠正一下..bzoj的题意不是很对...注意不是堆,是不平衡的二叉树,就是非旋转的treap, 另外...插入的时候,小于插在左边..大于等于插在右边 2 ...

  10. Eclipse 语法提示

    新建一个txt 拷贝下面的文本,然后保存修改扩展名为.epf #Sat Nov :: CST /instance/org.eclipse.jdt.core/org.eclipse.jdt.core.c ...