Изменение размеров элементов на jquery. Работа с шириной элемента. Ограничение допустимых пределов для изменения размеров элементов

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, - не использующий таймирующий опрос.

Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%-(ыми) размерами, придаём элементу position:relative; . И отслеживаем frame.onresize :

Тест-Код: Тут контент... frame.onresize = function(){ alert("Размеры div #Test изменены."); } setTimeout(function(){ //Тестовое изменение размера через 3сек. document.getElementById("Test").style.width="100px"; },3000); Под спойлером С учётом пожеланий, - более развёрнутый код:

Расширенный код

Код: Тут контент... setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ) var timerResize="first"; frame.onresize = function(){ // frame, - Имя фрейма (name=frame) - cм начало Кода; if(timerResize!=="first")clearTimeout(timerResize); timerResize=setTimeout(function(){ // Задержка для очистки чрезмерных срабатываний; alert("Размеры div #Test изменены."); // Тело обработки события «onresize»; },20) // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события; // актуально при плавных изменениях размера элемента, // либо почти одновременное изменением размера несколькими разными процессами. } },200); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width="100px"; },3000); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width="200px"; },7000);

Возвращает, устанавливает ширину элемента.

version added: 1.0 .width()
Возвращает : Целое число

Получает ширину элемента
version added: 1.0 .width(value)
Тип : Строка или Число

Возвращает : jQuery

Целое число, представляющее количество пикселей, или число с единицей измерения в виде строки.
version added: 1.4.1 .width(function(index, width))
function(index, width)

Тип : Функция

Возвращает : jQuery

Функция, возвращающая ширину, чтобы установить новую. Получает индекс положения элемента в наборе и значение старой ширины. Функция ссылается к текущему элементу.

Разницу между.css("width") и.width() в то, что данный метод возвращает исключительно числовое значение (к примеру, 400, а не 400px). Метод.width() рекомендуется использовать, когда полученное значение необходимо задействовать в математических вычислений.

Данный метод можно использовать для получения ширины документа и окна.

$(window).width(); $(document).width();

Заметьте, что метод.width() всегда возвращает ширину контента, не учитывая от значения свойства CSS box-sizing. Начиная с jQuery 1.8, вам необходимо получить значение свойства box-sizing, затем отнять размер рамки и отступов. Всё это в том случае, если к элементу применяется свойство box-sizing: border-box. Чтобы избежать этих вычислений, используйте.css("width").

Передать в метод.width(value), можно как строку, так и число. Если передано только число, то jQuery автоматом прибавляет “px”. Если строка, то она должна выглядеть так: 100px, 50%, или auto. Просим заметить, что в современных бразуерах в ширину не входят значения отступов и рамки.

Примеры:

Пример : Показать различия значений ширины элементов. Поскольку элементы находятся в iframe, то настоящие размеры могут быть чуть другими.

width demo body { background:yellow; } button { font-size:12px; margin:2px; } p { width:150px; border:1px red solid; } div { color:red; font-weight:bold; } Get Paragraph Width Get Document Width Get Window Width

Sample paragraph to test width

Пример : Задать при клике по элементам div различную ширину.

width demo div { width: 70px; height: 50px; float:left; margin: 5px; background: red; cursor: pointer; } .mod { background: blue; cursor: default; } d d d d d (function() { var modWidth = 50; $("div").one("click", function () { $(this).width(modWidth).addClass("mod"); modWidth -= 8; }); })();

Масштабирование элементов (взаимодействие Resizable)

Взаимодействие Resizable добавляет в элемент манипуляторы, перемещая которые, пользователь может масштабировать элемент путем изменения его размеров. Некоторые браузеры автоматически предоставляют такую возможность для текстовых областей, но взаимодействие Resizable обеспечивает возможность подобного масштабирования для любого элемента в документе. Пример применения данного вида взаимодействия, которое реализуется с помощью метода resizable() , приведен ниже:

jQuery UI #astor, #lily {text-align: center; width: 150px; float: left; margin: 20px} #astor img, #lily img {display: block; margin: auto} $(function() { $("#astor").resizable({ alsoResize: "#astor img" }); }); Астра .png" /> Лилия .png" /> Запустить пример

В этом примере создаются два элемента div, каждый из которых содержит элемент img и текст. В сценарии один из них выбирается, и к нему применяется метод resizable() (с использованием параметра alsoResize, который будет описан далее). Библиотека jQuery UI добавляет к выбранному элементу манипулятор, позволяющий изменять вертикальный и горизонтальный размеры элемента, как видно на рисунке. На рисунке элемент представлен с увеличенной высотой и уменьшенной шириной:

Настройка взаимодействия Resizable

Для настройки взаимодействия Resizable используются свойства, описанные в таблице ниже. Взаимодействие Resizable зависит от взаимодействия Draggable . Это означает, что в дополнение к настройкам, приведенным в таблице, можно использовать настройки взаимодействия Draggable, в том числе такие, как delay, distance, grid и containment.

Свойства взаимодействия Resizable Свойство Описание

alsoResize	Селектор, используемый для выбора элементов, размеры которых должны изменяться одновременно с размерами элемента, к которому применено взаимодействие Resizable. Значение по умолчанию - false, оно означает отсутствие таких элементов
aspectRatio	Если значение этой опции равно true, то изменение размеров элемента будет происходить с сохранением пропорции соотношения сторон. Значение по умолчанию - true
autoHide	Если значение этой опции равно true, то манипуляторы становятся видимыми лишь тогда, когда указатель мыши располагается над элементом. Значение по умолчанию - false
ghost	Если значение этой опции равно true, то при изменении размеров элемента будут видны полупрозрачные контуры, отображающие новые размеры элемента. Значение по умолчанию - true
handles	Определяет, где будут располагаться манипуляторы. Поддерживаемые значения приведены далее
maxHeight	Определяет максимальную высоту, до которой можно изменить размеры элемента. Значение по умолчанию - null, оно означает отсутствие ограничений
maxWidth	Определяет максимальную ширину, до которой можно изменить размеры элемента. Значение по умолчанию - null
minHeight
minWidth	Определяет минимальную высоту, до которой можно изменить размеры элемента

Одновременное изменение размеров других элементов

По моему мнению, наиболее употребительной при настройке взаимодействия Resizable является опция alsoResize. С ее помощью можно определить дополнительные элементы, размеры которых будут изменяться одновременно с размерами элемента, к которому был применен метод resizable(). Я использую эту опцию главным образом для того, чтобы обеспечить синхронное изменение размеров элементов вместе с размерами их родительских элементов.

Мы уже использовали эту возможность в предыдущем примере, определив одновременное изменение размеров элементов img и div. Прежде всего, посмотрим, что происходит, если опция alsoResize не используется. Соответствующий код приведен в примере ниже:

$(function() { $("#astor").resizable(); });

Если опция alsoResize не используется, то изменяются только размеры элемента div. Размеры содержащихся в нем элементов остаются неизменными. Что при этом происходит, показано на рисунке:

Иногда именно такой результат и требуется получить, но лично я использую опцию alsoResize почти во всех случаях применения взаимодействия Resizable. В этом параметре мне нравится то, что выбор подходящих элементов не ограничивается содержимым того элемента, размеры которого изменяются. С помощью этой опции можно указать любой другой элемент, как показано в примере ниже:

$(function() { $("#astor").resizable({ alsoResize: "img, #lily" }); });

В этом сценарии выбор элементов расширен с целью включения других элементов div и img. Таким образом, при изменении размеров одного элемента div jQuery UI будет изменять размеры сразу четырех элементов. Результат представлен на рисунке:

Ограничение допустимых пределов для изменения размеров элементов

Можно ограничить пределы изменения размеров масштабируемых элементов, применив опции maxHeight, maxWidth, minHeight и minWidth. Значениями этих опций могут быть числа, выражающие количество пикселей, или null. Пример использования этих настроек приведен ниже.

Width() .innerWidth() .outerWidth()

Функции возвращают ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины. Имеется несколько вариантов использования функций:

width() — ширина элемента без учета отступов и толщины рамки.
innerWidth() — ширина элемента с учетом размера внутренних отступов (padding).
outerWidth(includeMargin) — ширина элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin).

устанавливает новое значение ширины равное value , для всех выбранных элементов

устанавливает новое значение ширины элементов, равное значению, которое вернет пользовательская функция. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе , value — текущее значение ширины элемента.

Примеры использования:

$("div.content").width()	content .
$(document).width()	возвратит ширину всей страницы
$(".content").width(30)	устанавливает значение ширины в 30 пикселей всем элементам с классом content .
$("div.content").outerWidth()	возвратит ширину первого div-элемента с классом content . В значение высоты будут включены внутренние отступы и толщина рамок
$("div.content").outerWidth(true)	аналогично предыдущему примеру, но в значение ширины будут так же включены внешние отступы.

Замечание 1 : использование функции.width() обычно удобнее, чем .css("width") , поскольку возвращаемое ей значение не содержит окончания "px". То есть в первом случае, вы получите 30, а во втором "30px".

Замечание 2 : важно отметить, что используя метод.width(name) вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each() .

В действии

Увеличим ширину всех элементов во второй строке на 10 пикселей.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ ul{ margin: 10px; } .item{ float: left; height:20px; margin: 1px; padding: 3px; background-color: #eee; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item" style="width:60px"~gt~ Высоко ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Быстро ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Сильно ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2"~gt~ ~lt~li class="item" style="width:60px"~gt~ Выше ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Быстрее ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Сильнее ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list2 .item").width(function(i,val){ return val+10; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~