operamasks—omBorderLayout布局
<!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布局的更多相关文章
- operamasks—omGrid/omBorderLayout的混合使用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs&q ...
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- Android如何制作漂亮的自适布局的键盘
最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...
- 页面布局class常见命名规范
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
随机推荐
- Farseer.net轻量级ORM开源框架 V1.x 入门篇：数据库配置文件
导航 目 录:Farseer.net轻量级ORM开源框架 目录 上一篇:Farseer.net轻量级ORM开源框架 V1.x 入门篇:新版本说明 下一篇:Farseer.net轻量级ORM开源框架 ...
- 田字格布局html div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Common.Logging.dll----------配置方式，可选引用，用于日志输出
1.简介common logging是一个通用日志接口,log4net是一个具体实现. common logging可以把输出连接到其他非log类上, 如EntLib的日志.NLog等 2.使用接下来 ...
- python 需求分析
第三章: 需求分析需求分析任务: ??? 功能分析性能分析EG: 相应时间.主存容量.磁盘容量.安全性.等可靠性和可用性出错处理需求系统发现错误时采取的行动,主要在系统关键部分设置接口需求用户接口.硬 ...
- C# 获取目录下文件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- zabbix基础安装
环境依赖:LNMP或者LAMP 简介参考:http://blog.51cto.com/zhang789/1868880 一.准备 我安装的环境及其版本如下: 系统版本 CentOS Linux rel ...
- tensorflow ConfigProto
tf.ConfigProto一般用在创建session的时候.用来对session进行参数配置 with tf.Session(config = tf.ConfigProto(...),...)#tf ...
- 第2节 hive基本操作：11、hive当中的分桶表以及修改表删除表数据加载数据导出等
分桶表 将数据按照指定的字段进行分成多个桶中去,说白了就是将数据按照字段进行划分,可以将数据按照字段划分到多个文件当中去 开启hive的桶表功能 set hive.enforce.bucketing= ...
- 邮箱地址自动提示jQuery插件
// mailAutoComplete.js v1.0 邮箱输入自动提示// 2010-06-18 v2.0 使用CSS class类代替CSS对象,同时增强代码可读性// 2010-06-18 v2 ...
- react-native 0.58版本打包图片问题 task ':app:mergeReleaseResources' Error: Duplicate resources
debug没问题,在生成正式apk的时候就如下: google了一下在github上找到了解决方案: github问题指向 在node_modules/react-native/react.gradl ...