1

たとえば、jsfiddle のようにサイズ変更可能な div を作成するために、サイズ変更可能な JqueryUIs を使用しようとしています。Jsfiddle は、ハンドルでサイズ変更可能な JqueryUI を利用して、コード エディターまたは dhtml 結果 (デザインなど) を表示する出力領域を拡張できるようにします。jquery uiのサイズ変更で問題が発生した他の人に与えられたすべての解決策を試しました。CSS のみでサイズ変更可能な div を作成し、カスタム ハンドルを持つ方法はありますか? 私もこれを試してみましたが、 http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/でも機能していませんが、それは私が探しているものです。2 つの div、1 つはメイン コンテンツを含み、もう 1 つはサイドバーのものを含みます。私はここで与えられたその解決策をすぐにいじりました：http://jsfiddle.net/asx4M/1/誰かが私が間違っていることを教えてくれたり、私がやろうとしていることに対する別の解決策を提供してくれたりしてくれたら幸いです。

ここにもコードがあります：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #sidebar {
                width: 49%;
            }
            #content {
                width: 49%;
                float: left;
            }
        </style>

        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-    ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $( "#sidebar" ).resizable({      
                });
                $("#sidebar").bind("resize", function (event, ui) {
                    var setWidth = $("#sidebar").width();
                    $('#content').width(1224-setWidth);
                    $('.menu').width(setWidth-6);
                });
            });
        </script>
    </head>
    <div id="sidebar"> 
        <div class="sidebar-menu">
            <!-- all your sidebar/navigational items go here -->
        </div>
    </div>
    <div id="content">
        <!-- all your main content goes here -->
    </div>
4

2 に答える 2

0 
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);

する必要があります

$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
于 2013-10-03T09:47:59.107 に答える
0

問題は、閉じていない見積もりにあります。menuクラスとcontentID

$(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
        var setWidth = $("#sidebar").width();
        $('#content').width(1224-setWidth);
        $('.sidebar-menu').width(setWidth-6);
    });
});
于 2013-10-03T10:01:23.917 に答える