DIV динамическое изменение размера с помощью вертикального слайда - PullRequest
Новая
       11

DIV динамическое изменение размера с помощью вертикального слайда

1 голос
/ 03 марта 2011

Это немного сложно объяснить, но я сделаю все возможное:

Моя веб-страница разделена на два элемента: один с плавающей точкой слева, а другой с плавающей справа (на 50% больше или меньше).

Я хочу добавить новую функцию: динамически изменять размер . То есть: когда я щелкаю по правой границе DIV # 1 или щелкаю по левой границе DIV # 2, размер каждого из них должен изменяться слева направо или справа налево.

Возможно, вы меня не понимаете, но мне нужен этот эффект (из этого плагина ):

JQuery beforeafter plugin

Этот плагин работает только для изображений, а не для Div. Мне нужно такое же влияние на мои дивы. На самом деле я пытаюсь использовать JQueryUI Resizable class , но я не знаю, как синхронизировать оба изменения размера.

Вы можете мне помочь? Любое предложение или трек по этому поводу будет очень признателен. Спасибо!

1 Ответ

3 голосов
/ 03 марта 2011

Я создал эту функцию, используя 15 строк JS / jQ: http://jsfiddle.net/xSJcz/

Надеюсь, это поможет!Вы можете легко изменить его, чтобы он реагировал на клик или тому подобное.

РЕДАКТИРОВАТЬ: Для будущих записей, вот CSS ответа: 

#left,#right{
    border:1px solid #aaa;
    float:left;
    height:100px;
    width:48%;
}
#handle{
    background:#000;
    float:left;
    height:100px;
    margin:1px;
    width:1%;
}

HTML: 

<div id="left">
    Left
</div>
<div id="handle"></div>
<div id="right">
    Right
</div>

JS: 

var h = $('#handle'),
    l = $('#left'),
    r = $('#right'),
    w = $('body').width() - 18;

var isDragging = false;

h.mousedown(function(e){
    isDragging = true;
    e.preventDefault();
});
$(document).mouseup(function(){
    isDragging = false;
}).mousemove(function(e){
    if(isDragging){
        l.css('width', e.pageX);
        r.css('width', w - e.pageX);
    }
});
...