Виджет Checkboxradio

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

Описание: Преобразует элементы ввода типа радио и чекбокс в стилизуемые кнопки.

Быстрое навигацияПримеры

Оригинальные HTML-элементы ввода невозможно стилизовать согласованно. Этот виджет позволяет обойти это ограничение, помещая связанную метку поверх скрытого элемента ввода и имитируя сам элемент чекбокса или радиокнопки с помощью (необязательной) иконки. Исходный элемент ввода всё ещё получает фокус и все события, метка просто предоставляет стилизуемую кнопку сверху.

Стилизация

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

ui-checkboxradio: Элемент ввода типа радио или чекбокса. Будет скрыт, а его связанная метка расположена сверху.
- ui-checkboxradio-label: Метка, связанная с элементом ввода. Если элемент ввода выбран, он также получит класс ui-checkboxradio-checked. Если элемент ввода типа радио, он также получит класс ui-checkboxradio-radio-label.
- ui-checkboxradio-icon: Если параметр icon включен, сгенерированная иконка получит этот класс.
- ui-checkboxradio-icon-space: Если параметр icon включен, дополнительный элемент с этим классом будет добавлен между текстовой меткой и иконкой.

Зависимости

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

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

Параметры

классы

Тип: Объект

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

{
  "ui-checkboxradio-label": "ui-corner-all",
  "ui-checkboxradio-icon": "ui-corner-all"
}

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

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

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

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

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

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

отключен

Тип: Булево

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

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

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

Инициализируйте checkboxradio с заданным параметром disabled:

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

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

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

иконка

Тип: Булево

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

Определяет отображение иконки чекбокса или радиокнопки в зависимости от типа элемента ввода.

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

Инициализируйте checkboxradio с заданным параметром icon:

$( ".selector" ).checkboxradio({
  icon: false
});

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

// Getter
var icon = $( ".selector" ).checkboxradio( "option", "icon" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "icon", false );

метка

Тип: Строка

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

HTML для отображения на кнопке. Если не указано (null), используется HTML-контент связанного элемента <label>.

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

Инициализируйте checkboxradio с заданным параметром label:

$( ".selector" ).checkboxradio({
  label: "custom label"
});

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

// Getter
var label = $( ".selector" ).checkboxradio( "option", "label" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "label", "custom label" );

Методы

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

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

Этот метод не принимает аргументы.

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

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

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

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

Деактивирует checkboxradio.

Этот метод не принимает аргументы.

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

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

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

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

Активирует checkboxradio.

Этот метод не принимает аргументы.

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

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

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

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

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

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

Этот метод не принимает аргументы.

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

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

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

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

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

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

optionName

Тип: Строка

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

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

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

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

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

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

Эта подпись не принимает аргументы.

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

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

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

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

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

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

optionName

Тип: Строка

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

Тип: Объект

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

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

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

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

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

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

options

Тип: Объект

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

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

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

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

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

Обновляет визуальное состояние виджета. Полезно для обновления после изменения состояния элемента-родственника (checked или disabled) программно.

Этот метод не принимает аргументы.

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

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

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

События

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

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

event

Тип: Event
ui

Тип: Объект

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

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

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

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

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

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

Пример:

Простой jQuery UI checkboxradio

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checkboxradio 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>
 
<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>
 
<script>
$( "input[type='radio']" ).checkboxradio();
</script>
 
</body>
</html>

Виджет Checkboxradio