<!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. 【vue】中 $listeners 的使用方法

    $listeners 的官方介绍: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器.它可以通过 v-on="$listeners" 传入内部组件——在 ...

  2. websocket和socketio的总结

    1.WebSocket是什么? WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术.它是HTML最新标准HTML5的一个协议规范,本质上是个基于TCP的协议,它通过HTTP/HTTP ...

  3. byte数组和int之间相互转化的方法

    Java中byte数组和int类型的转换,在网络编程中这个算法是最基本的算法,我们都知道,在socket传输中,发送者接收的数据都是byte数组,但是int类型是4个byte组成的,如何把一个整形in ...

  4. python 的基础 学习 第四天 基础数据类型

    1,数字 int 数字主要是用于计算,使用方法并不是很多,就记住一种就可以. #bit_length() 当十进制用二进制表示时,转化为最少二进制的最少位数v = 11data = v.bit_len ...

  5. modbus 寄存器介绍

    modbus 的查询命令 命令 地址开始(两个地址)     地址长度(两个地址)          检验 01  xx     xx xx                              ...

  6. java实现在线浏览PDF文档功能

    实现在线浏览pdf文档功能(本代码适用于项目服务中固定的并且少量的pdf浏览,比如注册时的注册条款在线浏览等): //设置响应内容类型为PDF类型 response.setContentType(&q ...

  7. 【Udacity并行计算课程笔记】- Lesson 4 Fundamental GPU Algorithms (Applications of Sort and Scan)

    I. Scan应用--Compact 在介绍这节之前,首先给定一个情景方便理解,就是因为某种原因我们需要从扑克牌中选出方块的牌. 更formal一点的说法如下,输入是 \(s_0,s_1,...\), ...

  8. 关于链表所有操作，面试必考C++

    #include <iostream> #include <stack> using namespace std; //链表的结构体 struct ListNode { int ...

  9. 【Linux】时间同步设置+防火墙设置+SELinux设置

    时间同步设置 在大数据集群环境中,要求每台集群的时间必须是同步的,这样我们就会要求每台集群的时间必须和一台服务的时间是同步的.接下来介绍一下步骤: 1,设置ntp客户端 yum -y install ...

  10. LwIP Application Developers Manual8---Sample lwIP applications

    1.前言 你已经编译lwIP协议栈在你的目标平台上,并且网络驱动正常工作.你可以ping你的设备. 干得好,为你感到骄傲.虽然一个设备可以响应ping,但并不能算一个完整的应用. 现在你可以通过网络接 ...