<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

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

<script src="js/operamasks-ui.min.js"></script>

<script src="js/om-borderlayout.js"></script>

<link href="css/om-apusic.css" rel="stylesheet" />

<style>

#expand-none {             width: 100%;             height: 300px;         }

#expand-bottom {             width: 100%;             height: 300px;         }

#expand-top {             width: 100%;             height: 300px;         }

#expand-top-bottom {             width: 100%;             height: 300px;         }

</style>

<script type="text/javascript">

$(document).ready(function() {

$('#expand-none').omBorderLayout({

panels:[{

id:"center-panel",

header:false,

region:"center"

},{

id:"west-panel",

title:"west",

region:"west",

width:150

},{

id:"east-panel",

header:false,

region:"east",

width:150

},{

id:"north-panel",

title:"north",

region:"north",

height:80

},{

id:"south-panel",

title:"south",

region:"south",

height:80                 }]

});

$('#expand-bottom').omBorderLayout({

panels:[{

id:"center-panel",

header:false,

region:"center"

},{

id:"west-panel",

title:"west",

region:"west",

expandToBottom:true,

width:150                 },{

id:"east-panel",

header:false,

region:"east",

width:150                 },{

id:"north-panel",

title:"north",

region:"north",

height:80

},{

id:"south-panel",

title:"south",

region:"south",

height:80                 }]

});

$('#expand-top').omBorderLayout({

panels:[{

id:"center-panel",

header:false,

region:"center"

},{

id:"west-panel",

title:"west",

region:"west",

width:150                 },{

id:"east-panel",

header:false,

region:"east",

expandToTop:true,

width:150

},{

id:"north-panel",

title:"north",

region:"north",

height:80

},{

id:"south-panel",

title:"south",

region:"south",

height:80

}]

});

$('#expand-top-bottom').omBorderLayout({

panels:[{

id:"center-panel",

header:false,

region:"center"                 },{

id:"west-panel",

title:"west",

region:"west",

expandToBottom:true,

expandToTop:true,

width:150                 },{

id:"east-panel",

header:false,

expandToBottom:true,

expandToTop:true,

region:"east",

width:150

},{

id:"north-panel",

title:"north",

region:"north",

height:80

},{

id:"south-panel",

title:"south",

region:"south",

height:80

}]

});

});

</script>

</head>

<body>

<h3>默认左边两边的面板都不拉伸,上下两个面板宽度为整个layout的100%。</h3>

<div id="expand-none">

<div id="center-panel">center</div>

<div id="east-panel">east</div>

<div id="west-panel">west</div>

<div id="north-panel">north</div>

<div id="south-panel">south</div>

</div>

<h3>设置左边的面板拉伸至底部</h3>

<div id="expand-bottom">

<div id="center-panel">center</div>

<div id="east-panel">east</div>

<div id="west-panel">west</div>

<div id="north-panel">north</div>

<div id="south-panel">south</div>     </div>

<h3>设置右边的面板拉伸至顶部</h3>

<div id="expand-top">

<div id="center-panel">center</div>

<div id="east-panel">east</div>

<div id="west-panel">west</div>

<div id="north-panel">north</div>

<div id="south-panel">south</div>     </div>

<h3>设置左右两个面板拉伸至顶部和底部</h3>

<div id="expand-top-bottom">

<div id="center-panel">center</div>

<div id="east-panel">east</div>

<div id="west-panel">west</div>

<div id="north-panel">north</div>

<div id="south-panel">south</div>

</div>

</body>

</html>

效果如下:

operamasks—omBorderLayout布局的更多相关文章

  1. operamasks—omGrid/omBorderLayout的混合使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs&q ...

  2. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  3. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  4. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  5. 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. Xamarin+Prism开发详解五:页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  7. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  8. Android如何制作漂亮的自适布局的键盘

    最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...

  9. 页面布局class常见命名规范

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

随机推荐

  1. ASP.NET控件的ID,ClientID,UniqueId的区别

    一般情况下三者相同(没有父控件) ID:获取或设置分配给服务器控件的编程标识符.分配给控件的编程标识符. (可写) 设置服务器控件上的此属性可提供对服务器控件的属性.事件和方法的编程访问.Web 开发 ...

  2. Vue 路由知识二(工程模式下路由的配置)

    vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的:npm/cnpm install vue-router --save-dev. 在路由的核心文件:src/router ...

  3. vitualbox网络设置链接

    网文摘录地址:https://blog.csdn.net/yushupan/article/details/78404395 vitualbox网络设置: 一.NAT模式 特点: 1.如果主机可以上网 ...

  4. spark版本不支持(降版本打包)

    在做项目的时候代码已经更新为hadoop 2.7  spark 2.1 scala 2.11.8版本,但是服务器版本使用的是hadoop2.6 spark1.6 以及scala2.10.6版本,,主程 ...

  5. vue组件之this指向问题

    [问题描述] 返回顶部组件里,用到数据操作.通过方法里改动this数据,但发现直接使用失效 mounted() { window.onscroll=function(){ ) { this.isAct ...

  6. chomp成功的返回值是1,chomp对参数去回车符后会改变参数的值,是传入又是传出参数。$arrow_notation = ( chomp( $unpackeing = <STDIN>) );

    44 my $unpackeing;     45 my $arrow_notation = '';     46 print "Enter  name to query, enter ex ...

  7. joda-time时间操作组件

    今天看到了学习到了一个不错的操作时间的jar包,很方便的,以后操作时间运算就可以直接使用jar包中的方法了,再也不用自己写操作时间的方法了.懒的不行不行的 <!-- 时间操作组件 --> ...

  8. vue 清除keep-Alive页面缓存

  9. 简述站点访问控制、基于用户的访问控制、httpd虚拟主机、持久链接等应用配置实例

    1 站点访问控制 可基于两种机制指明对哪些资源进行何种访问控制: 文件系统路径 URL路径 注意: 从上到下匹配,匹配到一个就立即执行 如果没有子目录的访问控制,但是有父目录的访问控制,则子目录继承父 ...

  10. nginx配置location项的URL匹配规则

    Localtion URL的正则匹配规则 示例 location / { try_files $uri @apache; } #所有的路径都是/开头,表示匹配所有 location @apache { ...