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. win10+asp+access 父路径开启无效

    如题: 在win10环境下,布署asp+access,发现在用到"../website/"时就出错,提示不能使用父路径 可是我在IIS 的asp中明明打开了父路径的 如下 但是偏偏 ...

  2. 【干货】JavaScript DOM编程艺术学习笔记4-6

    四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("h ...

  3. 菜鸟 学注册机编写之 “sha1”

    1. 首先运行程序随便输入用户与注册码如下图所示: 2.将程序载入OD, 下MessageBoxA函数断点, F9运行程序, 程序运行后随便输入用户名与注册码,点"OK"后断下,F ...

  4. 新版graylog2安装过程

    Graylog是一个开源的 log 收容器,背后的储存是搭配 mongodb,而搜寻引擎则由 elasticsearch 提供.以前版本主要有两个部分集合而成 server 与 web interfa ...

  5. LeetCode Nim Game （简单nim）

    题意: 有一堆石子,里面有n个石头,每次可以从中取出1~3个,两人轮流取,最后一个石子被谁取走即为赢家.你先取,问最后谁赢? 思路: n%4>0则先手赢,因为每次总是可以给对方留4个石子的倍数, ...

  6. LeetCode Find Peak Element 找临时最大值

    Status: AcceptedRuntime: 9 ms 题意:给一个数组,用Vector容器装的,要求找到一个临时最高点,可以假设有num[-1]和num[n]两个元素,都是无穷小,那么当只有一个 ...

  7. LeetCode ZigZag Conversion（将字符串排成z字型）

    class Solution { public: string convert(string s, int nRows) { string a=""; int len=s.leng ...

  8. 梦织未来Windows驱动编程 第04课 驱动相关的数据结构

  9. Linux下bash的快捷键

    Ctrl + A  :切换到命令行开始 Ctrl + E :切换到命令行末尾 Ctrl + L : 清屏,相当于clear Ctrl + U :清除剪切光标前的内容 Ctrl + K :剪切清除光标后 ...

  10. 【BZOJ2809】[APIO2012] dispatching（左偏树例题）

    点此看题面 大致题意: 有\(N\)名忍者,每名忍者有三个属性:上司\(B_i\),薪水\(C_i\)和领导力\(L_i\).你要选择一个忍者作为管理者,然后在所有被他管理的忍者中选择若干名忍者,使薪 ...