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

今天使用了一些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. 各个浏览器/服务器URL最大长度限制

    在http协议中,其实并没有对url长度作出限制,往往url的最大长度和用户浏览器和Web服务器有关,不一样的浏览器,能接受的最大长度往往是不一样的,当然,不一样的Web服务器能够处理的最大长度的UR ...

  2. 关于 /etc/zabbix/zabbix_agentd.conf 文件 Hostname 文件的说明

    前提 (1) /etc/hosts 文件如下 [root@testdb ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain loc ...

  3. 使用SystemC进行硬件仿真

    使用SystemC进行硬件仿真 环境 linux-x86-64 bash g++ 下载解压SystemC SystemC下载地址 解压下载的包 tar zxvf systemc-2.3.3.tar.g ...

  4. FragmentPagerAdapter和FragmentStatePagerAdapter的差别

    ViewPager同意用户通过左右滑动显示不同页面的数据.而这些页面须要PagerAdapter管理. 经常使用的有FragmentPagerAdapter和FragmentStatePagerAda ...

  5. swift项目第六天：中间发布按钮的封装以及监听点击事件

    import UIKit /* 总结:1:给UIButton写分类,新建文件swiftFile,一般为了区分起名字都是名字-Extension,要想调用UI控件需要导入 import UIKit框架, ...

  6. WCF REST 基础教程

    概述 Representational State Transfer(REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. 因此REST是设计风格而不是标准,R ...

  7. Spring Cloud项目

    如何使用windows版Docker并在IntelliJ IDEA使用Docker运行Spring Cloud项目   如何使用windows版Docker并在IntelliJ IDEA使用Docke ...

  8. CentOS 7开放端口和关闭防火墙

    开放端口 永久的开放需要的端口 sudo firewall-cmd --zone=public --add-port=3000/tcp --permanent sudo firewall-cmd -- ...

  9. spring mvc 解决csrf跨站请求攻击

    http://www.dewen.net.cn/q/935/spring+mvc+%E8%A7%A3%E5%86%B3csrf%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82% ...

  10. React Native 四：图片

    一.展示图片资源  1.在ReactNative中.图片使用Image组件进行展示,以下我们就以静态.混合和网络资源等多种方式演示图片展示. 2.将图片放在代码目录img处: