<!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. CentOS7.2卸载完CDH5.12后重装CDH

    1因为是重装很多环境ok A mysql环境ok B 防火墙ok C hostname绑定也没有问题 D jdk也是ok E root用户,所以不涉及权限,如果不是请设置sudo权限用户    F n ...

  2. Java基础_0304：构造方法

    构造方法 如果要实例化新的对象,那么肯定需要使用关键字new来完成,但是除了new这个关键字之外,还有可能在对象实例化时为其进行一些初始化的准备操作,这个时候就需要构造方法的支持了 构造方法本身是一种 ...

  3. objectMapper、JsonNode、JsonObject常用方法

    一.objectMapper https://blog.csdn.net/han1196639488/article/details/79358743 二.JsonNode.JsonObject常用方 ...

  4. mysql 8.0 ~ 存储和账户

    一 简介:关于存储数据文件的改进二 数据文件:   1合并了存储数据库对象信息的事务性数据字典       1 相关文件等存储引擎层存储元数据文件已消失,只有ibd文件,元数据存储在数据字典表    ...

  5. redis-LinkedList

    1.redis-LinkedList[重点] Java List :  数组ArrayList 链表LinkedList 为什么redis选取了链表? Redis操作中,最多的操作是进行元素的增删 使 ...

  6. 20165234 预备作业2 学习基础和C语言基础调查

    学习基础和C语言基础调查 一.技能学习经验及体会 你有什么技能比大多人(超过90%以上)更好? 看到这个问题,我仔细想了想,好像的确没有什么特别出众的技能,但是我想到了许多我个人的爱好. 我从小喜欢五 ...

  7. 20165337岳源 第四次实验 Android开发

    1.实验要求: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章 参考http://www.cnblogs.com ...

  8. Django中的csrf基础了解

    简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功能有 ...

  9. RabbitMQ简单应用の订阅模式

    订阅模式 公众号-->订阅之后才会收到相应的文章. 解读: 1.一个生产者,多个消费者 2.每个消费者都有自己的队列 3.生产者没有将消息直接发送到队列里,而是发送给了交换机(转发器)excha ...

  10. 手写代码注意点--java.lang.Math 相关

    1-如果用到了Math的函数,需要手动写上: import java.lang.Math; 2-求x的y次方,用的是Math.pow(x,y); 注意,返回值是double!!! 不是int, 如果需 ...