control.Button

Расширяет ICustomizable, ISelectableControl.

Элемент управления "Кнопка". Добавляется в тулбар.

Конструктор

control.Button([params[, options]])

Параметры:

Параметр	Значение по умолчанию	Описание
`params`	—	Тип: Object\|String Параметры кнопки или строка - содержимое кнопки в виде HTML.
`params.data`	—	Тип: Object Данные кнопки.
`params.data.content`	—	Тип: String Содержимое кнопки в виде HTML.
`params.data.image`	—	Тип: String Иконка кнопки, если есть.
`params.data.imageDisabled`	—	Тип: String Иконка для "отключенного" состояния кнопки.
`params.data.imageSelected`	—	Тип: String Иконка для "выбранного" состояния кнопки.
`params.data.title`	—	Тип: String Текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши.
`options`	—	Тип: Object Опции кнопки.
`options.layout`	—	Тип: Function\|String Макет элемента управления. В конструктор макета передается объект, содержащий поля: • control - ссылка на элемент управления; • options - менеджер опций элемента управления control.Button.options; • data - менеджер данных элемента управления control.Button.data; • state - менеджер состояния элемента управления control.Button.state. Макет меняет свой внешний вид на основе данных, состояния и опций элемента управления. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей control.Button.state в зависимости от полученных команд. (Тип: конструктор объекта с интерфейсом ISelectableControlLayout или ключ макета).
`options.minWidth`	0	Тип: Number Минимальная ширина кнопки.
`options.position`	{ top: 5, left: 5 }	Положение элемента управления над картой. Задается в виде объекта со следующими полями: • top - отступ от верхнего края контейнера карты в пикселах; • right - отступ от правого края контейнера карты в пикселах; • bottom - отступ от нижнего края контейнера карты в пикселах; • left - отступ от левого края контейнера карты в пикселах. Если при этом заданы одновременно и top, и bottom, то значение bottom игнорируется. Аналогично, если заданы одновременно и left, и right, то значение right игнорируется. Если элемент управления добавляется в группу элементов (например, в тулбар или раскрывающийся список), то значение position не применяется.
`options.selectOnClick`	true	Тип: Boolean Опция, описывающая поведение кнопки. • true - кнопка становится "нажатой" после клика; • false - кнопка не меняет свой внешний вид после клика на нее.
`options.visible`	true	Тип: Boolean Признак того, что элемент управления отображается.

Примеры:

// Пример 1.
// Создание кнопки и добавление ее на карту.
var button = new ymaps.control.Button({
         data: {
             // Зададим иконку для кнопки
             image: 'images/button.jpg',
             // Текст на кнопке.
             content: 'Сохранить',
             // Текст всплывающей подсказки.
             title: 'Нажмите для сохранения маршрута'
         }
    }, {
        // Зададим опции для кнопки.
        selectOnClick: false
    });
map.controls.add(button, {top: 5, right: 5});

// Пример 2.
// Создание кнопки с пользовательским макетом
var button = new ymaps.control.Button({
        data: {
            content: 'Красная кнопка',
            title: 'Нажмите на кнопку'
        }
    }, {
        layout: ymaps.templateLayoutFactory.createClass(
            // Если кнопка не нажата, к ней применится css-стиль 'myButton'
            // Если кнопка нажата, к ней применятся css-стили 'myButton' и 'myButtonSelected'.
            "<div class='myButton [if state.selected]myButtonSelected[endif]' title='$[data.title]'>" +
            "$[data.content]" +
            "</div>"
        )
    });
map.controls.add(button);

Поля

Имя	Тип	Описание
data	data.Manager	Данные кнопки. Имена полей, доступных через метод data.Manager.get: • image - иконка кнопки, если есть; • imageDisabled - иконка для "отключенного" состояния кнопки; • imageSelected - для "выбранного" состояния кнопки; • content - cодержимое кнопки в виде HTML; title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши.
events	IEventManager	Менеджер событий. Унаследовано от IEventEmitter.
options	IOptionManager	Менеджер опций. Унаследовано от ICustomizable.
state	data.Manager	Состояние кнопки. Имена полей, доступных через метод data.Manager.get: • selected - признак, нажата ли кнопка; • enabled - признак, активна ли кнопка; • pressed - признак того, что кнопка зажата пользователем.

События

Имя	Описание
click	Нажатие на кнопку. Экземпляр класса Event.
deselect	Элемент управления не выбран. Унаследовано от ISelectableControl.
disable	Элемент управления стал недоступным. Унаследовано от ISelectableControl.
enable	Элемент управления стал доступным. Унаследовано от ISelectableControl.
mapchange	Сменилась карта. Поля данных: • oldMap - старая карта; • newMap - новая карта. Унаследовано от IChildOnMap.
optionschange	Изменение в опциях объекта. Унаследовано от ICustomizable.
parentchange	Сменился родительский объект. Поля данных: • oldParent - старый родитель; • newParent - новый родитель. Унаследовано от IChild.
select	Элемент управления выбран. Унаследовано от ISelectableControl.

Методы

Имя	Возвращает	Описание
deselect()		Отменяет выбор элемента управления (выключает). Унаследован от ISelectableControl.
disable()		Делает элемент управления недоступным (запрещены пользовательские действия). Унаследован от ISelectableControl.
enable()		Делает элемент управления доступным (разрешены пользовательские действия). Унаследован от ISelectableControl.
getParent()	IControlParent	Returns ссылку на родительский объект. Унаследован от IControl.
isEnabled()	Boolean	Returns true - элемент управления доступен, false - недоступен. Унаследован от ISelectableControl.
isSelected()	Boolean	Returns true - элемент управления выбран, false - не выбран. Унаследован от ISelectableControl.
select()		Выбирает (включает) элемент управления. Унаследован от ISelectableControl.
setParent(parent)	IChildOnMap	Устанавливает родительский объект. Унаследован от IControl.

Описание полей

data

{data.Manager} data

Данные кнопки. Имена полей, доступных через метод data.Manager.get:

• image - иконка кнопки, если есть;

• imageDisabled - иконка для "отключенного" состояния кнопки;

• imageSelected - для "выбранного" состояния кнопки;

• content - cодержимое кнопки в виде HTML;

• title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши.

state

{data.Manager} state

Состояние кнопки. Имена полей, доступных через метод data.Manager.get:

• selected - признак, нажата ли кнопка;

• enabled - признак, активна ли кнопка;

• pressed - признак того, что кнопка зажата пользователем.

Пример:

var button = new ymaps.control.Button('Редактировать');
// Зададим состояние кнопки "нажата" -
// аналогично вызову метода button.select();
button.state.set('selected', true);

Описание событий

click

Нажатие на кнопку. Экземпляр класса Event.

Была ли статья полезна?

Collection

control.Group