文章参考来源：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. angularjs 过滤器详解

    https://segmentfault.com/a/1190000002758481     app.controller('testC',function($scope,$filter){ $sc ...

  2. CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下   几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onM ...

  3. [译]Node.js : Building RESTful APIs using Loopback and MySQL

    国庆后可能就要使用StrongLoop那套东西来做项目了 原文:http://www.javabeat.net/loopback-mysql/ Loopback是什么? Loopback是一个开源的N ...

  4. iOS创建子工程

    实际开发中,我们可能会同时开发好几个端,比如楼主目前开发的家教平台,需要老师端,家长端,助教端三个端.有很多工具方法,或者封装的自定义控件都是可以复用的.我们就可以把公用的代码抽取出去,新建一个工程, ...

  5. hadoop安装实战（mac实操）

    集群环境配置参考(http://blog.csdn.net/zcf1002797280/article/details/49500027) 参考:http://www.cnblogs.com/liul ...

  6. centos下安装nginx

    1.yum install nginx     安装nginx 2.service nginx start  启动nginx 3.然后进入浏览器,输入http://Ip/测试,如果看到 Welcome ...

  7. iOS开发——常见错误——使用MJRefresh返回上一个界面蹦掉的情况

    最近在使用MJRefresh框架时发现了一个bug 下面是我的源代码 前一个界面 -(void)tableView:(UITableView *)tableView didSelectRowAtInd ...

  8. iOS开发——多线程篇——GCD

    一.基本概念 1.简介什么是GCD全称是Grand Central Dispatch,可译为“牛逼的中枢调度器”纯C语言,提供了非常多强大的函数 GCD的优势GCD是苹果公司为多核的并行运算提出的解决 ...

  9. Android学习笔记（二十一）——实战：程序数据共享

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 我们继续在Database项目的基础上继续开发,通过内容提供器来给它加入外部访问接口.首先将 MyDataba ...

  10. 关于linux中文乱码的问题。

    公司让人在一台装有ubuntu14.04的机器上安装net-snmp,可是这台机器的设置很让人不喜.没关系,一个个解决它. 不能连接外网,得弄一个代理. 这个好说,在可以上外网的本机上安装squid工 ...