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="width: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="width:100px;"></div>
    <div data-options="region:‘west‘,title:‘West‘,split:true" style="width: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="width: 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)

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

每个选项卡面板的标题和一些迷你按钮的工具,包括关闭按钮和其他定制按钮。

<div id="tt" class="easyui-tabs" style="width: 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="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>

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

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

一个窗口可以移动,调整大小和关闭。无论是作为静态HTML或通过AJAX动态加载其内容也可以被定义。

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

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

该对话框是一种特殊类型的窗口,它可以有一个工具栏上的顶部和底部的按钮栏。该对话框只有一个头默认情况下,显示在右上角的关

闭工具。

<div id="dd" class="easyui-dialog" title="My Dialog"
	style="width: 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

EasyUI项目驱动学习

时间: 2024-10-10 13:33:52

EasyUI项目驱动学习的相关文章

C语言零基础项目驱动式学习第四天

//类型修饰符  数组名[数组元素个数] = {初始化}; //定义数组的时候[]中必须是常量表达式, 不可以是变量; /* int age[5] = {21, 18, 25, 20, 18}; int array[10] = {0};//代表数组中有10个元素, 每个都是0; int array1[8] = {1};//代表数组中有8个元素,第一个是1,其余的为0; int age2[2 + 3] = {0}; */ //定义数组和使用数组的最大区别是, 前面是否有类型修饰符 //使用数组元素

C语言零基础项目驱动式学习第二天

//BOOL 类型是一种非真即假的数据类型,取值只有YES和NO, //BOOL 其实是OC中得数据类型,在C语言中,认为非0即为真. //BOOL 类型规定的存储空间为一个字节. //    BOOL a = YES; //    BOOL b = NO; //    printf("a = %d, b = %d\n", a, b); //    int a = 15, b = 18; //    BOOL c = a > b; //    printf("c = %

C语言零基础项目驱动式学习第三天

一 while循环二do   while循环三 for循环for循环的执行顺序用如下表达式: for(expression1;expression2;expression3)        循环变量初值; 循环条件; 循环变量增量  {                expression4; }       执行的顺序应该是: 1)第一次循环,即初始化循环.      首先执行表达式expression1(一般为初始化语句):再执行expression2(一般为条件判断语句),判断express

C语言零基础项目驱动式学习第一天

引言: 智能手机(Smart Phone)是一种运算能力及功能比传统手机更强的手机.目前的操作系统基本上有以下几种: 1. Symbian Os 众所周知塞班隶属于NOKIA,Symbian开发之初的目标是保证在较低资源的设备上能长时间的运行,这导致了塞班的应用程序开发有着较为陡峭的学习路线,开发成本高,但是程序的运行的效率很高> 2.Android 开源, 联盟,Android凝聚了几乎遍布全球的力量,这是Android形象及声音能够被传到全球移动互联网市场每一个角落的根本原因.不过, 1).

写作驱动学习

写作驱动学习 在软件开发领域有这样的几个名词 BDD.测试驱动开发(Test-driven development)是极限编程中倡导的程序开发方法,以其倡导先写测试程序,然后编码实现其功能得名 TDD.行为驱动开发(Behavior-Driven Development)是一种敏捷软件开发的技术,它鼓励软件项目中的开发者.QA和非技术人员或商业参与者之间的协作. DDD.领域驱动设计(Domain-Driven Design)的一个核心的原则是使用一种基于模型的语言. 而最近我处在于一个尴尬的位

编写驱动学习

写作驱动学习 在软件开发领域有这种几个名词 TDD.測试驱动开发(Test-driven development)是极限编程中倡导的程序开发方法,以其倡导先写測试程序.然后编码实现其功能得名 BDD.行为驱动开发(Behavior-Driven Development)是一种敏捷软件开发的技术,它鼓舞软件项目中的开发人员.QA和非技术人员或商业參与者之间的协作. DDD.领域驱动设计(Domain-Driven Design)的一个核心的原则是使用一种基于模型的语言. 而近期我处在于一个尴尬的位

Linux驱动学习之TQ2440 DM9000E网卡驱动移植(Linux-2.6.30.4)

引言 在之前的文章中,我们介绍了如何使用Scala IDE也就是eclipse中集成的Scala开发插件来进行Scala语言程序的开发,在使用了一段时间之后,发现eclipse对Scala的支持并不是很好.用户体验比较差,比如联想速度比较慢等.由于在公司一直使用的Scala开发工具是Intellij IDEA(好吧,其实我使用Scala IDE的目的就是想试一下这两个各有什么优缺点),各方面感觉还不错,所以在此介绍一下这个开发环境. Intellij IDEA是jetbrain开发的一个IDE,

linux 驱动学习笔记01--Linux 内核的编译

由于用的学习材料是<linux设备驱动开发详解(第二版)>,所以linux驱动学习笔记大部分文字描述来自于这本书,学习笔记系列用于自己学习理解的一种查阅和复习方式. #make config(基于文本的最为传统的配置界面,不推荐使用)#make menuconfig(基于文本菜单的配置界面)#make xconfig(要求 QT 被安装)#make gconfig(要求 GTK+被安装)在配置 Linux 2.6 内核所使用的 make config. make menuconfig. mak

某智能家居项目框架学习总结

这个月来第一篇博客,各种其他事情.. 之前负责过一个智能家居项目的二次开发,苏州一家公司做的,项目还是分了好几个系统,对业务流程的不同部分进行了划分,我是此项目的主要负责人,通过老师的指导,对这个项目也有了一些了解.此项目运用了一些框架,有些也是我第一次接触到的,下面将对项目用到的一些框架进行总结. 下面可能会出现几个有关智能家居的名词,介绍一下 1.机顶盒:每一个家庭都应该至少有一个机顶盒,控制电器开关都是由机顶盒向各电器的接收器发送命令 2.客户端:也就是用户的移动设备,手机.平板都可以,我