使用Jquery easyui

Jquery easyui可以帮助我们快速的创建页面，它本身包含了很丰富的组件。 不过，这是一个后台前端的解决方案。与Jquery UI齐名的有bootstrap。前端前端，还是离不开javascript和css。

首先，需要下载jquery easy UI的相关包，可以到easy UI的官网上去下载（下载地址：点击打开链接）。

官方的下载包，是一个压缩文件，解压后可以得到很多文件夹，以下文件夹是比较重要的：

locale：国际化的js脚本，会根据浏览器设置，选择具体的显示语言，如果你想要jquery easy UI支持中文，至少要把locale文件夹中的easyui-lang-zh_CN.js文件加入到你的项目中。

themes：主题所在文件夹，里面包含了多个主题，一个主题是一个文件夹，里面主要是css文件。

要在项目中使用easy UI，需要引入以下的四个文件：icon.css、jquery-1.9.1.js、jquery.easyui.min.js、easyui-lang-zh_CN.js。此外，还需要至少一个theme文件下的easyui.css文件和icons文件夹，至于选哪个其实不是太大问题，只是显示的风格有所迥异而已。

下面来讲讲这5个文件都是干什么的：

easyui.css

定义了所有组件的大体样式。

icon.css

定义了所有的图标，无论选择哪一种主题，图标都是一样的，因为图标是其实就是一个小图片，它这些小图标存放在themes目录下的icons文件中，如果你发现使用图标没有效果，那就是没有把这个文件夹拷贝到项目中

jquery-1.9.1.js

jquery的核心支持文件。

jquery.easyui.min.js

easyui的组件的js脚本。

easyui-lang-zh_CN.js

国际化中显示中文脚本，需要注意，在引入这个脚本的时候需要指定编码集为gbk，否则会出现中文乱码。

	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/easyui-lang-zh_CN.js" charset="GBK"></script>

为了简便，我们把它写到一个js脚本中import.js

document.write('<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">');
document.write('<link rel="stylesheet" type="text/css" href="themes/icon.css">');
document.write('<script type="text/javascript" src="js/jquery-1.9.1.js"></script>');
document.write('<script type="text/javascript" src="js/jquery.easyui.min.js"></script>');
document.write('<script type="text/javascript" src="js/easyui-lang-zh_CN.js" charset="GBK"></script>');

这样，只需要导入import.js脚本到页面中就可以使用jquery easyui了。