JQuery EasyUI(12)

最新推荐文章于 2022-11-19 17:11:20 发布
最新推荐文章于 2022-11-19 17:11:20 发布
阅读量175 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                           第十二章：Layout（布局）组件

学习要点：

  1. 加载方式
  2. 布局属性
  3. 区域面板属性
  4. 方法列表

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" class="easyui-layout" style="width:600px;height:400px;">
      <div data-options="region:'north',title:'上北'" style="height:100px;"></div>
      <div data-options="region:'south',title:'下南'" style="height:100px;"></div>
      <div data-options="region:'west',title:'左西'" style="width:100px;"></div>
      <div data-options="region:'east',title:'右东'" style="width:100px;"></div>
      <div data-options="region:'center',title:'中间'"></div>
    </div>
 </body>
</html>

2.JS调用：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" style="width:600px;height:400px;">
      <div data-options="region:'north',title:'上北'" style="height:100px;"></div>
      <div data-options="region:'south',title:'下南'" style="height:100px;"></div>
      <div data-options="region:'west',title:'左西'" style="width:100px;"></div>
      <div data-options="region:'east',title:'右东'" style="width:100px;"></div>
      <div data-options="region:'center',title:'中间'"></div>
    </div>
 </body>
</html>
 

$(function(){

  $('#box').layout({
     
  });
});

 

二、布局属性：

Layout布局属性
属性名值说明
fitboolean如果设置为true，布局组件将自适应父容器。当使用body标签创建布局的时候，整一个页面会自动最大。默认为false。
​
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" style="width:600px;height:400px;">
      <div data-options="region:'north',title:'上北'" style="height:100px;"></div>
      <div data-options="region:'south',title:'下南'" style="height:100px;"></div>
      <div data-options="region:'west',title:'左西'" style="width:100px;"></div>
      <div data-options="region:'east',title:'右东'" style="width:100px;"></div>
      <div data-options="region:'center',title:'中间'"></div>
    </div>
 </body>
</html>
$(function(){

  $('#box').layout({
     fit:true,
  });
});

 

三、区域面板属性：

区域面板属性定义与panel组件类型，下面是公共和新增的属性：

Layout区域面板属性
属性名值说明
titlestring布局面板标题文本。默认值null。
regionstring定义布局面板位置，可用的值有：north，south，east，west，center。默认值为空。
borderboolean为true时显示布局面板边框，默认值为true。
splitboolean为true时用户可以通过分割栏改变面板大小。默认值为false
iconClsstring一个包含图标的CSS类ID，该图标将会显示到面板标题上。默认值为null。
hrefstring用于读取远程数据的URL链接，默认值为null。
collapsibleboolean定义是否显示折叠按钮，默认值为true。
minWidthnumber最小面板宽度，默认值为10。
minHeightnumber最小面板高度，默认值为10。
maxWidthnumber最大面板宽度，默认值为10000。
maxHeightnumber最大面板高度，默认值为10000。

 

 四、方法列表：

Layout方法
方法名参数说明
resizenone设置布局大小。
panelregion返回指定面板，'region'参数可用值有：'north','south','east','west','center'。
collapseregion折叠指定面板，'region'参数可用值有：'north','south','east','west','center'。
expandregion展开指定面板，'region'参数可用值有：'north','south','east','west','center'。
addoptions添加指定面板，属性参数是一个配置对象，更多细节请查看选项卡面板属性。
removeregion移除指定面板，'region'参数可用值有：'north','south','east','west','center'。

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

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" style="width:600px;height:400px;">
      <div data-options="
          region:'north',
          title:'上北',
          border:true,
          split:true,
          iconCls:'icon-save',
          href:'content.xml',
          collapsible:false,
          maxHeight:50,
       " style="height:100px;"></div>
      <div data-options="region:'south',title:'下南',split:true," style="height:100px;"></div>
      <div data-options="region:'west',title:'左西',split:true," style="width:100px;"></div>
      <div data-options="region:'east',title:'右东',split:true," style="width:100px;"></div>
      <!-- <div data-options="region:'center',title:'中间'"></div> -->
    </div>
 </body>
</html>
​$(function(){

  $('#box').layout({
     fit:true,
  }).css('display','none');

  /*
  $(decument).click(function(){
      $('#box').layout().css('display','block');
      $('#box').layout('resize');
  });
 */

  //console.log($('#box').layout('panel','north'));
  //console.log($('#box').layout('collapse','north'));
  //console.log($('#box').layout('expand','north'));

  /*
    $('#box').layout('add',{
         title:'中间',
         region:'center',
     }); 
 */
    $('#box').layout('remove','east');
});

 

 

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102928135

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

 

jQuery EasyUI快速入门01
jh9758的博客
05-04 280
一、jQuery EasyUI框架概述 1、什么是jQuery EasyUI? JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架 2、 jQuery Easy的作用 既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。 3、EasyUI的目录说明 ① 下载路径 ...
jQuery EasyUI 扩展
lly202406的博客
03-13 400
自定义组件是扩展 jQuery EasyUI 的常用方法之一。通过自定义组件，可以创建具有特定功能的 UI 控件，以满足项目需求。// 组件初始化代码});// 默认参数通过扩展 jQuery EasyUI 的弹出框组件，可以创建具有自定义样式的弹出框。text: '确定',// 确定按钮点击事件}, {text: '取消',// 取消按钮点击事件}]});});});jQuery EasyUI 是一个功能强大的 UI 库，通过扩展可以满足各种场景下的需求。
EasyUI基础
qq_33217540的博客
04-17 688
EasyUI 1.EasyUI是前端框架； 2.前端框架； 2.1封装大量css; 2.2封装大量js; 3.使用前端框架； 3.1给标签class属性； 4.EasyUI中需要注意的地方； 4.1data-options属性定义EasyUI属性的； 4.2如果EasyUI提供的属性和HTML标签属性相同，可以把这个属性不写在data-options; 4.3每一个效果使用纯标签方式和使用标签结合...
easyui datagrid设置行高 收集一些方法
狼魂之力
08-12 4357
zzz
easyui datagrid设置自由高度
chenzhh1987的专栏
03-24 2520
1.fitColumns:true 2.target.datagrid("resize");
ASP.NET结合EasyUI实现界面布局
HerryDong的博客
05-05 3643
使用EasyUI也有一段时间了，现在总结一下其其界面布局。首先EasyUI仿照ExtJS，将整个页面区域划分成了东(east)、南(south)、西(west)、北(north)、中(center)五个区域，在布局时center区域必须出现，其他区域随意。在VS中可通过NuGET引用EasyUI的相关文件. <!DOCTYPE html> <html> <head&g...
JQuery EasyUI
m0_61916351的博客
11-19 679
JQuery EasyUI简单应用
jQuery EasyUI
jongsuk_sun的博客
07-01 280
事例文档：http://www.92ui.net/ easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。 一，布局： 将系统页面分成5各部分完成布局，分别是north，east，south，west，center 参考：https://blog...
jQuery EasyUI详解-EasyUI环境配置
G11176593的博客
11-12 419
点击Freeware Edition下面的Download下载即可（猫哥下载的是1.5.1版本，以此版本为准进行演示，说实话我也没用过1.5.1，之前用的还是老版本的，不过程序员要一直更新自己的知识库，千万不要执着于熟悉的旧版，要争当时代的弄潮儿，哈哈哈）。第六步，好了，终于可以开始使用easyui了，打开默认的index.jsp文件，编辑如下，一定要注意的是，引用了这四个文件，我们就可以畅快的使用EasyUI了。第二步，解压后，新建文件夹easyui，将压缩包在easyui文件夹下解压。
jQuery EasyUI 1.9.4 中文帮助文档　离线chm
04-19
这是一套关于jQuery EasyUI的中文帮助文档，在线帮助文档 进行整理，生成chm文件，便于开发时或者离线对jquery easyi控 件的属性、文法、事件等内容的查看。 jQuery EasyUI 版本1.9.4。文档为chm格式，方便开发...
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
jQuery EasyUI的api
05-09
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
jQuery EasyUI 1.3.6 离线简体中文API文档
04-12
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
jQuery EasyUI 1.9.4 chm文档
03-07
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
JQuery easyui的等待效果
jackson61的博客
11-09 472
不过我还是觉得如果可以在平时收集一些比较好的这些代码，或者写出来一些（借鉴一下别人的也未尝不可），要用的时候稍作修改即可派上用场，相信这样不用插件也可以做出一个比较好的界面，总之我是对插件神马的持否认态度的。
字体-msjh~~~~~~~~~~~~~~~~~~~
最新发布
06-16
字体_msjh~~~~~~~~~~~~~~~~~~~
jQuery EasyUI 1.3.2 实例详解
标题“jquery-easyui-1.3.2”指向的是一个特定版本的前端开发框架jQuery EasyUI的版本号。jQuery EasyUI是一个基于jQuery的UI库，它提供了多种预先设计好的界面组件，帮助开发者快速构建交互式和友好的网页应用界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值