介绍easyui的使用,主要包括以下组件

布局面板 - layout

可伸缩面板 - accordion

选项卡 - tabs

控制面板 - panel

窗口 - window

对话框 - dialog

消息窗口 - messager

数据表格 - datagrid

分页 - pagination

树型菜单 - tree

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');
}
});

EasyUI项目学习的更多相关文章

  1. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  2. 转:从开源项目学习 C 语言基本的编码规则

    从开源项目学习 C 语言基本的编码规则 每个项目都有自己的风格指南:一组有关怎样为那个项目编码约定.一些经理选择基本的编码规则,另一些经理则更偏好非常高级的规则,对许多项目而言则没有特定的编码规则,项 ...

  3. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  4. PHP项目学习——控件

    主要是在项目学习中总结的一些东西 动态效果 flashbar滚动条,增加动态效果,直接嵌入html中 <!--flash滚动条--> <object classid="cl ...

  5. PHP项目学习2

    通过<PHP项目学习1>基本上可以了解项目的大致结构.内容,现在直接从代码入手,开始coding吧. 现在部署环境中建立一个myonline的文件夹,便于放置我们的项目

  6. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

  7. Spring Boot 项目学习 (三) Spring Boot + Redis 搭建

    0 引言 本文主要介绍 Spring Boot 中 Redis 的配置和基本使用. 1 配置 Redis 1. 修改pom.xml,添加Redis依赖 <!-- Spring Boot Redi ...

  8. Spring Boot 项目学习 (一) 项目搭建

    0 引言 本文主要记录借用Idea 开发环境下,搭建 Spring Boot 项目框架的过程. 1 系列文档目录 Spring Boot 项目学习 (一) 项目搭建 Spring Boot 项目学习 ...

  9. Spring Boot 项目学习 (二) MySql + MyBatis 注解 + 分页控件 配置

    0 引言 本文主要在Spring Boot 基础项目的基础上,添加 Mysql .MyBatis(注解方式)与 分页控件 的配置,用于协助完成数据库操作. 1 创建数据表 这个过程就暂时省略了. 2 ...

随机推荐

  1. 阿里巴巴Android开发手册(规约)

    阿里巴巴Android开发手册(规约) 学习了:https://www.cnblogs.com/jb2011/p/8487889.html  这个猛 https://blog.csdn.net/ali ...

  2. (剑指Offer)面试题37:两个链表的第一个公共结点

    题目: 输入两个链表,找出它们的第一个公共结点. 链表结点的定义如下: struct ListNode{ int val; ListNode* next; ListNode(int x):val(x) ...

  3. maven install时报错Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test

    事故现场: 解决办法: 一是命令行, mvn clean package -Dmaven.test.skip=true 二是写入pom文件, <plugin> <groupId> ...

  4. 下载论坛源码GBK UTF8 BIG5分别是什么意思

    下载论坛源码GBK UTF8 BIG5分别是什么意思? 提问者:ly1987520 | 浏览次数:4010次 下载论坛源码简体中文GBK 简体中文UTF8 繁体中文BIG5 分别是什么意思?他们的区别 ...

  5. Android秒级编译工具Freeline

    Freeline 是 Android 平台上的秒级编译方案,Instant Run 的替代品,由蚂蚁聚宝Android 团队开发,它可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设 ...

  6. 【转】maven常见问题问答

    转自:http://www.iteye.com/topic/973166 前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必 ...

  7. Unity 3d导入3dMax模型 产生若干问题

    Unity 3d导入3dMax模型 会产生若干问题,按照官方 的说明,将max 模型导成fbx文件 导入untiy似乎也不能解决 1.x轴向偏转3dmax模型导入后自动有一个x轴270度的偏转,巧合的 ...

  8. 解决树莓派新内核无法使用18B20和没有声音的问题

    现在新版的树莓派内核由于为了兼容树莓派2和树莓派B+等以前的版本,采用了和原来不同的内核运行方式,使用了设备树的方式,更加灵活.但是由于可能不习惯这样的方式以及没太多相关这方面的介绍,导致很多用户更新 ...

  9. linux route命令使用

    说明:route命令是打印和操作ip路由表描述:route操作基于内核ip路由表,它的主要作用是创建一个静态路由让指定一个主 机或者一个网络通过一个网络接口,如eth0.当使用"add&qu ...

  10. 学会Git玩转Github笔记(一)——Github基本概念 & 仓库管理

    一.github基本概念 使用目的:借助GitHub托管项目代码 1.仓库(Respository) 2.收藏(Star) 3.复制克隆项目(Fork) :分叉—你开源了一个项目,别人想在你这个项目基 ...