Виджет кнопки

Виджет кнопкиверсия добавлена: 1.8, переработана: 1.12

Описание: Темабельные кнопки.

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

Виджет кнопки расширяет стандартные элементы форм, такие как кнопки, поля ввода и якоря, до темабельных кнопок с соответствующими стилями при наведении и активном состоянии.

При использовании поля ввода типа button, submit или reset поддержка ограничена простыми текстовыми метками без иконок.

Примечание: Виджет кнопки был переработан в версии 1.12. Некоторые параметры изменились, вы можете найти документацию по старым параметрам в документации кнопки 1.11. Этот виджет раньше объединял поддержку полей ввода типа радио и флажка, это устарело, используйте вместо него виджет checkboxradio. Он также раньше объединял виджет buttonset, это тоже устарело, используйте вместо него виджет controlgroup.

Тематизация

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

ui-button: Элемент DOM, представляющий кнопку. Этот элемент также будет иметь класс ui-button-icon-only, в зависимости от параметров отображать метку и иконка.
- ui-button-icon: Элемент, используемый для отображения значка кнопки. Он будет присутствовать только в случае, если в параметре иконка предоставлена иконка.
- ui-button-icon-space: Разделительный элемент между значком и текстовым содержимым кнопки. Он будет присутствовать только в случае, если в параметре иконка предоставлена иконка, а параметр позиция иконки установлен в "beginning" или "end".

Зависимости

Дополнительные заметки:

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

Параметры

классы

Тип: Объект

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

{
  "ui-button": "ui-corner-all",
}

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

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

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

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

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

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

отключено

Тип: Булево

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

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

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

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

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

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

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

иконка

Тип: Строка

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

Иконка для отображения с или без текста (см. параметр showLabel). По умолчанию иконка отображается слева от текстовой метки. Позиционирование можно контролировать с помощью параметра iconPosition.

Значение для этого параметра должно соответствовать имени класса иконки, например, "ui-icon-gear".

При использовании поля ввода типа button, submit или reset иконки не поддерживаются.

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

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

$( ".selector" ).button({
  icon: "ui-icon-gear"
});

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

// Getter
var icon = $( ".selector" ).button( "option", "icon" );
 
// Setter
$( ".selector" ).button( "option", "icon", "ui-icon-gear" );

позиция иконки

Тип: Строка

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

Где отобразить icon: допустимые значения — "beginning", "end", "top" и "bottom". В отображении слева направо (LTR) "beginning" относится к левой стороне, в отображении справа налево (RTL, например, на иврите или арабском), — к правой.

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

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

$( ".selector" ).button({
  iconPosition: "end"
});

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

// Getter
var iconPosition = $( ".selector" ).button( "option", "iconPosition" );
 
// Setter
$( ".selector" ).button( "option", "iconPosition", "end" );

метка

Тип: Строка

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

HTML для отображения на кнопке. Если не указано (null), используется HTML-содержимое элемента или его атрибут value, если элемент — поле ввода типа submit или reset, или HTML-содержимое связанного элемента label, если элемент — поле ввода типа radio или checkbox.

При использовании поля ввода типа button, submit или reset поддержка ограничена простыми текстовыми метками.

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

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

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

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

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

отображать метку

Тип: Булево

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

Определяет, отображать ли метку. При установке в значение false текст не будет отображаться, но необходимо использовать параметр icon, в противном случае параметр showLabel будет проигнорирован.

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

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

$( ".selector" ).button({
  showLabel: false
});

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

// Getter
var showLabel = $( ".selector" ).button( "option", "showLabel" );
 
// Setter
$( ".selector" ).button( "option", "showLabel", false );

Методы

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

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

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

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

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

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

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

Отключает кнопку.

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

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

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

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

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

Включает кнопку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

optionName

Тип: Строка

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

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

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

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

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

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

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

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

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

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

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

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

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

optionName

Тип: Строка

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

Тип: Объект

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

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

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

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

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

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

options

Тип: Объект

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

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

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

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

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

Обновляет визуальное состояние кнопки. Полезно для обновления состояния кнопки после изменения состояния отключенной родного элемента программно.

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

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

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

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

События

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

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

event

Тип: Event
ui

Тип: Объект

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

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

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

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

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

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

Пример:

Простая кнопка jQuery UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>button demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<button>Button label</button>
 
<script>
$( "button" ).button();
</script>
 
</body>
</html>

Виджет кнопки