easyui前端框架系列（⼀）easyui简介
最近⼀个项⽬⽤到了前端框架easyui ，现在整理⼀下，留个纪念。
easyui是⼀种基于jQuery的⽤户界⾯插件集合.
easyui为创建现代化，互动，JavaScript应⽤程序，提供必要的功能。
使⽤easyui你不需要写很多代码，你只需要通过编写⼀些简单HTML标记，就可以定义⽤户界⾯。
easyui是个完美⽀持HTML5⽹页的完整框架。
easyui的2个申明⽅法：jquery框架原理
1. 直接在 HTML 声明组件。
<div class="easyui-dialog" 
data-options="title:'My Dialog', collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
Hello World!!
</div>
2.编写 JavaScript 代码来创建组件。
a.现在jsp页⾯声明⼀个区域
<input  id="cc"  />
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="${tPath}/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="${tPath}/jquery-easyui-1.5.4.5/locale/easyui-lang-zh_CN.js"> </script>
<!-- 引⼊EasyUI的样式⽂件-->
<link rel="stylesheet" href="${tPath}/jquery-easyui-1.5.4.5/themes/default/easyui.css"
type="text/css"/>
<!-- 引⼊EasyUI的图标样式⽂件-->
<link rel="stylesheet" href="${tPath}/jquery-easyui-1.5.4.5/themes/icon.css" type="text/css"/> easyui提供的插件⽐较多，接下来我将⼀⼀介绍

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。