Как я могу изменить размер элемента DOM? - PullRequest
Новая
       32

Как я могу изменить размер элемента DOM?

1 голос
/ 21 октября 2011

У меня есть виджет в моем пользовательском интерфейсе, который находится в фиксированном месте в правом нижнем углу моего браузера.

Я хочу, чтобы пользователь мог нажимать на часть заголовка виджета, перетаскивать его вверх и эффективно увеличивать высоту виджета. Свойства нижнего, левого и правого виджетов не изменились бы, но верхняя часть должна быть в состоянии измениться, чтобы разрешить максимальную высоту виджета, определяемую его css max-height.

Есть ли примеры чего-то подобного? Я знаю, что jQueryUI имеет изменяемый размер, но, к сожалению, я не могу использовать jQueryUI в этом проекте. Однако мы используем jQuery.

Будем очень благодарны за любые советы, идеи или примеры. Просто что-то, чтобы заставить меня двигаться в правильном направлении. Я выглядел CSS3 изменяемого размера, и он помещает эту стандартную иконку изменения размера в правом нижнем углу, как эта текстовая область.

Ответы [ 2 ]

0 голосов
/ 21 октября 2011

Это можно сделать только с помощью jQuery.Наверху, вы, вероятно, могли бы сделать что-то вроде этого: 

<div id="widget">
    <h3 id="widget-header">Header</h3>
    some content
</div>

<script language="javascript" type="text/javascript">
    var clientY = 0;
    var offset = null;
    var changeSize = false;

    $(function () {
        $("#widget-header")
            .mousedown(function (event) {
                clientY = event.pageY;
                offset = $("#widget").offset();
                changeSize = true;
            })
            .mousemove(function (event) {
                if (changeSize) {

                    // get the changes
                    var difY = event.pageY - clientY;
                    offset.top += difY;

                    // animate the changes
                    $("#widget").offset({ top: offset.top, left: offset.left });
                    $("#widget").height($("#widget").height() - difY);

                    // update the new positions
                    clientY = event.pageY;
                }
            })
            .mouseup(function (event) { changeSize = false; })
            .mouseout(function(event) { changeSize = false; });
    });

</script>
0 голосов
/ 21 октября 2011

Может быть, этот плагин может помочь?

http://dev.iceburg.net/jquery/jqDnR/

...