Эластирование масштабируемой рамки

Я понимаю, что теги <frameset> и <frame> становятся устаревшими. Есть ли способ эмулировать изменяемые размеры кадров? То, что я хочу, - это узкий разделитель, разделяющий область горизонтально или вертикально, которая движется пользователем, так что, когда одна сторона ее становится меньше, другая сторона становится больше и наоборот. Я не хочу заполнять каждый кадр html-страницей, как обычный кадр, но вместо этого с некоторыми материалами DOM.

Я знаю, что CSS3 имеет атрибут resize, но он контролирует только размер самого себя. Я не уверен, что это будет использоваться для решения.

Я не особо предпочитаю использовать JavaScript, но я не исключаю возможность его использования, если это необходимо.

Ответы

Ответ 1

Не используйте набор фреймов, пожалуйста. Я не думаю, что изменение размера jQuery тоже поможет вам.

Лучший способ сделать это - использовать "сплиттер". Для jquery существует несколько плагинов, которые будут делать это по-разному, и все они на самом деле довольно просты.

Я использовал этот ранее: http://methvin.com/splitter/

Здесь вы можете найти отличную демонстрацию: http://methvin.com/splitter/3psplitter.html

Ответ 2

С моей точки зрения jQuery Resizable или такие вещи js - ваше решение. Пойдите для него demos.
В случае использования jQuery у вас появятся дополнительные возможности:

Максимальный/минимальный размер
Площадь изменения размера.
Задержка начала
Привязка к сетке

Вот пример кода для функции jQuery Resizable по умолчанию:

<style>
    #resizable {
        width: 150px;
        height: 150px;
        display: block;
        border: 1px solid gray;
        text-align: center;
    }
</style>

<script>
    $(function() {
        $("#resizable").resizable();
    });
</script>

<div id="resizable">
    <h3>Resizable</h3>
</div>

Ответ 3

Вам может понравиться эта ссылка для YUI http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html

Пример: http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html

Ответ 4

Решение Janus Troelsen выше отлично, если вы не возражаете против таблиц. Я также нашел это решение SoonDead без таблиц, которое отлично поработало с Chrome и FF, но пришлось потратить довольно неприятное время для IE8. Это на StackOverflow как "Эмуляция поведения сепаратора каретки"

Ответ 5

Я бы заглянул в Javascript и перетащил поддержку.

Фактически, эмулированный набор фреймов может быть всего двумя div и ручкой между ними, которые можно схватить для изменения размера. В JQuery есть примеры, чтобы продемонстрировать, как изменить размер элемента: http://jqueryui.com/demos/resizable/ Я не думаю, что было бы очень сложно расширить эту концепцию, чтобы она соответствовала.

Затем я загрузил документы через AJAX, и это, возможно, полностью заменит фреймы.