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. 《敏捷软件开发：原则、模式与实践（C#版）》源代码下载

    Agile Software Development: Principles, Patterns and Practice (C# Edition)  Source Code 这本书的经典性无需多言 ...

  2. echarts使用中的那些事儿（一）

    近来由于有几个小项目要用到echarts里的一些图,不得不使用,可是要完全按照自己的意愿来,要对它有些了解,要翻阅资料,遂有以下小结: 1.最开始第一步是把数据调出来就行,能在图上显示就成,以下是最开 ...

  3. JavaWeb中五种转发方式（转）

    今天本来是想找一下在jsp中实现转发的方式的,无意中看到了一篇文章,然后稍微综合了把服务器端的转发也包括在内.   1. RequestDispatcher.forward() 是在服务器端起作用,当 ...

  4. 爬虫系统-日志、初始化url

    1.日志log4j 1.1.DEBUG:debug级别 1.2.stdout:输出到控制台 1.3.D:输出到文件 log4j.rootLogger=DEBUG, stdout,D #Console ...

  5. C基础的练习集及测试答案(提高题)

    提高题:1.编写程序,随机生成一个1~10内的数,让对方猜3次.如果3次内能猜中则输出“恭喜你”:若3次内猜不中则输出正确答案.C语言中提供生成随机数的函数rand()用法:①所需头文件:#inclu ...

  6. pta 编程题16 Saving James Bond - Easy Version

    其它pta数据结构编程题请参见:pta 题目 主要用到了深度优先搜索. #include <iostream> using namespace std; struct Vertex { i ...

  7. 一、Web 如何工作的

    平常我们在浏览器中输入一个网址,随即看到一个页面,这个过程是怎样实现的呢?下面用一幅图来说明: 整个流程如下: 1.域名解析  浏览器会解析域名对应的IP地址 PS:DNS服务器的知识 2.建立TCP ...

  8. Being a Good Boy in Spring Festival(博弈)

    Being a Good Boy in Spring Festival Problem Description一年在外 父母时刻牵挂春节回家 你能做几天好孩子吗寒假里尝试做做下面的事情吧 陪妈妈逛一次 ...

  9. lsscsi 与 cat /proc/scsi/scsi

    [root@localhost ~]# lsscsi[0:0:0:0]    disk    SEAGATE  ST300MM0048      N001  /dev/sda [0:0:2:0]    ...

  10. for循环和数组练习

    //公鸡2文,母鸡1文,小鸡半文,每种至少一只,100文买100只鸡有多少种可能 var ci =0; for(var g=1;g<50;g++){ for(var m=1;m<100;m ...