详细介绍Easyui

 

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>

 

如果你放了完整的jqeuryui文件夹到项目里面的话，你可以直接引用easyloader.js，easyloader.js会自动把需要的js和css，导入到你的页面里面。

不过这样做，会看到一个延迟加载的过程。如下图，下面是使用了easyui布局的页面，一开始会出现没有布局的界面：

 

片刻后，恢复正常：

 

所以如果你在页面中，使用了很多class="easyui-组件名"这种形式的页面，最好还是手工加入CSS和JS的文件引入。

 

第二章

 

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中很好用的组件。

 

如下图所示：

 

 

 

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