8

私はWebサイトプロジェクトに取り組んでおり、 jsfiddleやhotmailなどのサイズ変更可能なパネルを追加する必要があります（hotmailには、メールを含む左側のパネルと、メールを読むことができる右側のコンテンツパネルがあります...）

jQueryを見て何度も試しましたが、ハンドラーを設定できません。水平方向にサイズ変更できるパネルを作成する必要があります。

では、どうすればこれを作成できますか？コードを完成させるのを手伝ってもらえますか（left_panelとcontentの間にリサイザーが必要です。Resizerはleft_panelのサイズを変更し、もちろんコンテンツが影響を受けます。）

> http://jsfiddle.net/QkZL8
4

3 に答える 3

16

jQuery UIが含まれていないため（したがって、jQuery UIのサイズ変更可能かどうかは不明）、フィドルは機能しませんが、構文エラーが発生した場合は、次のようにする必要があります。

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

これではない：

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

Davidがコメントで述べているように、分割要素の中間ではなく、パネル自体のサイズを変更できるようにする必要があります。サイズ変更ハンドラーでは、他のパネルのサイズを変更して、その幅が実際にサイズ変更しているパネルの幅と相補的になるようにすることができます。

更新：これはあなたを正しい軌道に乗せるはずです：

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

更新2：minWidthオプションとmaxWidthオプションを例に追加したので、これらの境界内でのみ左側の列のサイズを変更できます。

ここで更新されたフィドル

于 2012-09-13T09:21:11.743 に答える
3

さて、あなたがまだ迷っているなら、私は簡単なモックアップを作りました...だからコードは...

<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>
​

これは、水平方向と垂直方向の両方で機能します。

別の例を編集する

<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>
​
于 2012-09-13T09:50:10.423 に答える
2

剣道スプリッターのように完成したものを使用するのはどうですか：http ：//demos.kendoui.c​​om/web/splitter/index.html

-デビッド

于 2012-09-13T09:22:01.397 に答える