网页resizable 布局
resizable 布局
开发桌面应用时,应用一般会有多个窗格,这些窗格需要可调节宽度高度,使用node-webkit开发,布局就是网页布局,这时候这就需要resize的属性,实际效果如:http://jsfiddle.net/
可以使用jquery.ui 的 resizable 属性
Css布局方面,最外层的parent div设置为相对定位,内部的child div 设置为绝对定位
以一个左右两栏布局为例,代码如下,实际效果页面:http://jsfiddle.net/7vn4j5rz/
由于js代码被csdn过滤了,可以在http://lufeng.me/post/resizable-layout-copy查看原文
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="parent">
<div class="leftChlid column">
This is left window
</div>
<div class="rightChild column">
This is right window
</div>
</div>
</body>
</html>
css:
$(function() {
$(‘.rightChild‘).width($(‘.parent‘).width() - $(‘.leftChild‘).width() - 20);
$(".leftChild" ).resizable({
handles: ‘e‘, // 设置resize的方向 North, Sourth, West, East
maxWidth: 450,
minWidth: 100
});
$(‘.leftChild‘).resize(function() {
$(‘.rightChild‘).width($(‘.parent‘).width() - $(‘.leftChild‘).width() - 20);
});
})
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。