Javascript Resize - PullRequest
Новая
       15

Javascript Resize

1 голос
/ 04 декабря 2009

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

У меня есть фиксированная область 1024 * 768, например:

альтернативный текст http://img260.imageshack.us/img260/4618/myimage.png

В правой части «Раздела А» будет кнопка javascript. Когда я нажму эту кнопку, размер раздела A будет автоматически изменен, и он будет выглядеть примерно так:

альтернативный текст http://img705.imageshack.us/img705/92/myimage1.png

Итак, Раздел A будет перекрываться с Разделом B, и он будет того же размера, что и Раздел C (И я знаю размер Раздела C). Как я могу автоматически изменить размер этой области с помощью функции перекрытия? Я ищу плагин для Jquery, но не смог найти это. В Jquery есть функция изменяемого размера, но она мне не помогает. Не могли бы вы помочь мне? (Если вы просто дадите мне ссылку, связанную с этой функцией, этого тоже будет достаточно)

edit: для дополнительной информации, раздел A является флэш-объектом, поэтому он будет увеличиваться и перекрываться с разделом B при нажатии на эту кнопку.

Спасибо

Ответы [ 3 ]

0 голосов
/ 04 декабря 2009

Вы пробовали функцию анимации? http://docs.jquery.com/Effects/animate

Может быть, раздел B будет скрыт с помощью слайда или раздел A будет перекрывать его, как вы упомянули, просто нужно правильно установить позиционирование, z-индекс и т. Д.

0 голосов
/ 04 декабря 2009

как то так: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Terminal</title>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#but').click(function (e) {
                    $('#a').removeClass('big').addClass('normal');
                    $('#b').hide();
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css">
            .height {
                height: 100px;
                border: 1px solid black;
            }

            .big {
                width: 198px;
                float: left;
            }

            .small {
                width: 100px;
                float: left;
            }

            .normal {
                width: 300px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div><a href="#" id="but">button</a></div>
        <div id="a" class="height big">a</div>
        <div id="b" class="height small">b</div>
        <div class="height normal">c</div>
    </body>
</html>
0 голосов
/ 04 декабря 2009

Эффект jQuery hide() был бы здесь полезен. Если у обоих Разделов A и Разделов B есть float: left Раздел A , должен расшириться, чтобы заполнить область, когда Раздел B скрыт.

http://docs.jquery.com/Effects/hide

...