或许，仅仅有当做比較大的项目的时候，才会发现封装好的东西会为程序员们带来多少方便。合作开发的时候更应该强调复用，才干更加发挥团队的优势。
今天使用了一些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里面本身就包括了类型。
时间： 2024-12-13 04:14:40