Лучший способ иметь изменяемые размеры, вертикальные стекла

Question

Итак, я должен начать с того, что мои знания JQuery и CSS не являются обширными, но я могу справиться с базовым кодом и самым умеренным кодом.

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

____________________________ 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|_________________|_________| 

Так что я хочу, по умолчанию составляет около 75% ширины на левой, а затем 25% справа, но вы можете перетащить вертикальную полосу, чтобы изменить размер слева и справа. Затем каждая из этих панелей будет запускать собственный аякс.

До сих пор я пытался использовать прямые CSS, JQuery и библиотеку JSplitter только для того, чтобы узнать, что Jsplitter не работает на Chrome с jquery 1.8+. Есть ли у кого-нибудь какие-либо предложения по простым способам достижения того, что я хочу? Если вы даже свяжете меня с учебником или библиотекой, которую вы знаете, это было бы здорово, но я еще ничего не нашел за последние 3 часа, с которыми я боролся ... Спасибо за вашу помощь.

EDIT: О, и я попробовал макет интерфейса, но примеры, на которые я смотрел, действительно сложны ... Если у кого-то есть простой пример, который тоже поможет, я понимаю, что макет интерфейса очень мощный.

Answer 1

Может быть, вы можете использовать этот пример в качестве первоначального подхода: http://jsfiddle.net/amontellano/hM92y/1/

Щелкните на кнопке || отметьте середину и переместите ее, чтобы развернуть левую панель.

$('.rsh').draggable({ 
    axis: 'x', 
    containment: 'parent', 
    helper: 'clone', 
    drag: function (event, ui) { 
     var width = ui.offset.left; 
     $(this).prev().width(width); 
    } 
}); 

Он использует только элементы div в качестве контейнеров. Затем вы должны начать играть и добавлять улучшения к этому. Надеюсь, что это поможет в качестве первоначальной идеи. Вам не нужна никакая другая библиотека, а только jQuery UI.