Виджет Controlgroup

Виджет Controlgroupверсия добавлена: 1.12

Описание: Темы для набора виджетов ввода.

Быстрый переходПримеры

Виджет controlgroup предоставляет визуальную группировку для виджетов кнопка и других виджетов ввода. Controlgroup работает, выбирая все соответствующие потомки, на основе параметра элементы, и применяя к ним соответствующие виджеты, если они загружены. Если виджеты уже существуют, вызывается их метод refresh(). Вы можете включать и выключать controlgroup, что включит и выключит все содержащиеся виджеты. Удаление controlgroup также вызывает метод .destroy() каждого виджета.

Темы

Виджет controlgroup использует фреймворк стилей jQuery UI, чтобы задать свой внешний вид. Если необходима специфическая стилизация controlgroup, можно использовать следующие имена классов CSS для перезаписи или в качестве ключей для параметра classes параметра:

ui-controlgroup: Внешняя контейнер controlgroup. В зависимости от параметра направление, этот элемент также будет иметь классы ui-controlgroup-horizontal или ui-controlgroup-vertical.
- ui-controlgroup-item: Каждый элемент внутри группы.

Зависимости

Фабрика виджетов

Дополнительные примечания:

Этот виджет требует функционального CSS, иначе он не будет работать. Если вы создаёте пользовательскую тему, используйте файл CSS виджета в качестве отправной точки.

Параметры

классы

Тип: Объект

По умолчанию: {}

Укажите дополнительные классы, которые нужно добавить к элементам виджета. Любые классы, указанные в разделе Темы, могут использоваться в качестве ключей для перезаписи их значений. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей обучение об параметре classes.

Примеры кода:

Инициализируйте controlgroup с указанным параметром classes, изменив стилизацию класса ui-controlgroup.

$( ".selector" ).controlgroup({
  classes: {
    "ui-controlgroup": "highlight"
  }
});

Получите или установите свойство параметра classes, после инициализации, здесь читая и изменяя стилизацию класса ui-controlgroup.

// Getter
var themeClass = $( ".selector" ).controlgroup( "option", "classes.ui-controlgroup" );
 
// Setter
$( ".selector" ).controlgroup( "option", "classes.ui-controlgroup", "highlight" );

направление

Тип: Строка

По умолчанию: "horizontal"

По умолчанию, controlgroup отображает элементы управления в горизонтальной компоновке. Используйте этот параметр, чтобы вместо этого использовать вертикальную компоновку.

Примеры кода:

Инициализируйте controlgroup с указанным параметром direction.

$( ".selector" ).controlgroup({
  direction: "vertical"
});

Получите или установите параметр direction после инициализации:

// Getter
var direction = $( ".selector" ).controlgroup( "option", "direction" );
 
// Setter
$( ".selector" ).controlgroup( "option", "direction", "vertical" );

отключен

Тип: Булево

По умолчанию: false

Отключает controlgroup, если установлено true.

Примеры кода:

Инициализируйте controlgroup с указанным параметром disabled.

$( ".selector" ).controlgroup({
  disabled: true
});

Получите или установите параметр disabled после инициализации:

// Getter
var disabled = $( ".selector" ).controlgroup( "option", "disabled" );
 
// Setter
$( ".selector" ).controlgroup( "option", "disabled", true );

элементы

Тип: Объект

По умолчанию:

{
  "button": "input[type=button], input[type=submit], input[type=reset], button, a",
  "controlgroupLabel": ".ui-controlgroup-label",
  "checkboxradio": "input[type='checkbox'], input[type='radio']",
  "selectmenu": "select",
  "spinner": ".ui-spinner-input"
}

Какие дочерние элементы нужно инициализировать как соответствующие виджеты. Два элемента имеют специальное поведение:

controlgroupLabel: Любые элементы, соответствующие селектору для этого, будут обернуты в span с классом ui-controlgroup-label-contents.
spinner: Используется селектор класса как значение. Требует либо ручного добавления класса, либо ручной инициализации спиннера. Может быть переопределен для использования input[type=number], но это также требует пользовательского CSS для удаления нативных числовых элементов управления.

только видимые

Тип: Булево

По умолчанию: true

Устанавливает, нужно ли исключать невидимых потомков при назначении скругленных углов. Когда установлено в false, все потомки controlgroup учитываются при назначении скругленных углов, включая скрытых потомков. Таким образом, если, например, первый потомок controlgroup скрыт, а применяется горизонтальная компоновка по умолчанию, controlgroup, по сути, не будет иметь скругленных углов слева. Аналогично, если controlgroup имеет вертикальную компоновку, и первый потомок скрыт, controlgroup не будет иметь скругленных углов сверху.

Примеры кода:

Инициализируйте controlgroup с указанным параметром onlyVisible.

$( ".selector" ).controlgroup({
  onlyVisible: false
});

Получите или установите параметр onlyVisible после инициализации:

// Getter
var onlyVisible = $( ".selector" ).controlgroup( "option", "onlyVisible" );
 
// Setter
$( ".selector" ).controlgroup( "option", "onlyVisible", false );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность controlgroup. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).controlgroup( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Отключает controlgroup.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).controlgroup( "disable" );

enable()Возвращает: jQuery (только для плагина)

Включает controlgroup.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).controlgroup( "enable" );

instance()Возвращает: Объект

Получает объект экземпляра controlgroup. Если у элемента нет связанного экземпляра, undefined возвращается.

В отличие от других методов виджетов, instance() можно безопасно вызывать для любого элемента после загрузки плагина controlgroup.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода instance:

$( ".selector" ).controlgroup( "instance" );

option( optionName )Возвращает: Объект

Получает значение, в настоящее время связанное с указанным optionName.

Примечание: Для опций, которые имеют объекты в качестве значения, вы можете получить значение определенного ключа, используя нотацию с точкой. Например, "foo.bar" получит значение свойства bar в опции foo.

optionName

Тип: Строка

Имя опции для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).controlgroup( "option", "disabled" );

option()Возвращает: Объект

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

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).controlgroup( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение опции controlgroup, связанной с указанным optionName.

Примечание: Для опций, которые имеют объекты в качестве значения, вы можете установить значение только одного свойства, используя нотацию с точкой для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции для установки.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).controlgroup( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает одну или несколько опций для controlgroup.

options

Тип: Объект

Карта пар "имя опции-значение" для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).controlgroup( "option", { disabled: true } );

refresh()Возвращает: jQuery (только для плагина)

Обрабатывает любые виджеты, которые были добавлены или удалены непосредственно в DOM. Результат зависит от опции items.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода refresh:

$( ".selector" ).controlgroup( "refresh" );

События

create( event, ui )Тип: `controlgroupcreate`

Срабатывает при создании controlgroup.

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализируйте controlgroup со указанным обратным вызовом create:

$( ".selector" ).controlgroup({
  create: function( event, ui ) {}
});

Привяжите обработчик событий к событию controlgroupcreate:

$( ".selector" ).on( "controlgroupcreate", function( event, ui ) {} );

Пример:

Простой jQuery UI controlgroup

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>controlgroup demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
      <input type="radio" id="sizzle" name="project">
      <label for="sizzle">Sizzle</label>
 
      <input type="radio" id="qunit" name="project" checked="checked">
      <label for="qunit">QUnit</label>
 
      <input type="radio" id="color" name="project">
      <label for="color">Color</label>
    </div>
  </fieldset>
</form>
 
<script>
$( "#radio" ).controlgroup();
</script>
 
</body>
</html>

Виджет Controlgroup