EasyUI项目驱动学习

下面以一个项目简介easyui的使用,主要包含下面组件

布局面板 - layout

可伸缩面板 - accordion

选项卡 - tabs

控制面板 - panel

窗体 - window

对话框 - dialog

消息窗体 - messager

数据表格 - datagrid

分页 - pagination

树型菜单 - tree

等等...

可先下载项目源代码 对各个组件有个大致了解 http://download.csdn.net/detail/itmyhome/7605957

jQuer EasyUI布局-为网页创建边框布局(layout)

边框布局(border layout)提供五个区域：east、west、north、south、center.下面是一些通经常使使用方法：

north 区域能够用来显示站点的标语。

south 区域能够用来显示版权以及一些说明。

west 区域能够用来显示导航菜单。

east 区域能够用来显示一些推广的项目。

center 区域能够用来显示基本的内容。

为了应用布局(layout),您应该确定一个布局(layout)容器,然后定义一些区域。

布局(layout)必须至少须要一个center区域,下面是一个布局(layout)实例：

<div id="tt" class="easyui-layout" style="100%;height:100%;">  
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',title:'East',split:true" style="100px;"></div>  
    <div data-options="region:'west',title:'West',split:true" style="100px;"></div>  
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
</div> 

jQuery EasyUI布局-创建折叠面板(accordion)

伸缩面板同意您提供多个面板和显示一次。每一个小组有内置支持扩展和收缩。点击一个面板标题展开或折叠,面板的身体。

面板内容能够通过ajax载入通过指定一个"href"属性。

用户能够定义一个小组被选中。假设没有指定,那么第一个面板是默认了。

<div id="tt" class="easyui-accordion" style=" 300px; height: 200px;">
	<div title="Title1" style="padding: 10px;">
		content1
	</div>
	<div title="Title2" style="padding: 10px;">
		content2
	</div>
	<div title="Title3" style="padding: 10px;">
		content3
	</div>
</div>

jQuery EasyUI布局-创建标签页(Tabs)

这个选项卡显示面板的集合。它显示了仅仅有一个选项卡面板在一个时间。

每一个选项卡面板的标题和一些迷你button的工具,包含关闭button和其它定制button。

<div id="tt" class="easyui-tabs" style=" 500px; height: 250px;">
	<div title="Tab1" style="padding: 20px; display: none;">
		tab1
	</div>
	<div title="Tab2" data-options="closable:true"
		style="overflow: auto; padding: 20px; display: none;">
		tab2
	</div>
	<div title="Tab3" data-options="closable:true"
		style="padding: 20px; display: none;">
		tab3
	</div>
</div>

jQuery EasyUI 布局-面版(Panel)

面版用作其它内容的容器。这是基本组件构建其它组件(如布局、标签、折叠等。它还提供了内置的可折叠、

可闭,maximizable和minimizable行为和其它定制的行为。面板能够非常容易地嵌入到web页面的不论什么位置。

<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>

jQuery EasyUI 窗体-创建简单窗体(Window)

该窗体是一个浮动层形成的可拖动面板,能够用来作为一个应用程序窗体。默认情况下，

一个窗体能够移动,调整大小和关闭。不管是作为静态HTML或通过AJAX动态载入其内容也能够被定义。

<div id="win" class="easyui-window" title="My Window"
	style=" 600px; height: 400px"
	data-options="iconCls:'icon-save',modal:true">
	Window Content
</div>

jQuery EasyUI 窗体-创建对话框(Dialog)

该对话框是一种特殊类型的窗体,它能够有一个工具栏上的顶部和底部的button栏。

该对话框仅仅有一个头默认情况下,显示在右上角的关

闭工具。

<div id="dd" class="easyui-dialog" title="My Dialog"
	style=" 400px; height: 200px;"
	data-options="iconCls:'icon-save',resizable:true,modal:true">
	Dialog Content.
</div>

jQuery EasyUI 消息窗体-创建消息框(Messager)

$.messager.alert('Warning','The warning message');  
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){   
    if (r){   
	alert('ok');   
    }   
});  

暂且先写到这里吧,事实上上面也都是API里面的东西,

这些东西写起来太枯燥,自己都认为是在敷衍了。有兴趣的能够下载项目源代码去具体了解http://download.csdn.net/detail/itmyhome/7605957

还有datagrid、pagination、tree没有介绍,希望还有兴许章节来介绍...


转载请注明出处：http://blog.csdn.net/itmyhome1990/article/details/37502601