https://www.cnblogs.com/kexb/p/3685913.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/layout.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <style>
        img {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .p-search{
            background:#fafafa;
            padding:5px;
            border:1px solid #ccc;
            border-bottom:0;
            overflow:hidden;
        }
        .p-search input{
            width:300px;
            border:1px solid #ccc;
            background: #fff url('images/search.png') no-repeat right top;
        }
        .p-right{
            text-align:center;
            border:1px solid #ccc;
            border-left:0;
            width:150px;
            background:#fafafa;
            padding-top:10px;
        }
    </style>
    <script>
        //函数showcontent不能先加载上下文再来执行，否则没有效果
        function showcontent(language) {
            $('#content').html('Introduction to ' + language + ' language');
        }
    </script>
</head>
<body>
<div class="easyui-layout" style="width: 400px; height: 200px">
    <div region="west" split="true" title="边框布局" style="width: 150px">
        <p style="padding:5px;margin:0;">Select language:</p>
        <ul>
            <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
        </ul>
    </div>
    <div id="content" region="center" title="Language" style="padding:5px;">
    </div>
</div>

<br><br><br><br>
<!--  collapsible="true"点击可以折叠；fit="true :datagrid自适应宽度
-->
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true"
     style="padding:5px;width:500px;height:250px;">
    <div class="easyui-layout" fit="true">
        <div region="north" border="false" class="p-search">
            <label>Search:</label><input/>
        </div>
        <div region="center" border="false">
            <div class="easyui-layout" fit="true">
                <div region="east" border="false" class="p-right">
                    <img src="data:images/1.jpg"/>
                </div>
                <div region="center" border="false" style="border:1px solid #ccc;">
                    <div class="easyui-layout" fit="true">
　　　　　　　　　　　　　　　　　　　　　　　　split="true" :分割
                        <div region="south" split="true" border="false" style="height:60px;">
                            <textarea style="border:0;width:100%;height:100%;resize:none">Hello,你可以在此输入内容</textarea>
                        </div>
                        <div region="center" border="false">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

easyUI-layout布局的更多相关文章

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

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

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

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

  3. easyui layout布局的属性说明

    layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...

  4. EasyUI Layout 布局

    1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...

  5. easyui layout 布局title

    <script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($( ...

  6. EasyUI - Layout 布局控件

    效果: Html代码: <div id="cc" class="easyui-layout" style="width: 600px; heig ...

  7. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  8. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  9. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  10. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

随机推荐

  1. mongodb 系列 ~ mongo的副本集(2)

    一 简介:来试试更改副本集的oplog问题二 背景: oplog的作用类似于mysql的binlog,传递增量操作到从节点 三 oplog介绍   1 oplog在local库:      1 mas ...

  2. i春秋 小漏洞也有大梦想

    i春秋上的课,提到了一些概念,学习并记录. 此文主要以了解概念为主,没有代码和实战. 水坑式攻击 百度定义: “水坑式攻击”,是指黑客通过分析被攻击者的网络活动规律,寻找被攻击者经常访问的网站的弱点, ...

  3. Microsoft SQL - 数据库管理系统

    数据库管理系统(Server Management Studio) SQL Server Management Studio是一个数据库管理系统软件,数据库可以看成是一个个存储数据的文件,而Manag ...

  4. 【转】Python之正则表达式（re模块）

    [转]Python之正则表达式(re模块) 本节内容 re模块介绍 使用re模块的步骤 re模块简单应用示例 关于匹配对象的说明 说说正则表达式字符串前的r前缀 re模块综合应用实例 参考文档 提示: ...

  5. C/C++中可变参数函数的实现

    在C语言的stdarg.h头文件中提供了三个函数va_start, va_end,va_arg和一个类型va_list.利用它们,我们可以很容易实现一个可变参数的函数.首先简单介绍一下这三个函数. 假 ...

  6. vc++基础班[28]---动态数组及动态链表的讲解

    C++中也有相应的动态数组.动态链表.映射表的模板类,就是STL中的:vector.list.map 他们属于C++标准中的一部分,对于程序的移植性来说也是不错的,但是在MFC编程中使用 CArray ...

  7. os.date

    代码中有一段如下: local date = os.date("*t", set) if date then           luci.sys.call("date ...

  8. mongodb导入导出数据

    导出 mongoexport -d DB_NAME -c COLLECT_NAME -o FILE_NAME 例:mongoexport -d db_test -c data_result -o da ...

  9. 通信——基于Xmpp协议实现的聊天室

    前段时间写了个自定义通信协议的聊天室(即用\r\n标记字符串,作为一句话),总感觉自己弄的那个协议实现虽然简单,但是拓展性就太差了,只适合于发送聊天的内容,难以包含更多的信息.基于上述几点,于是就开始 ...

  10. Android App增量升级

    移动互联网主打的就是用户体验和产品的快速迭代,通过用户反馈和用户行为跟踪及时调整产品方向,这样才能持续保持生命力和创造力.说的接地气点就是,你频繁的升级更新,有时只是修复了几个bug或者微调了下界面, ...