EasyUI入门—Layout布局

最新推荐文章于 2024-04-08 13:00:00 发布
最新推荐文章于 2024-04-08 13:00:00 发布
阅读量494 收藏
点赞数
文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60786293/article/details/124573144
版权
EasyUI是一个基于jQuery的前端框架，以其丰富的组件、稳定的性能和完整的文档受到开发者欢迎。学习EasyUI，只需导入相关资源文件，如easyui.css和jquery.easyui.min.js。在布局方面，EasyUI提供了灵活的Layout功能，支持北、南、东、西和中间五个区域，允许用户通过拖拽和折叠操作调整布局。例如，通过data-options属性设置，可以创建包含多个区域的复杂布局结构。
摘要由CSDN通过智能技术生成

EasyUI的优点：学习文档完整，前端框架稳定，组件丰富

EasyUI每个组件的属性，方法和事件。用户可以很容易地扩展他们。

第一步：下载jquery-easyui-1.5.1文件并导包

  1. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
  2. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
  3. <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
  4. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

第二步：了解布局Layout

使用$.fn.layout.defaults重写默认值对象。

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

布局代码：

  1. <body class="easyui-layout">  
  2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
  3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
  4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
  5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
  6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
  7. </body>  

 

WoeN.May.11
关注
easyui入门视频
09-05
首先，EasyUI 提供了一系列预先设计的组件，包括但不限于布局（Layout）、表格（Grid）、菜单（Menu）、对话框（Dialog）、表单（Form）、按钮（Button）等，这些组件使得开发者无需从零开始创建页面元素，极大地...
jQueryEasyUI入门共2页.pdf.zip
10-30
这份名为“jQueryEasyUI入门共2页.pdf”的资料可能是一个简短的教程，虽然只有两页，但仍然可以涵盖一些基本概念和快速入门的指导。 首先，jQuery EasyUI 的核心是 jQuery，一个轻量级的JavaScript库，它简化了DOM...
EasyUI Jquery 学习笔记 —— Layout（布局）详细版
最新发布
cccloveforever的博客
04-08 1521
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
easyUI 布局
小半的博客
05-15 230
easyUI 布局 　　 Layout（布局） 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。 每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 在api文档中，有两种方法渲染 <bodyclass="easyui-layout...
EasyUI(搭建框架&layout布局)
weixin_56996467的博客
04-05 2402
目录 一、介绍 二、需要的工具 三、搭建框架 四、layout布局 五、总结 一、介绍 easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的
easyUI layout布局
chenqk_123的专栏
10-30 1240
1.layout布局 layout在所有项目中都是至关重要的，layout直接影响到用户的使用习惯和使用心情。如果布局合理，用户会欣然接受，反之用户就会非常的反感。 layout的设计一般都是由产品经理根据用户习惯设计出来，然后交给我们开发页面。当然页面的变化多端，我们这里只简单讲解一下easyUI的一般布局。 1.1 layout布局划分    在上面一篇博客中我们讲到了一个简单
EasyUI -- Layout（布局）
师旭阳_码农日记
07-09 5831
第一章  介绍                    EasyUI -- Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小，也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的，可以根据用户的需求
easyUI快速入门第二讲——easyUI中的layout（布局）组件
李阿昀的博客
10-29 1058
layout（布局）组件的概述 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 layout（布局）组件的使用 在所在项目的WebContent目录下新建一个02-layout目录，并在该目录下新建一个02-layout...
【EasyUI】入门之布局
全栈
05-04 1414
目录 第一节EasyUI的介绍和常用组件 第二节 EasyUI的组件使用 第一节EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。...
easyui入门
weixin_67780833的博客
05-04 2370
​ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、easyui布局 先创建一个static文件，然后里面css、images、js文件。 把jquery-easyui-1.5.1文件复制到js文件中。 二、easyui使用步骤 1.新建一个页面引入下面四行代码至新建的页面 代码如下（示例）： ...
EasyUI Layout 布局
dianyanxia的博客
03-13 410
记录整理笔记 2019/3/13 在设置布局的时候 要概括一个div进去 div(class="easyui-layout")然后才可以布置north south 等 另外在data-options中设置属性 region:' north' 要加单引号 不然汇报错误 split:true 设置各个布局之间的间隙差距 同样可以在data-options中设置 title样式 s...
【EasyUI之Layout(布局)】
旺旺的博客
06-11 1375
目录前言Layout之panel(面板)Layout之树形tree(目录栏)Layout之tabs(选项卡)Layout之accordion(分类)总结 前言 今天要给大家带来的是EasyUI 嘛，之前也说了下EasyUI，其实现在的EasyUI已经用不上了，因为现在普遍的在用bootstrap啊，或者lunex等。 easyui=jquery+html4（用来做后台的管理界面） bootstra...
easyui---layout布局
weixin_34175509的博客
10-27 112
<div id="cc" class="easyui-layout" fit=true> //加上fit属性就会自适应父类的大小，整个浏览器 <div region="north" title="North Title" split="false" style="height:100px;"></div> //region是方位，就代码中...
二、easyUI中的layout（布局）组件
weixin_44230693的博客
05-16 1177
二、easyUI中的layout（布局）组件
easyui---layout(布局)
weixin_34344677的博客
03-08 248
layout(布局) class:class="easyui-layout"//可以直接在body上加,全布局 基础布局: <div id="cc" class="easyui-layout" style="width:700px;height:350px;"> 　　<!--title="north"加入title可收缩--> 　　<div data...
easyui-layout
qingweiduzhong的专栏
12-15 257
index.jsp 管理系统 FrameTop.jsp 管理系统 ...
easyUI中的layout
懒人的博客
08-04 3952
Layout 通过$.fn.layout.defaults可以重写Layout. layout是一个具有五个区域的容器。只有中间区域面板是必须的，其余的都是边界面板。每一个边界面板都可以通过拖动它的边界来改变尺寸，还可以通过面板上的收缩\展开按钮来收缩或者展开面板。另外，layout还可以嵌套，因此我们可以用它来创建一个复杂的layout。 依赖 panelresi
EasyUI——Layout（布局）
weixin_45492425的博客
12-04 517
EasyUI——Layout（布局） 使用$.fn.layout.defaults重写默认值对象。 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 依赖关系 panel resizable 使用案例 创建布局 通过标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值