首页 > 代码库 > 网页resizable 布局

网页resizable 布局

2024-07-21 10:10:58   220人阅读

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

网页resizable 布局


联系
我们