Какой самый чистый способ сделать изменяемый размер трех столбцов?

Question

Извините, если заголовок не описательный, но я работаю над веб-приложением в javascript, используя холст HTML5. Я хочу, чтобы страница настраивалась на размер окна, но я также хочу, чтобы столбцы изменялись по размеру, т. Е. Вы можете перетаскивать вертикальные линии, чтобы изменить их ширину. Дело в том, что атрибуты ширины и высоты холста должны быть в пикселях (настройка свойств CSS растягивает изображение, а не расширение поверхности рисования). Мне нужно изменить атрибуты canvas через javascript. У меня проблемы со всеми этими ограничениями.

Я попытался Создание шаблонов панели поплавка влево и поплавок право свойства панели, но она заканчивается ниже холста и выше статус-бара каждый раз. У меня также есть строка состояния, установленная на position:fixed, но она, как правило, немного выше холста. Как бы вы это сделали? Имейте в виду, что я должен иметь возможность изменять размер окна или панелей отдельно (кроме строки меню и строки состояния, которые никогда не меняют размер).

EDIT: быстрое редактирование, чтобы добавить, что я не могу использовать JQuery/JQuery-UI. Приложение довольно компьютерное, поэтому мне пришлось избавиться от него. Моя цель совместимости - IE9 в любом случае.

Answer 1

Я сделал быстрый поиск Google о том, как это сделать, и нашел переполнение стека пост с подобным ответом, вот скрипку, которая была предоставлена, вот Javascript часть:

var i = 0; 
    $('#dragbar').mousedown(function(e){ 

     e.preventDefault(); 
     $('#mousestatus').html("mousedown" + i++); 
     $(document).mousemove(function(e){ 
      $('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("width",e.pageX+2); 
      $('#main').css("left",e.pageX+2); 
     }) 
     console.log("leaving mouseDown"); 
    }); 
    $(document).mouseup(function(e){ 
     $('#clickevent').html('in another mouseUp event' + i++); 
     $(document).unbind('mousemove'); 
     }); 

http://jsfiddle.net/gaby/Bek9L/

а вот пост:

Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

скрипку использует JQuery, но не JQuery UI,

Вам потребуется использовать проценты для ширины, взглянуть на отзывчивый дизайн.

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Я надеюсь, что это помогает

Answer 2

это это, что вы ищете? fiddle link

<style> 
/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 
.col:first-child { margin-left: 0; } 


/* GROUPING */ 
.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 */ 
} 

/* GRID OF THREE */ 
.span_3_of_3 { 
    width: 100%; 
} 
.span_2_of_3 { 
    width: 66.1%; 
} 
.span_1_of_3 { 
    width: 32.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .col { margin: 1% 0 1% 0%;} 
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
} 
</style> 
    <div class="section group"> 
        <div class="col span_1_of_3" style="background-color:red;color:white;text-align:center;"> 
        template 
        </div> 
        <div class="col span_1_of_3" style="background-color:blue;color:white;text-align:center;"> 
        canvas 
        </div> 
        <div class="col span_1_of_3" style="background-color:gray;color:white;text-align:center;"> 
        properties 
        </div> 
       </div>