Question

我一直在尝试使用JqueryUIs可调整大小来创建可调整大小的div，例如在jsfiddle上。 Jsfiddle使用带有句柄的JqueryUI可调整大小，以便您可以扩展代码编辑器或显示dhtml结果的输出区域（设计等）。我刚刚尝试了解决其他使用jquery ui可以解决问题的人的解决方案。有没有办法只用CSS创建一个可调整大小的div并有自定义句柄？我也尝试了这个，但它不起作用http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/但它正是我正在寻找的;两个div，一个包含主要内容，另一个包含侧边栏。我在这里给出的解决方案很快就做了一个小提琴：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>

Answer 1

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

应该是

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

Answer 2

问题在于您尚未关闭的引号。适用于menu类和content id

$(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
        var setWidth = $("#sidebar").width();
        $('#content').width(1224-setWidth);
        $('.sidebar-menu').width(setWidth-6);
    });
});

无论我做什么，可调整大小的div都不起作用

2 个答案: