1.浏览器自适应（即浏览器改变大小，里面的表格大小也会随之改变）要设置两个参数

（1）一般都要在body上设置class=“easyui-layout”；

<body class="easyui-layout">

</body>

（2）如果是datagrid，要给其设置fit:true。

2.layout的href属性，该属性指引入目标页里面html的body代码，如果javascript不在body里面则不执行

目标页center.html里面可以直接写代码，如下图

3.如何获取到指定面板的指定属性

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>layout.html</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  11.     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  12.     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  13.  
  14.    <link rel="stylesheet" href="../easyui/themes/default/easyui.css" type="text/css"></link>
  15.    <link rel="stylesheet" href="../easyui/themes/icon.css" type="text/css"></link>
  16.     <script type="text/javascript">
  17.         $(function(){
  18.  
  19.         });
  20.         function getCenterPanel(){
  21.             var centerPanel=$("#cc").layout('panel','center');//使用panel方法，获取指定的区域如center，或north等。这样就获取到了center面板
  22.             console.info(centerPanel);
  23.             console.info(centerPanel.panel('options'));//获取到选项（options）属性（property）
  24.             console.info(centerPanel.panel('options').title);//获取属性里面的title
  25.  
  26.         }
  27.     </script>
  28.   </head>
  29.  
  30.   <body class="easyui-layout" id="cc">
  31.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  32.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  33.     <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
  34.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  35.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
  36.         <input type="button" value="获取center面板" onclick="getCenterPanel()"/>
  37.     </div>
  38. </body>
  39. </html>

easyui的layout的更多相关文章

  1. Easyui 生成layout

    Easyui 生成layout var $tabs; var $body; var $south; function appendLayout(title, href) { if (!$body) $ ...

  2. 经历：easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  3. CI 笔记3 （easyui 的layout布局，最小化layout原型）

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  4. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  5. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  6. jQuery EasyUI API - Layout - Layout[原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  7. java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs

    1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...

  8. easyui Full Layout

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  9. easyUI之Layout（布局）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. 微信小程序时间处理问题

    环境: 开发环境: 1. Mac OS 10.12.5 2. 微信Web开发者工具 v0.18.182200 测试环境: 1. iPhone 7 2. iOS 10.3.2 3. 微信 6.5.9 问 ...

  2. 在ActionBar中，即便设置showAsAction="always"，items仍然在overflow中显示的问题

    今天很是苦恼,明明设置了android:showAsAction="always",但是所有的items全部都显示在overflow中,然后在官网发现了答案. 如果你为了兼容 An ...

  3. sublimetext3安装配置

    官网:http://www.sublimetext.com/ 中文官网:http://www.sublimetextcn.com/ 包管理器:https://packagecontrol.io/ins ...

  4. 杭电acm刷题顺序

    最近兴趣来了,闲暇之余,回顾大学期间刷过的杭电acm那些入门级别的题,以此巩固基础知识! 以下参考刷题顺序,避免入坑 原文传送门:https://blog.csdn.net/liuqiyao_01/a ...

  5. ASP.NET MVC 长连接（服务器推）完整实现

    1.什么是"服务器推"(百科来一波)? 传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.这种方式并不能满足很多现实应用的需求,譬如: 监控系统:后台硬件热插拔.L ...

  6. javascript:理解try...catch...finally

    以前,我一直喜欢用console.log(do some thing)去执行输出的类型和值,想马上看到弹出的信息,就会直接在浏览器alert()一下,这些是基础知识. 稍微复杂一点点,就要用到判断语句 ...

  7. 【BZOJ4327】[JSOI2012] 玄武密码（AC自动机的小应用）

    点此看题面 大致题意: 给你一个长度为\(len\)的文本串和\(n\)个模式串,让你求出每一个模式串的前缀与文本串的最大匹配串长度(其中模式串和文本串都只由字符'E','S','W','N'组成). ...

  8. Problem A: 李白打酒

    Problem A: 李白打酒 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 825  Solved: 373[Submit][Status][Web ...

  9. PAT (Advanced Level) Practise - 1094. The Largest Generation (25)

    http://www.patest.cn/contests/pat-a-practise/1094 A family hierarchy is usually presented by a pedig ...

  10. java对集合的操作，jxl操作excel

    http://www.cnblogs.com/epeter/p/5648026.html http://blog.sina.com.cn/s/blog_6145ed810100vbsj.html