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>
效果如下：
最新文章
- Android 中关于static的使用问题
- 基于HTML5 Canvas 实现矢量工控风机叶轮旋转
- logging 文件日志
- 003.安装nginx(lnmp)
- HTML5滑动（swipe）事件
- Python torndoa mysql 模块安装
- 【Alpha阶段】第二次Scrum例会
- android 点击屏幕关闭 软键盘
- mysql 将指定列的浮点数转化为整数
- Linux 下,mysql数据库报无法登陆错误:ERROR 1045 (28000): Access denied for use
- C基础--C语言的数组
- 转：The Knuth-Morris-Pratt Algorithm in my own words
- 14.python中的集合
- php异步调试和线上调试网站程序的方法
- [bzoj3196][Tyvj 1730][二逼平衡树] (线段树套treap)
- 二、易语言 api 相关
- Finish final project
- One VS Rest
- java jvm 字节码 实例
- quartus II输入原理图及仿真步骤