<!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. 标准盒模型、IE盒模型

    结论:IE盒模型是陈旧知识点,除了帮助理解css3 box-sizing: border-box(等分宽度布局)外没什么用. 标准(W3C)模型中:CSS中的宽(width) = 内容 (conten ...

  2. 【tmos】使用joda-time来个格式化时间

    代码 @Test public void test(){ DateTime dateTime = new DateTime(); String str = dateTime.toString(&quo ...

  3. 【Linux】LD_PRELOAD用法

    转载https://blog.csdn.net/iEearth/article/details/49952047 还有一篇博客也可以看看https://blog.csdn.net/xp5xp6/art ...

  4. 目标检测：YOLO(v1 to v3)——学习笔记

    前段时间看了YOLO的论文,打算用YOLO模型做一个迁移学习,看看能不能用于项目中去.但在实践过程中感觉到对于YOLO的一些细节和技巧还是没有很好的理解,现学习其他人的博客总结(所有参考连接都附于最后 ...

  5. Queue和BlockingQueue的使用以及使用BlockingQueue实现生产者-消费者

    Java提供了两种新的容器类型:Queue和BlockingQueue. Queue用于保存一组等待处理的元素.它提供了几种实现,包括:ConcurrentLinkedQueue,这是一个先进先出的并 ...

  6. Excel删除重复值

    Sub Uniquedata()Dim rCell As Range'创建Dictionary对象Set d = CreateObject("Scripting.Dictionary&quo ...

  7. Windows PowerShell 入門（9）－エラー編

    対象読者 Windows PowerShellでコマンドレット操作ができる方 何らかのプログラミング経験があればなお良い 必要環境 Windows PowerShell エラーをリダイレクトする リダ ...

  8. 谈谈asp,php,jsp的优缺点

    谈谈asp,php,jsp的优缺点   http://hi.baidu.com/lhyboy/item/f95bac264c38830d72863e41 asp.php.asp.net.jsp等主流网 ...

  9. codeforces 412div.2

        A CodeForces 807A Is it rated?     B CodeForces 807B T-Shirt Hunt     C CodeForces 807C Success ...

  10. 【Tomcat】tomcat内存配置登记册

    20141202: 环境:windows2003 tomcat6.x jdk1.6 启动方式:windows服务方式启动 启动异常:java.lang.OutOfMemoryError: PermGe ...