jQuery resizable() dynamic maxWidth опция

Question

У меня есть 3 столбца, которые изменяются по размеру. Когда человек становится более широким, один налево уменьшается. По существу, всего 2 ручки. Левый col и Mid col. Поэтому, когда Mid col становится тоньше, Right col расширяется соответственно. Все три из них содержатся с родительским div 900px, поэтому сумма всех трех всегда равна 900. У них максимальная и минимальная ширины установлены статически.

Моя проблема в том, что если вы возьмете левый дескриптор и переместите его вправо, вы все равно сможете использовать правый дескриптор и развернуть середину col за краем родительского div.

Я думал о способе решить эту проблему, написав функцию, которая проверяет ширину столбцов, а затем вычитает левый и правый столбцы из родительской ширины div, я назвал ее mWid. Это оставляет меня с номером, который я хочу установить как maxWidth для Mid col.

Теперь вопрос заключается в том, что mWid является подъемы не обновлялись здесь «MaxWidth: mWid»

Вот что функция правой ручки выглядит следующим образом:

$(function() { 
    $("#midResizable").resizable({ 
     handles: 'e', 
     containment: '#container', 
     maxWidth: mWid, // gets set once, but doesn't update! WHY? 
     minWidth: 195, 
     resize: function(event, ui) { 
      contWidth = $('#container').width() 
      newWidth = $(this).width() 
      leftWidth = $('#leftResizable').width() 
      rightWidth = $('#rightResizable').width() 
      $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px"); 
      checkWid() 
     } 
    });  
});  

function checkWid() { 
    rightWidth = $('#rightResizable').width() 
    leftWidth = $('#leftResizable').width() 
    contWidth = $('#container').width() 
    mWid = (contWidth-15)-(rightWidth)-(leftWidth) 
} 

Answer 1

Проверьте это: http://jqueryui.com/demos/resizable/#option-maxWidth

Похоже, maxWidth: mWid, только вызывается init.

MaxWidth должен быть явно установлен после того, как это:

$("#midResizable").resizable("option", "maxWidth", mWid);