jQuery Easy UI学习（1）——如何使用easyui，导入js顺序_H5之家

一、首先在WebRoot目录下创建js文件夹，导入压缩好的完整的easy-ui的js包。

二、在HTML的页面中导入easy ui 的js
1、一次导入所有js：(建议用这种)
<1>.引用jQuery的js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"></script>
<2>.引用Easy UI的Js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<3>.导入Easy UI的主题Css文件
<link rel="stylesheet" href="../js/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link>
<4>.导入Easy UI的图标Css文件
<link rel="stylesheet" href="../js/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link>
<5>.引用Easy UI的国际化文件以下为让它显示中文
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
<6>.页面上加上UTF-8编码
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<7>.使用组件（以dialog为例）
<script type = "text/javascript" charset = "UTF-8"> $(function(){ $('#dd').dialog({ modal:true }); }); </script> <body> <div id = "dd" title = "My Dialog" style = "width:400px;height:200px;">Dialog</div> </body> 或使用class添加组件：（这一个同时可用于单个导入）
<script type = "text/javascript" charset = "UTF-8"> $(function()); </script> <body> <div id = "dd" class = "easyui-dialog" title = "My Dialog" style = "width:400px;height:200px;">Dialog</div> </body>

2、导入单个js：
<1>.引用jQuery的Js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"></script>
<2>.引用easyLoader.js
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/easyloader.js"></script>
<3>.使用组件（同上例）
<script type = "text/javascript" charset = "UTF-8"> $(function(){ easyloader.load('dialog',function(){ $('#dd').dialog({ modal : true }); }); }); /* easyloader可以换成using */ </script> 如果要加载两个组件的话，使用数组:
<script type = "text/javascript" charset = "UTF-8"> $(function(){ easyloader.load(['dialog','messager'],function(){ $('#dd').dialog({ modal : true }); $.messager.alert('Title','load ok'); }); }); </script>