0101 EasyUI简单介绍、下载、使用步骤

 

1 什么是jQuery EasyUI

　　jQuery EasyUI 是一组基于jQuery 的UI 插件集合，而jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的UI 界面。开发者不需要编写复杂的JavaScript，也不需要对css 样式有深入的了解，开发者需要了解的只有一些简单的html 标签。

　　EasyUI官网地址：点击前往

 

2 jQuery EasyUI 下载即安装

　　步骤很简单，直接到官网下载后解压即可；是在不会去问度娘

 

3 jQuery EasyUI 使用步骤

　　3.1 创建一个HTML文件，并将 EasyUI 文件夹（我这里命名为：easyui） 和 这个HTML文件放在同一个目录下面

　　3.2 在HTML文件中引入相关文件（三少一般使用模板来导入）

　　　　3.2.1 引入3个js文件

　　　　　　加载jQuery核心库：<script type="text/javascript" src="easyui/jquery.min.js"></script>

　　　　　　加载easyui核心库：<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

　　　　　　加载easyUI中文提示信息：<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

　　　　3.2.2 引入2个css文件

　　　　　　加载easyui中核心ui文件的css文件：<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

　　　　　　加载easyui的图标文件：<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

　　　　3.2.3 编写一段代码（直接到EasyUI官网的home页面下载一个测试代码）　

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../asyui/themes/icon.css" /> 
15 
16     <link rel="shortcut icon" href="../img/study04.ico">
17     <style>
18         *{
19             margin: 0;
20             padding: 0;
21         }
22         h2{
23             color: red;
24             text-align: center;
25         }
26     </style>
27 </head>
28 
29 <body>
30     <h2>学习使用jQuery EasyUI</h2>
31     <hr size="5px" color="skyblue" />
32     <div class="easyui-dialog" style="width:400px;height:200px"
33     data-options="
34         title:'My Dialog',
35         iconCls:'icon-ok',
36         onOpen:function(){}">
37     dialog content.
38     </div>
39 </body>
40 </html>
EasyUI测试源代码

 

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="$3" />
 6     <meta name="Keywords" content="$2" />
 7     <title>$1</title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24     </style>
25 </head>
26 
27 <body>
28     $0
29 </body>
30 </html>
HTML模板配置

 

 

 

 

 

 

 

 

 

 

　　　　　　

posted @ 2017-05-11 10:30  寻渝记  阅读(448)  评论(0)    收藏  举报