Зміна розмірів елементів на jquery. Робота з шириною елемента. Обмеження допустимих меж для зміни розмірів елементів

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

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

Тест-Код:

Тут контент ...

під спойлером

З урахуванням побажань, - більш розгорнутий код:

Розширений код

код:

Тут контент ...

Повертає, встановлює ширину елемента.

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

Sample paragraph to test width

приклад: Задати при кліці по елементам div різну ширину.

width demo

Масштабування елементів (взаємодія Resizable)

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

jQuery UI

Астра

.png "/\u003e

Лілія

.png "/\u003e

запустити приклад

У цьому прикладі створюються два елементи 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	Визначає максимальну висоту, до якої можна змінити розміри елементу. Значення за замовчуванням - , воно означає відсутність обмежень
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 \u003d "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 \u003d "list" ~ gt ~ ~ lt ~ li class \u003d "item" style \u003d "width: 60px" ~ gt ~ Високо ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item iioo" style \u003d "width: 75px" ~ gt ~ Швидко ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" style \u003d "width: 90px" ~ gt ~ Сильно ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ br ~ gt ~ ~ lt ~ ul id \u003d "list2" ~ gt ~ ~ lt ~ li class \u003d "item" style \u003d "width: 60px" ~ gt ~ Вище ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" style \u003d "width: 75px" ~ gt ~ швидше ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" style \u003d "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 ~