详细介绍Easyui

Easyui协议：

Current Version: 1.3.5
======================
This software is allowed to use under GPL or you need to buy commercial license for better support or other purpose.
Please contact us at [email protected]

GPL协议，如果需要商业支持，请联系jeasyui.com

Easyui是一个很好用的jquery框架。它包装了很多jquery在做界面时常用的方法，让我们用jquery做起界面时，更加的轻松。它的特点是功能强大，而且使用简单。

Easyui的主页地址是：http://www.jeasyui.com/

第一章 Easyui的配置与基础操作

使用Easyui需要做下面的一些准备工作

1. 引用Easyui相关的JS

相关的JS包括：

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

2. 引用Easyui相关的CSS

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

 其中icon.css是用来显示小图标的CSS，也可以不加。

3. 如何使用easyui的组件

使用easyui可以通过，Javascript的方式，如：

$("#content").panel({
    width:100,
    height:100
});

也可以用指定class的方式，如：

<div class="easyui-panel" style="width:100px;height:100px"></div>

3. 使用Easyloader

我们也可以直接导入JS文件和CSS文件在页面中，而是使用Easyloader组件。

如：

<script type="text/javascript" src="../easyui/easyloader.js"></script>

第二章

Easyui所提供的组件：

1. Accordion

Accordion提供了抽屉式的菜单组件。

class:easyui

显示的效果，如下图：

同时它还支持增加，删除和选中的功能，如下：

function selectPanel(){
      $.messager.prompt('Prompt','Please enter the panel title:',function(s){
	if (s){
		$('#aa').accordion('select',s);
	}
      });
}
var idx = 1;
function addPanel(){
	$('#aa').accordion('add',{
		title:'Title'+idx,
		content:'<div style="padding:10px">Content'+idx+'</div>'
	});
	idx++;
}
function removePanel(){
	var pp = $('#aa').accordion('getSelected');
	if (pp){
		var index = $('#aa').accordion('getPanelIndex',pp);
		$('#aa').accordion('remove',index);
	}
}

 另外，Accordion支持页面载入：

如：

<div class="easyui-accordion">
	<div title="系统管理" data-options="iconCls:'icon-edit',href:'sys.php'" style="overflow:auto;padding:10px;">
		<a href="sys.php">系统管理</a><br />
	</div>
	<div title="产品管理" data-options="iconCls:'icon-edit'" style="overflow:auto;padding:10px;">
		<a href="product.php">产品管理</a><br />
	</div>
	<div title="新闻管理" data-options="iconCls:'icon-edit'" style="overflow:auto;padding:10px;">
		<a href="newscenter">新闻管理</a>
	</div>
</div>

 相关的属性：

collapsible：true表示可以折叠，false则表示不能

selected：true表示当前被选中，false则表示没有选中

tools：工具，会生成一个按钮，可以定义其中的方法，如：

tools:[{
	iconCls:'icon-reload',
	handler:function(){
		$('#dg').datagrid('reload');
	}
}]

 2. Combo组件

Combo组件也是Easyui中很好用的组件。

如下图所示：

他是一个下拉菜单，并且还有搜索的功能