easyui前端框架系列（一）easyui简介

最近一个项目用到了前端框架easyui ，现在整理一下，留个纪念。

我个人的经验，如果去熟悉一个新的东西，可以查看API，淡然如果您觉得API看着乏味，这边推荐一个不错的网站 Jquery EasyUI中文网。网址：http://www.jeasyui.net/。

easyui是一种基于jQuery的用户界面插件集合.

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui的2个申明方法：

1. 直接在 HTML 声明组件。

<div class="easyui-dialog"   style="width: 300px;height: 180px;" 
    data-options="title:'My Dialog', collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
     Hello World!!

   </div>

2.编写 JavaScript 代码来创建组件。

a.现在jsp页面声明一个区域

 <input  id="cc"  style="width:200px"/>

b.js代码

 $(function(){
$('#cc').dialog({
title:'My Dialog',
width:300,
height:180,
collapsible:true,
});

});

这样出来的效果是一样的，效果如下图

 

在使用easyui框架之前，我们需要先在我们的项目中引入easyui的相关的js,这边需要特别说明一下，easyui是基于jQuery的用户界面插件集合.所以在引入easyui的js之前需要先引入jquery.

下面是需要引入的js:

 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.4.5/jquery.min.js"></script>
    <!-- 引入EasyUI -->
  <script type="text/javascript" src="/EasyUIStudy/jquery-easyui-1.5.4.5/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.4.5/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.4.5/themes/default/easyui.css" type="text/css"/>
   <!-- 引入EasyUI的图标样式文件-->
   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.4.5/themes/icon.css" type="text/css"/>

easyui提供的插件比较多，接下来我将一一介绍