<html>

<head>

    <script src="jquery-easyui/jquery.min.js"></script>

    <script src="jquery-easyui/jquery.easyui.min.js"></script>

    <script src="jquery-easyui/easyloader.js"></script>

    <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />

</head>

<body>

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;" >

        <div region="north"  title="North Title"  style="height:100px;"></div>

        <div region="south"  title="South Title" split="true" style="height:100px;"></div>

        <div region="east"  title="East" split="true" style="width:100px;"></div>

        <div region="west" split="true" title="West" style="width:100px;"></div>

        <div region="center" title="center title" ></div>

    </div>  

    <!--

    title：布局面板的标题。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">

        <div region="north" title="North Title" split="true" style="height:100px;"></div>

    </div>

    region：定义布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">

        <div region="north" title="North Title" split="true" style="height:100px;"></div>

        <div region="south" title="South Title" split="true" style="height:100px;"></div>

        <div region="east"  title="East" split="true" style="width:100px;"></div>

        <div region="west" split="true" title="West" style="width:100px;"></div>

        <div region="center" title="center title" href="1.html" style="padding:5px;background:#eee;"></div>

    </div>

    border：设置为true将显示布局面板的边框。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">

        <div region="north" border=true title="North Title" split="true" style="height:100px;"></div>

    </div>

    split：如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;" >

        <div region="north"  title="North Title" split="true" style="height:100px;"></div>

    </div>

    iconCls：一个用来显示布局面板头部图标的css类。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;" >

        <div region="north" iconCls="icon-reload" title="North Title" split="true" style="height:100px;"></div>

    </div>

    href：一个用来从远程站点载入数据的超链接。

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;" >

        <div region="north" href="1.html" title="North Title" split="true" style="height:100px;"></div>

    </div>

    -->

</body>

</html>

jQuery EasyUI API 中文文档 - 布局（Layout）的更多相关文章

  1. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  2. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  3. jQuery EasyUI API 中文文档

    http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页  jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...

  4. jQuery EasyUI API 中文文档 - Panel面板

    <html> <head> <title>布局管理器--控制面板</title> <script src="jquery-easyui/ ...

  5. jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框（Messager） http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...

  6. jQuery EasyUI API 中文文档 - 分隔按钮（splitbutton）

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  7. jQuery EasyUI API 中文文档 - 菜单按钮（menubutton）

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  8. jQuery EasyUI API 中文文档 - 链接按钮（linkbutton）

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  9. jQuery EasyUI API 中文文档 - 面板（Panel）

    Panel 面板   用$.fn.panel.defaults重写defaults. 用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel ...

随机推荐

  1. input标签的hidden属性的应用及作用

    定义:传输关于客户端/服务器交互的状态信息. Transmits state information about client/server interaction. 解释: 此元素在页面中不显示,在 ...

  2. 【Java TCP/IP Socket】TCP Socket通信中由read返回值造成的的死锁问题（含代码）（转）

    书上示例 在第一章<基本套接字>中,作者给出了一个TCP Socket通信的例子——反馈服务器,即服务器端直接把从客户端接收到的数据原原本本地反馈回去. 书上客户端代码如下: 1 2 3 ...

  3. 深入浅出 消息队列 ActiveMQ（转）

    一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...

  4. TCP与UDP在socket编程中的区别 （网络收集转载）

    http://blog.chinaunix.net/uid-26421509-id-3814684.html 一.TCP与UDP的区别 基于连接与无连接  对系统资源的要求(TCP较多,UDP少)  ...

  5. linux 进程线程拓展

    依次参考: 多线程和多进程的区别(小结) Linux内核源代码分析——fork()原理&多进程网络模型 Linux写时拷贝技术(copy-on-write) linux内核 do_fork 函 ...

  6. C++ 需要返回值的函数却没有返回值的情况 单例模式

    昨天在看前些天写的代码,发现一个错误. #include <iostream> using namespace std; class singleton { public: static ...

  7. 矩形、占位符组件——axure线框图部件库介绍

    矩形组件和占位符没有太多的区别,这里我们主要讲解矩形组件的操作和使用,占位符的操作各位可以按照矩形的操作方法进行练习一下. 矩形组件是一个矩形,它可以用来做很多的工作,比如页面上需要一块蓝色的背景,就 ...

  8. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

  9. gulp工作流

    小屁活动使用 gulp+less gulpfile.js var gulp = require('gulp'), cssmin = require('gulp-minify-css'), less = ...

  10. Thinkphp入门 二 —空操作、空模块、模块分组、前置操作、后置操作、跨模块调用（46）

    原文:Thinkphp入门 二 -空操作.空模块.模块分组.前置操作.后置操作.跨模块调用(46) [空操作处理] 看下列图: 实际情况:我们的User控制器没有hello()这个方法 一个对象去访问 ...