Resizing DIV Panel

后端未结

关注

 3  1532

I am working on a website project and I need to add a resizable panel like jsfiddle or hotmail (hotmail has a left panel that includes your mails, and has a

相关标签:

3条回答

不要未来只要你来

2020-12-15 12:31

what about use anything completed like Kendo splitter: http://demos.kendoui.com/web/splitter/index.html

-David

0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2020-12-15 12:47

Ok, so i made up a quick mock up if you are still lost... so the code is...

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }


        .resize
        {
            position: fixed;
            left: 0px;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }



    </style>
    </head>
    <body>
<div class="resize">
    <p>
       Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
    </p>
</div>
<div class="noneresize">
    <p> 
        This element is not the resizing one
    </p>
</div>



    </body>
</html>

This works both ways horizontal and vertically .

Edit another example

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".resize").resizable();           
        });
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
    <style type="text/css">
        body, html
        {
            margin: 0px;
            border: 0px;
            padding: 0px;

        }

        .holder div
        {
            float: left;            
        }

        .resize
        {
            position: relative;
            height: 100%;
            background: blue;
            cursor:pointer;         
            max-width: 300px;
            padding: 20px;
        }


        .holder
        {
            position: relative;
            width: 100%;
            height: 100%;

        }

    </style>
    </head>
    <body>
<div class="holder">
    <div class="resize">
        <p>
           Nullam vitae eros sapien. Nulla sit amet ipsum sagittis felis lobortis imperdiet eget eu est. Pellentesque tincidunt dictum libero, vitae sagittis augue interdum ac. Nam cursus, ante eget consequat mollis, mauris justo consequat tellus, at rutrum justo dolor ut tellus. Curabitur interdum, augue a aliquam tempus, neque lectus rhoncus lorem, sed mattis velit purus eu nibh. Donec adipiscing condimentum eros ac convallis. Morbi purus felis, condimentum at rutrum nec, auctor quis mi. Sed odio turpis, blandit vitae sagittis a, accumsan rutrum risus. Sed ultricies congue quam, consectetur porttitor augue ultrices non. Mauris cursus quam sed eros fermentum scelerisque. Mauris nisi purus, iaculis ac pulvinar ac, rhoncus a est. Quisque vitae mollis lacu
        </p>
    </div>
    <div class="noneresize">
        <p> 
            This element is not the resizing one
        </p>
    </div>
</div>


    </body>
</html>

0 讨论(0)

灰色年华

2020-12-15 12:55

The fiddle doesn't work because jQuery UI isn't included (so jQuery UI resizable is not known), but also you made a syntax error, you should do this:

$(resize).resizable({
    handles: 'w'
});

not this:

$(resize).resizable({,,
    handles: 'w', 
});

As David remarks in the comments, you should make the panel itself resizable, not an in between splitter element. In the resize handler you can resize the other panel so its width is complementary to the width of the panel you are actually resizing.

UPDATE: This should put you on the right track:

$(resize).resizable({
    // only use the eastern handle
    handles: 'e',
    // restrict the width range
    minWidth: 120,
    maxWidth: 450,
    // resize handler updates the content panel width
    resize: function(event, ui){
        var currentWidth = ui.size.width;
      
        // this accounts for padding in the panels + 
        // borders, you could calculate this using jQuery
        var padding = 12; 
      
        // this accounts for some lag in the ui.size value, if you take this away 
        // you'll get some instable behaviour
        $(this).width(currentWidth);
      
        // set the content panel width
        $("#content").width(containerWidth - currentWidth - padding);            
    }
});

Update 2: I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.

UPDATED fiddle here

0 讨论(0)