<!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. openwrt package 依赖关系

    参考链接: https://blog.csdn.net/zxygww/article/details/49181065

  2. 02、natapp的使用

    使用方法 官网: https://natapp.cn 命令启动:natapp -authtoken=***************** 文档:https://natapp.cn/article/nat ...

  3. JAVA知识笔记

    1.对于volatile修饰的变量,jvm虚拟机只是保证从主内存加载到线程工作内存的值是最新的.更详细介绍参考http://blog.csdn.net/libing13820393394/articl ...

  4. 20165234 《Java程序设计》实验一 Java开发环境的熟悉

    一.实验报告封面 课程:Java程序设计  班级:1652班  姓名:刘津甫  学号:20165234 指导教师:娄嘉鹏  实验日期:2018年4月2日 实验时间:15:35 - 17:15  实验序 ...

  5. Linux C++ TCP Socket传输文件或图片实例

    环境:Linux 语言:C++ 通信方式:TCP 下面用TCP协议编写一个简单的服务器.客户端,其中服务器端一直监听本机的6666号端口.如果收到连接请求,将接收请求并接收客户端发来的消息:客户端与服 ...

  6. java在进程启动和关闭.exe程序

    /** * @desc 启动进程 * @author zp * @date 2018-3-29 */ public static void startProc(String processName) ...

  7. 【VMware vSphere】ESXi系统开启SSH协议

    写在前面:           SSH为建立在应用层基础上的安全协议,是目前较为可靠,专为远程登录会话和其他网络服务提供安全性的协议.感兴趣的话,可以百度了解           在这里,我们需要将S ...

  8. CentOS 6与7对比【转】

    片段1:时间同步 CentOS 6 逐步: ntpd或ntpdate 直接: ntpdate -b(通常加到crontab) CentOS 7 方法1: systemctl start chronyd ...

  9. Threading.local

    在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响其他线程,而全局变量的修改必须加锁. Threading.local可以创建 ...

  10. hibernate框架学习第二天：核心API、工具类、事务、查询、方言、主键生成策略等

    核心API Configuration 描述的是一个封装所有配置信息的对象 1.加载hibernate.properties(非主流,早期) Configuration conf = new Conf ...