关闭

jQuery EasyUI中的Layout布局

标签: jqueryeasyui布局
265人阅读 评论(0) 收藏 举报
分类:

1).Panel(面板)
面板提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
1.通过标签创建面板
这里写图片描述
效果图如下:
这里写图片描述
2.创建面板程序
创建工具栏
这里写图片描述
创建内容区域
这里写图片描述
面板控制基本属性值
这里写图片描述
面板的基本方法
这里写图片描述
面板的基本事件
这里写图片描述
2).Tabs(选项卡)
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。(效果图如下)
这里写图片描述
使用div标签创建选项卡面板
这里写图片描述
选项卡基本属性
这里写图片描述
这里写图片描述
选项卡的基本事件
这里写图片描述
选项卡的基本方法
这里写图片描述
面版之间的公有属性。
这里写图片描述
3).Layout(布局)
布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
这里写图片描述

  1. 通过标签创建布局(添加class=”easyui-layout”)
    这里写图片描述
  2. 使用完整页面创建布局
    这里写图片描述
    layout 事件
    这里写图片描述
    layout 属性
    这里写图片描述
    4).Accordion(分类)
    分类空间允许用户使用多面板,但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的’href’属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的。(效果图)
    这里写图片描述
    1.通过标签创建分类,给div标签添加一个名为’easyui-accordion’的类ID。
    这里写图片描述
    好了,今天的学习就到这里了,大家要多多练习哦,如果有什么意见,欢迎大家联系我。
0
0
查看评论

认识Jquery easyui 使用Easyui-layout 布局

Jquery easyui 版本1.2.2 最后一个免费版本   这是框架需要引入的包在common_js.jsp中加载 script type="text/javascript" src="${baseurl}js/jquery-1.4....
  • u012373815
  • u012373815
  • 2015-10-28 09:32
  • 947

Jquery easy UI 上中下三栏布局

window.customResize = function () {             var width =&...
  • a497785609
  • a497785609
  • 2015-02-06 09:19
  • 5407

easyui之布局管理easyui-layout的使用

初学easyui,之前项目中也没使用过这个框架,但是和大多数框架
  • u011156938
  • u011156938
  • 2014-10-16 10:23
  • 1449

EasyUI之Layout布局

Layout布局,是按照上北,下南,左西右东,center居中的布局方式。主要属性:region设置布局的方向,style设置样式,title设置标题 依赖 panel resizable 用法示例 创建 Layout 经由标记创建 Layout 。添加 'easyui-layout&...
  • zhangchen124
  • zhangchen124
  • 2016-07-20 15:00
  • 2155

EasyUI -- Layout(布局)

第一章  介绍                    EasyUI -- Layout(布局)将布局容器分成了5个区域,分别是:east(东)、west(西)、south(南)、...
  • u010709596
  • u010709596
  • 2016-07-09 12:11
  • 1672

easyUI的基本搭建与layout布局

easyUI的开发包                       EasyUI...
  • u012814041
  • u012814041
  • 2013-12-02 12:29
  • 6877

EasyUI之布局Layout

1.布局样式 布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。如果设置高度,如果内容大于设置的高度则自动添加滚动条。 ...
  • ya_1249463314
  • ya_1249463314
  • 2017-04-08 10:53
  • 718

(札记)EasyUI Layout 布局管理

界面使用html的标签及css样式配合easyui编写 组件的动作使用jquery来控制 折叠面板: $('#cc').layout('collapse','west'); 代码的实现: jQuery EasyUI! ...
  • wzs298
  • wzs298
  • 2014-12-29 11:57
  • 2958

easyui-layout 布局自适应

最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问。其中一个就是datagrid不能很好的布。想了好多办法都有局限。最后想到会不会是布局的问题,经过实,最后问题解。 1:比如在项目中用到了datagrid。如果界面比较简单---只有一个datagrid只需要把它的属性fi...
  • china165
  • china165
  • 2014-11-10 12:21
  • 2316

前端框架 EasyUI (2)页面布局 Layout

在 Web 程序中,页面布局对应用程序的用户体验至关重要。   在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些功能选项的控件。比如下面这两个比较典型的例子:       Easy...
  • lenovouser
  • lenovouser
  • 2016-06-21 12:37
  • 826
    个人资料
    • 访问:1795次
    • 积分:95
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档