экземпляр JQuery UI - Увеличение (Resizable)

Предыдущий: Пример JQuery UI - место (Droppable)

Далее: Jquery UI пример - выбор ( по выбору пользователя )

Используйте мышь, чтобы изменить размер элемента.

Для получения более подробной информации о взаимодействии перезначительном см API документации изменяемый размер виджетов (The перезначительном виджетов) .

По умолчанию функция

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Масштабирование (Resizable) </ h3>
</ Div>
 
 
</ Body>
</ HTML>

анимация

Используйте animate вариант (Boolean) позволяет масштабирования поведение анимации. Когда эта опция установлена истина, контур перетащить в нужное место, прекратите перетаскивание, когда элементы анимированы для регулировки размера.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - Аниме </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  .ui-изменяемыми-хелперов {граница: 1px пунктирная серая;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      анимации: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Анимация </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Ограничение области масштабирования

Очерченные границы масштабирования. С помощью containment параметр , чтобы указать родительский DOM элемент или селектор JQuery, такие как "документ"..

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - ограничить область масштабирования </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #container {ширина: 300px; высота: 300px;}
  #container h3 {выравнивания текста: центр; маржа: 0; краю дна: 10px;}
  #resizable {фон положение: верхний левый; ширина: 150px, высота: 150px;}
  #resizable, #container {утеплитель: 0.5em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      сдерживание: "#container"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "контейнер" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> предел </ h3>
  <Div ID = "изменяемыми" класс = "Пользовательский интерфейс-состояние-активный">
    <H3 класс = "UI-виджет-заголовок"> Масштабирование (Resizable) </ h3>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

Отложенный старт

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - отложенный старт </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable, # resizable2 {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3, # resizable2 h3 {выравнивания текста: центр; маржа: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Задержка: 1000
    });
 
    $ ( "# Resizable2") .resizable ({
      Расстояние: 40
    });
  });
  </ Script>
</ Head>
<Body>
 
<H3 класс = "Docs"> Время задержки (мс): </ h3>
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Время </ h3>
</ Div>
 
<H3 класс = "Docs"> задержки расстояния (ПВ): </ h3>
<Div ID = "resizable2" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> расстояние </ h3>
</ Div>
 
 
</ Body>
</ HTML>

помощник

Установив helper параметр для класса CSS, при увеличении масштаба , чтобы отобразить только элементы контура.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - ассистент </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  .ui-изменяемыми-хелперов {граница: 2px пунктирная # 00F;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      помощник: "Пользовательский интерфейс-изменяемыми-помощник"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Assistant </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Максимальный / минимальный размер

Используйте maxHeight , maxWidth , minHeight и minWidth опция ограничивает максимальный или минимальный элемент изменяемыми ширину или высоту.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - максимальный / минимальный размер </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 200px; высота: 150px; обивка: 5px;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      MaxHeight: 250,
      MaxWidth: 350,
      MinHeight: 150,
      MinWidth: 200
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Zoom In / Out </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Сохранять пропорции

Поддерживать текущее соотношение сторон или установить новый предел масштабирования соотношения сторон. Установка aspectRatio опции верно, и , возможно , поставить новую скорость (например, 4/3).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - Сохранять пропорции </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 160px; высота: 90px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      AspectRatio: 16/9
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Сохранять пропорции </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Привязка к сетке

Изменяемые элементы выравниваются по сетке. По grid вариант размера для установки ячеек сетки ( в пикселях высота и ширина).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - Привязка к сетке </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Сетка: 50
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Сетка </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Синхронный Увеличить

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - Синхронный Увеличение </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {фон положение: верхний левый;}
  #resizable, #also {ширина: 150px; высота: 120px; обивка: 0.5em;}
  #resizable h3, #also h3 {выравнивания текста: центр; маржа: 0;}
  #also {маржа-топ: 1em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      alsoResize: "#also"
    });
    $ ( "#also") .resizable ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджет-заголовок">
  <H3 класс = "Пользовательский интерфейс-состояние-активный"> Увеличить </ h3>
</ Div>
 
<Div ID = "также" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Увеличение синхронизации </ h3>
</ Div>
 
 
</ Body>
</ HTML>

Text Box

Масштабируемость текстовое поле.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - Box </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-изменяемыми-се {
    внизу: 17px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      ручками: "се"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Textarea ID = "изменяемого размера" строк = "5" смещ_по_столбцам = "20"> </ TextArea>
 
 
</ Body>
</ HTML>

Визуальная обратная связь

Устанавливая ghost опция истинна, то элемент может отображаться в полупрозрачном во время трансфокации, вместо отображения фактического элемента.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI масштабирование (Resizable) - визуальная обратная связь </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #resizable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  #resizable h3 {выравнивания текста: центр; маржа: 0;}
  .ui-изменяемыми-призрак {границы: 1px пунктирная серая;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      призрак: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "изменяемыми" класс = "UI-виджета-контента">
  <H3 класс = "UI-виджет-заголовок"> Дух </ h3>
</ Div>
 
 
</ Body>
</ HTML>