1

我一直在尝试使用可调整大小的 JqueryUI 来创建可调整大小的 div，例如在 jsfiddle 上。Jsfiddle 使用带有句柄可调整大小的 JqueryUI，以便您可以扩展代码编辑器或显示 dhtml 结果（设计等）的输出区域。我几乎尝试了所有解决方案，这些解决方案提供给在使用 jquery ui 的 resizble 时遇到问题的其他人。有没有办法只用 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>
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班级和content身份证

$(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 回答