Эмуляция изменяемого размера кадра - PullRequest
Новая
       6

Эмуляция изменяемого размера кадра

19 голосов
/ 30 мая 2011

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

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

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

Ответы [ 5 ]

15 голосов
/ 30 сентября 2012

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

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

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

Вы можете найти хорошую демонстрацию здесь: http://methvin.com/splitter/3psplitter.html

4 голосов
/ 28 мая 2012

С моей точки зрения jQuery Resizable или такие js вещи - ваше решение.Пойдите для демонстраций .
В случае использования 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>
2 голосов
/ 01 июня 2011
1 голос
/ 16 марта 2014

Приведенное выше решение Януса Троелсена прекрасно, если вы не возражаете против столов. Я также нашел это решение от SoonDead без таблиц, которое прекрасно работало с Chrome и FF, но пришлось потратить немало времени на IE8. Он находится в StackOverflow как " Эмулировать поведение разделителя фреймов "

0 голосов
/ 30 мая 2011

Я бы посмотрел в Javascript и перетащил поддержку.

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

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

...