<!DOCTYPE html>

<html>

<head>

    <title>吹泡泡的魚-主页</title>

    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">

    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>添加、删除、折叠、展开布局</h2>

    <p>单击下面的按钮操作布局区域面板</p>

    <div style="margin:20px 0;">

        <span>选择区域面板:</span>

        <select id="region">

            <option value="north">North</option>

            <option value="south">South</option>

            <option value="east">East</option>

            <option value="west">West</option>

        </select>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">添加</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">删除</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseExpandPanel()">折叠/展开</a>

    </div>

    <div id="cc" class="easyui-layout" style="width:700px;height:350px;">

        <div data-options="region:'north'" style="height:50px"></div>

        <div data-options="region:'south',split:true" style="height:50px;"></div>

        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>

        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>

        <div data-options="region:'center',title:'Center'"></div>

    </div>

    <script type="text/javascript">

        function addPanel(){

            var region = $('#region').val();

            var options = {

                region: region

            };

            if (region=='north' || region=='south'){

                options.height = 50;

            } else {

                options.width = 100;

                options.split = true;

                options.title = $('#region option:selected').text();

            }

            $('#cc').layout('add', options);

        }

        function removePanel(){

            $('#cc').layout('remove', $('#region').val());

        }

        function collapseExpandPanel(){

            var p=$("#cc").layout("panel", $('#region').val())[0];

            if(p){

                p = p.clientWidth;

                if (p > 0){

                    //折叠

                    $('#cc').layout('collapse', $('#region').val());

                }else{

                    //展开

                    $('#cc').layout('expand', $('#region').val());

                }

            }else{

                alert("此区域面板不存在");

            }

        }

    </script>

</body>

</html>

EasyUI Layout 添加、删除、折叠、展开布局的更多相关文章

  1. easyui layout 左右面板折叠后 显示标题

    (function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'};    $.extend($.fn.l ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  4. easyUI layout

    layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的, 周边区域 ...

  5. Android 动态添加删除ExpandableListView的item的例子

    这个例子可以学习到如下几点: 1.通过自定义Dialog(单独布局的xml文件进行弹出显示) 2.通过menu点击监听添加,删除view中的items 3.点击ExpandableListView中g ...

  6. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  7. Angular-表单动态添加删除

    angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...

  8. easyui layout 收缩的bug

    easyui layout提供collapse方法折叠指定的 panel,'region' 参数可能的值是:'north'.'south'.'east'.'west',但是在 IE6的环境下,调用这个 ...

  9. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

随机推荐

  1. MacOS安装Go2Shell

    1 去官网下载安装MacOS最新版本 https://zipzapmac.com/Go2Shell 2 下一步下一步安装 3 设置 打开终端设置, open -a Go2Shell --args co ...

  2. angular-file-upload 项目实践踩坑

    API文档: https://github.com/nervgh/angular-file-upload/wiki/Module-API 过程中得到昊哥的鼎力帮助,感谢. 需求如下,分别选择多个文件, ...

  3. ==，hashcde, equals(一)

    1.Hash  的属性, 1)bucket 和 list 2.java.lang.object 的 hashcode 和 equal 通过内存地址比较 3.为什么要重写hashcode 和 equal ...

  4. 极客时间|AI技术内参

    学习进度: 014 | 精读AlphaGo Zero论文

  5. 使用ENCKEYS方法加密数据

    要使用这种数据加密方法,您需要配置Oracle GoldenGate以生成加密密钥并将密钥存储在本地ENCKEYS文件中.此方法使用的永久密钥只能通过根据使用加密密钥填充ENCKEYS文件中的说明重新 ...

  6. CMakeLists 链接库相关指令

    set(LSTAR_DIR "$ENV{HOME}/LStar_build") include_directories(${LSTAR_DIR}) LINK_DIRECTORIES ...

  7. MySQL主从复制故障1595报错【原创】

    服务器环境 架构图 架构搭成后,在B机器上发现主从报错Last_IO_Errno: 1595 Last_IO_Error: Relay log write failure: could not que ...

  8. Random() 插入数据重复的问题

    今天在写一个小测试用例时,想在数据库插入一些数据.造数据时用到了Random函数,之前没有注意到这个问题,看到“Random生成随机数重复的问题”才注意到自己插入的数据有重复. ; i < ; ...

  9. hibernate框架学习之对象状态

    lHibernate对象共有三种状态 •瞬时状态:瞬时对象 •持久化状态:持久化对象 •托管状态:托管对象 l瞬时对象(Transient Object),简称TO l瞬时对象指的是应用程序创建出来的 ...

  10. 【BZOJ3590】[Snoi2013]Quare 状压DP

    这道题...神题. 首先看到数据范围,一眼状压 dp .然后? 没了. 理性分析,这里说断掉任意一条边图依然连通,即整个图构成一个边双(而不是点双). 之前用 fire (机房里的随机算法总称)之所以 ...