或许，仅仅有当做比較大的项目的时候，才会发现封装好的东西会为程序员们带来多少方便。合作开发的时候更应该强调复用，才干更加发挥团队的优势。

今天使用了一些EasyUI,发现非常wonderful!

比方，曾经，我们为了写一个还看得过去的button，得先在HTML里面增加button，然后在CSS里面写入样式，又用JS控制它的事件，整个button写下来，我们已经快被烦死了，抬起头看看，我们还有label,dropList,text......等N多个这种东西要写。后来有了JQuery了，我们的日子似乎好过了点儿，尝试过EasyUI,忽然就又体会到了封装的优点。

ok,開始进入正题，本文主要是简单介绍在使用EasyUI进行开发时，要引入那些东西，以及一些注意事项，还有执行下我们的dialog版的“hello world”.

一，直接引入方式

例如以下代码，我们首先要引入我们的Jquery,这个jquery的版本号最好跟EasyUI里面使用的Jquery版本号一至，以免出现我们使用EasyUI时莫名其妙的错误。

然后引入的是EasyUI的JS文件，注意，这两个JS文件都要指定charset.

接着是CSS文件的引入，我们选择例如以下的CSS文件：

接着是Icon，接着是汉化包：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>EasyUI入门</title>

</head>

	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>

                                                          <!--(指定编码方式，防止出现乱码)引入EasyUI中使用的Jquery版本号-->

	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery.easyui.min.js" charset="utf-8"></script>

                                                                <!--(指定编码方式，防止出现乱码)引入EasyUi文件-->

	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/default/easyui.css">   <!--引入CSS样式-->

	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/icon.css">   <!--Icon引入-->

	<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>  <!--汉化-->

	<script>

	</script>

<body>

	   <!--此处，class="easyui-dialog" 要注意，在EasyUi里面，Parser会将easyui-+****的div转换为元件,不能省去-->

		<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"

				title="这是我第一次使用EasyUI" iconCls="icon-ok"

				toolbar="#dlg-toolbar" buttons="#dlg-buttons">

		hello world!

       </div>

</body>

</html>

全部文件引入完毕之后，我们从官网上粘段代码来看看EasyUI的效果：

在浏览器中看到结果如图：

二，使用easyloader方式

假设认为上面的引入文件的方式太烦琐了，我们能够使用easyloader的方式，动态载入我们要使用到的JS，CSS，或者模块。

这时，我们仅仅需引入：

<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>  <!--(指定编码方式，防止出现乱码)引入EasyUI中使用的Jquery版本号-->

<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/easyloader.js"></script>

使用时：

使用easyloader后，能够用ID创建对象，也能够用class，可是由于parser的存在，使用class的时候，无需再在load方法里面指定类型，由于class里面本身就包括了类型。

EasyUI入门:怎样引入及简单使用的更多相关文章

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

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

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

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

  3. EasyUI学习总结(一)——EasyUI入门（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4075079.html 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/ ...

  4. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  5. EasyUI学习笔记（一）EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jquery-easyui-1.7.2 解压后得到 ...

  6. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  7. Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码

    Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习MapReduce时的一些 ...

  8. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

  9. Easyui入门视频教程 第10集---Messager的使用

    Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...

随机推荐

  1. JS面向对象程序设计(OOP:Object Oriented Programming)

    你是如何理解编程语言中的面向对象的? 我们研究JS和使用JS编程本身就是基于面向对象的思想来开发的,JS中的一切内容都可以统称为要研究的“对象”,我们按照功能特点把所有内容划分成“几个大类,还可以基于 ...

  2. Mac 环境下svn服务器的配置

    Mac 环境下svn服务器的配置 本文目录 • 一.创建代码仓库,用来存储客户端所上传的代码 • 二.配置svn的用户权限 • 三.使用svn客户端功能 在Windows环境中,我们一般使用Torto ...

  3. 【u252】泽泽在巴西

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 泽泽帮助了英国某街道尽量减少酸雨的伤害,街道办主任非常感激他,就把他领到一扇门前,告诉他这扇门能通往好 ...

  4. ios获取系统时间

    //获取系统时间 NSDate * date=[NSDate date]; NSDateFormatter *dateformatter=[[NSDateFormatter alloc] init]; ...

  5. 页面中如何引用外部的HTML（四种方法）

    页面中如何引用外部的HTML(四种方法) 一.总结 一句话总结:a.iframe标签        b.ajax引入代码片段        c.link import的方法导入        d.re ...

  6. 32、从零开始写CMOS摄像头驱动

    使用的内核:linux-3.4.2 参考源码:第32课_新内核下的I2C驱动\i2c\1th_i2c_new_device第2课第1.1.7节文档和图片(从0写USB摄像头)\myuvc 设备地址:写 ...

  7. 将OpenCV捕获的摄像头加载到picture控件中

    CRect rect; CStatic* pStc; CDC* pDC; HDC hDC; pStc = (CStatic*)GetDlgItem(IDC_CAM);//IDC_CAM是Picture ...

  8. PJSIP开源库详解

    PJSIP是一个包含了SIP.SDP.RTP.RTCP.STUN.ICE等协议实现的开源库.它把基于信令协议SIP的多媒体框架和NAT穿透功能整合成高层次.抽象的多媒体通信API,这套API能够很容易 ...

  9. C#+AE实现类似IDentify功能及对高亮显示相关接口的总结

    kenika 原文C#+AE实现类似IDentify功能及对高亮显示相关接口的总结 ArcMap中的Identify功能是有目的查看要素(Feature)属性信息经常使用的工具.ArcMap中的Ide ...

  10. [CSS] Manipulate Images Using CSS Filter and Blend Modes

    Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, yo ...