изменить ширину div на лету, установка с помощью $ ('# contentDiv'). width (newWidth) не работает - PullRequest
Новая
       36

изменить ширину div на лету, установка с помощью $ ('# contentDiv'). width (newWidth) не работает

0 голосов
/ 07 марта 2012

У меня есть 3 деления расположены как - 

    --------------------------
    |  f      |  headlineDiv  |
    |  i      |               |<- draggable and resizable
    |  l      |_______________|
    |  t      |               |
    |  e      |               |<- draggable and resizable
    |  r div  |  storyDiv     |
    |--------------------------
        ^
        |
    can be hidden

Вот какой-то код: 

 <div id="main">
    <div id="showFiltersDiv">
    </div>
    <div id="filtersDiv">
        <div id="hideTextDiv">
        </div>
    </div>
    <div id="contentDiv">
        <div id="headlineDiv">
            Block 1</div>
        <div id="storyDiv">
            Block 2</div>
    </div>
</div>

вот код jquery: для изменения размера -> 

            $('#headlineDiv').resize(function () {
            var offset = $('#headlineDiv').position();
            var height = $('#headlineDiv').height();
            var width = $('#contentDiv').width();
            var top = offset.top + height + "px";
            var newStoryHeight = $("#main").height() - $("#headlineDiv").height();
            var maxHeight = $("#main").height();

             $('#storyDiv').css({
                'bottom': 0,
                'height': newStoryHeight,
                'top': top,
                'position': 'absolute',
                'width': width
            });

            $('#headlineDiv').css({
                'max-height': maxHeight,
                'width': width
            });
        });

Код для #storyDiv похож

Вот код, который должен расширить их, чтобы они заняли дополнительное место - 

             $('#showFiltersDiv').click(function () {
            $('#filtersDiv, #hideTextDiv').show("slide", { direction: "left" });
            $('#showFiltersDiv').hide();
            var left_margin = $('#filtersDiv').width();
            var perm_width = $('#main').width() - left_margin;               
            var storyTop = $('#storyDiv').position().top;
            $('#headlineDiv').width(perm_width);
            $('#headlineDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute'
                //'width': perm_width
            });

            $('#storyDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute',
                'width': perm_width
            });
        });

при изменении размера headlineDiv storyDiv должен соответствующим образом изменить свою высоту. Их позиции взаимозаменяемы. Таким образом, если пользователь перетаскивает storyDiv выше, headlineDiv будет размещен ниже. Следовательно, если размер storyDiv будет изменен, headlineDiv соответствующим образом отрегулирует его высоту. По какой-то причине, когда пользователь пытается изменить размер, его ширина уменьшается примерно на 10 пикселей. Чтобы исправить это, я установил ширину этих div'ов, чтобы они были равны их родителям в функции изменения размера.

Теперь filterDiv - это переключатель div. Поэтому, когда пользователь скрывает это, headlineDiv и storyDiv должны расширяться слева и занимать новое пространство. Для этого я меняю их ширину. Однако установка ширины с помощью $('#headlineDiv ').width(newWidth) не имеет никакого эффекта. Любые предложения о том, что может сделать трюк?

1 Ответ

0 голосов
/ 07 марта 2012

Использовать изменяемый размер jQuery UI. В него встроены опции для «tooResize». Поскольку предоставляемые вами правила не ясны, вы можете написать простую функцию в «tooResize» самостоятельно

http://jqueryui.com/demos/resizable/

...