可調整的div只是不工作，不管我做什麼

我一直在嘗試使用JqueryUIs可調整大小來創建像jsfiddle一樣可調整大小的div例如。 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/如果有人能告訴我我做錯了什麼，或爲我提供了另一個解決方案，我會盡我所能。可調整的div只是不工作，不管我做什麼

這裏的代碼，以及：

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

來源

2013-10-03 Brandon

您的問題與自身矛盾。首先你問我們是否可以用CSS創建一個可調整大小的小部件，然後向我們展示利用jQuery UI的Resizable插件的代碼。請用你的例子製作一個JSFiddle。 – silkfire

我用我的例子製作了一個JSFiddle。請再讀一遍。 – Brandon

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

應該

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

來源

2013-10-03 09:47:59 Adam

謝謝你指出，但我仍然有困難。請參閱小提琴http://jsfiddle.net/asx4M/ – Brandon

的問題是，你有沒有關閉了引號。對於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); 
    }); 
});

來源

2013-10-03 10:01:23 Sorter

謝謝，我已更新它，它仍然不起作用：http://jsfiddle.net/asx4M/1/ – Brandon

您沒有菜單類在jsfiddle上發佈的html代碼中。 – Sorter

我已經更新了jsfiddle並關閉了引號，但它仍然無法正常工作，所以我還沒有收到一個很好的答案。 – Brandon

可調整的div只是不工作，不管我做什麼

回答

相關問題