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.如何获取到指定面板的指定属性

<!DOCTYPE html>

<html>

  <head>

    <title>layout.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; 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>

   <link rel="stylesheet" href="../easyui/themes/default/easyui.css" type="text/css"></link>

   <link rel="stylesheet" href="../easyui/themes/icon.css" type="text/css"></link>

    <script type="text/javascript">

        $(function(){

        });

        function getCenterPanel(){

            var centerPanel=$("#cc").layout('panel','center');//使用panel方法，获取指定的区域如center，或north等。这样就获取到了center面板

            console.info(centerPanel);

            console.info(centerPanel.panel('options'));//获取到选项（options）属性（property）

            console.info(centerPanel.panel('options').title);//获取属性里面的title

        }

    </script>

  </head>

  <body class="easyui-layout" id="cc">

    <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;">

        <input type="button" value="获取center面板" onclick="getCenterPanel()"/>

    </div>

</body>

</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. [转]linux远程登入不需要密码

    如何通过一台linux ssh远程其他linux服务器时,不要输入密码,可以自动登入.提高远程效率,不用记忆各台服务器的密码. 工具/原料   ssh,ssh-keygen,scp 方法/步骤     ...

  2. Android compress 压缩 会不会失真

    微信的缩略图要求是不大于32k,这就需要对我的图片进行压缩.试了几种方法,一一道来. 代码如下 ByteArrayOutputStream baos = new ByteArrayOutputStre ...

  3. Android studio 配置忽略

    直接在Ignored Files选项里点击+号,在弹出的对话框选择第二项,然后依次输入上面包含的 .gradle .idea build 三个文件夹目录,再选择第一项,找到local.properti ...

  4. SQLSERVER 创建ODBC 报错的解决办法 SQLState:'01000'的解决方案

    错误详情如下: SQLState:'01000' SQL Server 错误:14 [Microsoft][ODBC SQL Server Driver][DBNETLIB] ConnectionOp ...

  5. SAP云平台运行环境Cloud Foundry和Neo的区别

    SAP云平台提供了两套运行环境:Cloud Foundry和Neo 从下图能发现,Cloud Foundry的运行环境,基础设施由第三方公司提供,比如Amazon亚马逊和Microsoft微软,SAP ...

  6. World Wind Java开发之七——读取本地栅格文件（影像+高程）构建三维场景（转）

    http://blog.csdn.net/giser_whu/article/details/41679515 首先,看下本篇博客要达到的效果图: 下面逐步分析如何加载影像及高程文件. 1.World ...

  7. POJ 3666 Making the Grade（区间dp）

    修改序列变成非递减序列,使得目标函数最小.(这题数据有问题,只要求非递减 从左往右考虑,当前a[i]≥前一个数的取值,当固定前一个数的取值的时候我们希望前面操作的花费尽量小. 所以状态可以定义为dp[ ...

  8. python_70_内置函数2

    #hex() 转16进制 oct()转8进制 print(hex(255)) print(oct(10)) #id() 返回内存地址 print(id('a')) ''' isinstance(obj ...

  9. Mybatis自查询递归查找子

    先看一下数据库 主键id,名称product_code,父parent,和kind 设计菜单类 setter,getter Dao public interface ProductMapper { L ...

  10. MyISAM 和 InnoDB 的区别与优化

    MyISAM 和 InnoDB 的基本区别 1.InnoDB不支持FULLTEXT类型的索引. 2.InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from tabl ...