control.Button
Расширяет ICustomizable, ISelectableControl.
Элемент управления "Кнопка". Стандартный макет кнопки изменяет свой внешний вид в зависимости от размеров карты. Если карта имеет большую ширину, то кнопка принимает вид "картинка + текст". Если карта среднего размера, кнопка принимает вид "текст". Если карта небольшого размера, то в макете кнопки отображается только иконка. Если для кнопки не задана иконка, то во всех состояниях будет отображаться текст и наоборот.
Конструктор | Поля | События | Методы
Конструктор
control.Button([parameters])
Параметры:
Параметр |
Значение по умолчанию |
Описание |
— |
Тип: Object|String Параметры кнопки или строка - содержимое кнопки в виде HTML. |
|
— |
Тип: Object Данные кнопки. |
|
— |
Тип: String Содержимое кнопки в виде HTML. |
|
— |
Тип: String URL иконки кнопки. Стандартный макет кнопки рассчитан на иконку размером 16x16 пикселей. |
|
— |
Тип: String Текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. |
|
— |
Тип: Object Опции кнопки. |
|
false |
Тип: Boolean Регистрирует ли кнопка свои размеры в менеджере отступов карты map.margin.Manager. |
|
"right" |
Тип: String Сторона, по которой нужно выравнивать элемент управления. Может принимать три значения: "left", "right" или "none". При значении "left" или "right" элементы управления выстраиваются друг за другом, начиная от левого или правого края карты соответственно. При значении "none" элементы управления позиционируется только по значениям опций left, right, bottom, top относительно границ карты. Также смотрите описание опции position. |
|
0 |
Тип: Number Приоритет расположения элемента управления. Элемент с максимальным приоритетом находится ближе к указанному в свойстве float краю карты. Не работает при float = "none". |
|
— |
Тип: ISelectableControlLayout|String Конструктор макета элемента управления, реализующий интерфейс ISelectableControlLayout или ключ макета в хранилище layout.storage. В конструктор макета передается объект, содержащий поля:
|
|
90 |
Тип: Number|Number[] Максимальная ширина кнопки в различных состояниях. Если задано число, то считается, что кнопка имеет одинаковые максимальные размеры во всех состояниях. Если задан массив, то он будет трактоваться как максимальная ширина кнопки в различных состояниях - от меньшего к большему. Количество доступных состояний задается в экземпляре класса control.Manager через опцию states. Этот класс обычно является полем Map.controls. По умолчанию у элементов управления есть три состояния - ['small', 'medium', 'large']. |
|
— |
Тип: Object Объект, описывающий позицию элемента управления. При указании опции position значение опции float автоматически трактуется как "none". |
|
'auto' |
Тип: Number|String Положение относительно нижнего края карты. |
|
'auto' |
Тип: Number|String Положение относительно левого края карты. |
|
'auto' |
Тип: Number|String Положение относительно правого края карты. |
|
'auto' |
Тип: Number|String Положение относительно верхнего края карты. |
|
true |
Тип: Boolean Опция, описывающая поведение кнопки.
|
|
'auto' |
Тип: String Параметр, отвечающий за внешний вид стандартного макета кнопки. Может принимать значения:
|
|
true |
Тип: Boolean Признак того, что элемент управления отображается. |
|
— |
Тип: Object Объект, описывающий состояние кнопки. |
|
true |
Тип: Boolean Признак, активна ли кнопка. |
|
false |
Тип: Boolean Признак, нажата ли кнопка. |
Примеры:
1.
// Пример 1.
// Создадим кнопку и добавим ее на карту.
var button = new ymaps.control.Button({
data: {
// Зададим иконку для кнопки.
image: 'images/button.jpg',
// Текст на кнопке.
content: 'Save',
// Текст всплывающей подсказки.
title: 'Click to save the route'
},
options: {
// Зададим опции кнопки.
selectOnClick: false,
// У кнопки будет три состояния: иконка, текст и текст + иконка.
// Зададим три значения ширины кнопки для всех состояний.
maxWidth: [30, 100, 150]
}
});
map.controls.add(button, { float: 'right', floatIndex: 100 });
2.
// Пример 2
// Создание кнопки с пользовательским макетом.
var button = new ymaps.control.Button({
data: {
content: 'Red button',
title: 'Press the button'
},
options: {
layout: ymaps.templateLayoutFactory.createClass(
// Если кнопка не нажата, применяется CSS стиль 'myButton'.
// Если кнопка нажата, к ней применятся CSS-стили 'myButton' и 'myButtonSelected'.
"<div class='myButton {% if state.selected %}myButtonSelected{% endif %}' title='{{ data.title }}'>" +
"{{ data.content }}" +
"</div>"
),
// Чтобы другие элементы управления корректно позиционировались по горизонтали,
// нужно обязательно задать максимальную ширину для макета.
maxWidth: 150
}});
map.controls.add(button, { float: 'left', floatIndex: 0 });
// Можно задать позиционирование относительно краев карты. В этом случае
// значение опции maxWidth не влияет на позиционирование
// элементов управления.
map.controls.add(button, { float: 'none', position: {left: '5px', top: '5px'} });
Поля
Имя |
Тип |
Описание |
Данные кнопки. Имена полей, доступных через метод data.Manager.get:
|
||
Менеджер событий. Унаследовано от IEventEmitter. |
||
Менеджер опций. Унаследовано от IControl. |
||
Событие, сигнализирующее о том, что кнопка была нажата. В отличии от click генерируется только если состояние isEnabled == true. Экземпляр класса Event. |
||
Состояние кнопки. Имена полей, доступных через метод data.Manager.get:
|
События
Имя |
Описание |
Нажатие на кнопку. Экземпляр класса Event. |
|
Элемент управления не выбран. Унаследовано от ISelectableControl. |
|
Элемент управления стал недоступным. Унаследовано от ISelectableControl. |
|
Элемент управления стал доступным. Унаследовано от ISelectableControl. |
|
Изменение в опциях объекта. Унаследовано от ICustomizable. |
|
Сменился родительский объект. Поля данных:
Унаследовано от IChild. |
|
Элемент управления выбран. Унаследовано от ISelectableControl. |
Методы
Имя |
Возвращает |
Описание |
deselect() |
Отменяет выбор элемента управления (выключает). Унаследован от ISelectableControl. |
|
disable() |
Делает элемент управления недоступным (запрещены пользовательские действия). Унаследован от ISelectableControl. |
|
enable() |
Делает элемент управления доступным (разрешены пользовательские действия). Унаследован от ISelectableControl. |
|
getMap() |
Возвращает ссылку на карту. |
|
IControlParent|null |
Возвращает ссылку на родительский объект или null, если родительский элемент не был установлен. Унаследован от IControl. |
|
Boolean |
Возвращает true - элемент управления доступен, false - недоступен. Унаследован от ISelectableControl. |
|
Boolean |
Возвращает true - элемент управления выбран, false - не выбран. Унаследован от ISelectableControl. |
|
select() |
Выбирает (включает) элемент управления. Унаследован от ISelectableControl. |
|
Устанавливает родительский объект. Если передать значение null, то элемент управления будет только удален из текущего родительского объекта. Унаследован от IControl. |
Описание полей
data
{data.Manager} data
Данные кнопки. Имена полей, доступных через метод data.Manager.get:
- image - иконка кнопки, если есть;
- content - cодержимое кнопки в виде HTML;
- title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши.
press
press
Событие, сигнализирующее о том, что кнопка была нажата. В отличии от click генерируется только если состояние isEnabled == true. Экземпляр класса Event.
state
{data.Manager} state
Состояние кнопки. Имена полей, доступных через метод data.Manager.get:
- selected - признак, нажата ли кнопка;
- enabled - признак, активна ли кнопка.
- size - размер, который в данный момент выставлен кнопке;
Пример:
var button = new ymaps.control.Button('Редактировать');
// Зададим состояние кнопки "нажата" -
// аналогично вызову метода button.select();
button.state.set('selected', true);
Описание событий
click
Нажатие на кнопку. Экземпляр класса Event.
Описание методов
getMap
{Map} getMap()
Возвращает ссылку на карту.