简介
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
特点：
①easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
②easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
③使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
④HTML 网页的完整框架。
⑤easyui 节省了开发产品的时间和规模。
⑥easyui 非常简单，但是功能非常强大。
当然在使用 EasyUI之前我们需要导入一些必须的css和js文件
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css" rel="external nofollow" >
<script type="text/javascript" src="easyUI/jquery.min.js"></script>
<script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="easyUI/locale/easyui-lang-zh_CN.js" rel="external nofollow" />
<style type="text/css"> </style>
</head>
这样下面我们就可以使用我们的EasyUI了
首先，我们来创建一个简单的面板
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
这样一个简单的可以折叠的面板就创建好了
接下来我们通过简单的js代码来实现面板上的几个工具栏
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div> $('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
注：几个常用属性
iconCls：这是EasyUI自带的图标，通过该属性可以使用EasyUI为我们提供的各种类型的图标
width、height：用来设置面板的宽和高
tools：使用这个属性我们可以自定义的使用各种工具
面板如下：
同时当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
这样，我们通过EasyUI可以很快的实现一个带有数据交互功能的面板
