Button :: Кнопка
Описание: Кнопки с возможностью задания тем и множества кнопок.Description: Themable buttons and button sets.
Пример странички Кнопка дефолтная (Default functionality):
можно посмотреть здесь.
Пример странички Кнопка радио (Radios):
можно посмотреть здесь.
Пример странички Кнопка отметка галкой (Checkboxes):
можно посмотреть здесь.
Пример странички Кнопка иконка (Icons):
можно посмотреть здесь.
Пример странички Кнопка Панель Управления (Toolbar):
можно посмотреть здесь.
Пример странички Кнопка Раздела (Split Button):
можно посмотреть здесь.
Теория
Тесты по теории можно посмотреть здесь.
Options (Опции)
disabled
Type: Boolean
Default: false
Disables the button if set to true. Выключает кнопку, если опция установлена на значение true (истина).
Code examples: (Примеры кода: )
Initialize the button with the disabled option specified:
Инициализация кнопки с определенной опцией disabled:
$( ".selector" ).button({ disabled: true }); |
Get or set the disabled option, after initialization::
Можно получить или установить опцию disabled после инициализации:
// gettervar disabled = $( ".selector" ).button( "option", "disabled" );// setter$( ".selector" ).button( "option", "disabled", true ); |
icons
Type: Object
Default: { primary: null, secondary: null }
Icons to display, with or without text (see text option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the primary and secondary properties must be a class name, e.g., "ui-icon-gear". For using only one icon: icons: { primary: "ui-icon-locked" }. For using two icons: icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }.
Иконка для показа, с или без текста (см опцию text (текст)). По умолчанию, первая иконка отображается слева текста и вторая - справа. Позиционирование контролируется через CSS. Значения для первого и второго значения должны быть именем класса, например, "ui-icon-gear". Для использования только одной иконки: icons: { primary: "ui-icon-locked" }. Для использования двух иконок: icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }.
Code examples: (Примеры кода: )
Initialize the button with the icons option specified:
Инициализация Кнопки с определенной опцией icons:
$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }); |
Get or set the icons option, after initialization:
Можно получить или установить опцию icons после инициализации:
// gettervar icons = $( ".selector" ).button( "option", "icons" );// setter$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } ); |
label
Type: String
Default: null
Text to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.
Текст для показа на кнопке. Когда неопределен (null), используется код HTML элемента или его атрибут value (значение), в случае, если элемент - input тип submit или reset, или если HTML контент связанного элемента label (если элемент input типа radio или checkbox).
Code examples: (Примеры кода: )
Initialize the button with the label option specified:
Инициализация Кнопки с определенной опцией label:
$( ".selector" ).button({ label: "custom label" }); |
Get or set the label option, after initialization:
Можно получить или установить опцию label после инициализации:
// gettervar label = $( ".selector" ).button( "option", "label" );// setter$( ".selector" ).button( "option", "label", "custom label" ); |
text
Type: Boolean
Default: true
Whether to show the label. When set to false no text will be displayed, but the icons option must be enabled, otherwise the text option will be ignored.
Показывать ли label (лейбл). Когда опция установлена на значение false (ложь) текст не показывается, но при этом опция icons (иконки) должны быть активной, иначе опция text будет игнорирована.
Code examples: (Примеры кода: )
Initialize the button with the text option specified:
Инициализация Кнопки с определенной опцией text:
$( ".selector" ).button({ text: false }); |
Get or set the text option, after initialization:
Можно получить или установить опцию text после инициализации:
// gettervar text = $( ".selector" ).button( "option", "text" );// setter$( ".selector" ).button( "option", "text", false ); |
Methods (Методы)
destroy()
Removes the button functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.
Полностью удаляет функциональность кнопки. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).button( "destroy" ); |
disable()
Disables the button.
• This method does not accept any arguments.
Выключает кнопку (делает кнопку ненажимаемой).
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).button( "disable" ); |
enable()
Enables the button.
• This method does not accept any arguments.
Включает кнопку (делает кнопку нажимаемой).
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).button( "enable" ); |
option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).button( "option", "disabled" ); |
option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current button options hash.
• This method does not accept any arguments.
Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений кнопки.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).button( "option" ); |
option( optionName, value )
Sets the value of the button option associated with the specified optionName.
Устанавливает значение опции кнопки, связанное с определенным optionName (именем опции).
• optionName
Type: String
The name of the option to set.
Имя опции для установки.
• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).button( "option", "disabled", true ); |
option( options )
Sets one or more options for the button.
Устанавливает одну или более опций для кнопки.
• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).button( "option", { disabled: true } ); |
refresh()
Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.
• This method does not accept any arguments.
Обновляет видимое состояние кнопки. Полезно для обновления состояния кнопки, когда исходное состояние опций checked (отмеченный) или disabled (выключенный) изменяется программным путем.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).button( "refresh" ); |
widget()
Returns a jQuery object containing the element visually representing the button.
• This method does not accept any arguments.
Возвращает объект jQuery, содержащий элемент, визуально представляющий кнопку.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).button( "widget" ); |
Events (События)
create( event, ui )
Type: buttoncreate
Triggered when the button is created.
Активируется при создании кнопки.
• event
Type: Event
• ui
Type: Object
Code examples: (Примеры кода: )
Initialize the button with the create callback specified:
$( ".selector" ).button({ create: function( event, ui ) {}}); |
Bind an event listener to the buttoncreate event: <
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); |
Overview (Обзор)
Button enhances standard form elements like buttons, inputs and anchors to themable buttons with appropiate hover and active styles.
In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons. Their associated label is styled to appear as the button, while the underlying input is updated on click. For the association to work properly, give the input an id attribute, and refer to that in the label's for attribute. Don't nest the input inside the label, as that causes accessbility problems.
In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling .buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendants and applying .button() to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's destroy method.
When using an input of type button, submit or reset, support is limited to plain text labels with no icons.
Кнопки (Buttons) плагина UI библиотеки jQuery расширяют возможности стандартных элементов форм HTML, таких как buttons (кнопки), inputs (инпуты - ввод данных) and anchors (якоря-ссылки), давая возможность подобрать нужную тему для стилей hover (элемент под прицелом) и active (активный, выбранный элемент).
В дополнение к кнопкам нажатия, радио кнопкам и чек-боксам (инпуты типов radio и checkbox) могут быть конвертированы в кнопки. Их связанный лейбл стилизуется и появляется как кнопка, в тоже время ввод обновляется по клику. Чтобы связанные элементы работали правильно, дайте инпуту значение атрибута id и обращайтесь к нему в лейбле для атрибута. Не делайте вложений инпута внутрь лейбла, это вызывает проблемы доступа.
Для группировки радио кнопок, Кнопка также имеет дополнительный виджет, называемый Buttonset (группа Кнопок). Buttonset используется выбором элементом контейнера (который содержит радио кнопки) и вызовом .buttonset(). Buttonset также поддерживает визуальную группировку, и следовательно, может быть использован, когда вы работаете с группой кнопок. Он работает путем выбора всех подиченных элементов, применяя к ним .button(). Вы можете включать и выключать Buttonset, что приведет к включению/выключению всех кнопок множества. Разрушение множества кнопок приводит к вызову метода destroy для каждой кнопки множества.
Когда используются типы кнопок инпута (submit или reset), поддержка ограничивается простым текстом, без иконок.
Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.
Examples: (Примеры: )
Example: A simple jQuery UI Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>button demo</title></head><body><button>Button label</button><script>$( "button" ).button();</script></body></html> |
Example: A simple jQuery UI Buttonset
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>button demo</title></head><body><div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label></div><script>$( "#radio" ).buttonset();</script></body></html> |
Примеры Кнопок на этом сайте: Дефолтная, Радио, Галка, Иконка, Панелька, Раздела.
