网页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);
    });
})

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。