简介
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"> <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css"> <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"/> <style type="text/css"> </style> </head>
这样下面我们就可以使用我们的EasyUI了
首先，我们来创建一个简单的面板
<div id="p" class="easyui-panel" title="My Panel" style="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({ 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可以很快的实现一个带有数据交互功能的面板