Select

Предоставляет возможность выбора на основе псевдо кнопочных элементов.

Инициализация

Для инициализации виджета запустите функцию конструктор select.
                            
rc.select({
    pageX: e.pageX,
    pageY: e.pageY,
    buttons: [
    {
        slug: 1,
        name: 'Выбор 1'
    }, {
        slug: 2,
        name: 'Выбор 2'
    }],
})
                            
                        

Структура данных

Для настройки внешнего вида элементов выбора используйте объект со следующим интерфейсом:
Параметр Описание
classname Наименование пользовательского CSS класса
disabled Флаг определяет доступность элементов названия
icon Наименование иконки семейства material design
Дополнительная информация по настройке
img Url используемой картинки
name Надпись на элементе выбора
slug Идентификатор элемента выбора
tooltip Текст всплывающей подсказки

Настройка виджета

Для настройки воспользуйтесь набором основных параметров:
Параметр Описание
title Основной заголовок
popupMode Режим модального окна
actionButtons Набор кнопок в нижней части виджета
buttons Основной набор кнопок
class Пользовательский CSS-класс для виджета
onlyBackgroundClose Флаг определяет следует ли оставить окно открытым при выборе
                            
// кнопки material
rc.select({
    pageX: e.pageX,
    pageY: e.pageY,
    buttons: [
    {
        slug: 3,
        name: 'Создать',
        icon: 'add',
    }, {
        slug: 2,
        name: 'Посмотреть',
        icon: 'visibility',
        disabled: true
    }, {
        slug: 1,
        classname: 'topline',
        icon: 'delete',
        name: 'Удалить'
    }
]})

//  разные виды кнопок, закрытие при щелчке вне виджета

const fieldMarkers = [
    {slug: 1 },
    {slug: 2 },
    {slug: 3 },
    {slug: 4 },
    {slug: 5 },
    {slug: 6 },
    {slug: 7 },
    {slug: 8 }
];

const buttons = fieldMarkers.map(item => {
    return {
        slug: item.slug,
        name: `
` } }); const actionButtons = [ { slug: 9, name: 'Выбор 1' }, { slug: 10, name: 'Выбор 2' } ]; rc.select({ buttons: buttons, actionButtons: actionButtons, onlyBackgroundClose: true, pageX: e.pageX, pageY: e.pageY, }) // режим модального окна const buttons = [ { slug: 'en', tooltip: 'English', name: 'English', img: 'https://static.tildacdn.com/tild3234-3730-4964-b737-393930366133/3.png' }, { slug: 'ru', tooltip: 'Russian', name: 'Русский', img: 'https://static.tildacdn.com/tild3366-3435-4963-a433-346330313766/photo.png' }, { slug: 'ua', tooltip: 'Ukrainian', name: 'Українська', img: 'https://static.tildacdn.com/tild6234-6533-4165-b432-633662633662/1.png' }, { slug: 'fr', tooltip: 'French', name: 'Français', img: 'https://static.tildacdn.com/tild6138-3439-4830-b363-323661336137/16.png' }, { slug: 'it', tooltip: 'Italian', name: 'Italiano', img: 'https://static.tildacdn.com/tild6138-3539-4634-a332-333033366632/7.png' }, { slug: 'cn', tooltip: 'Chinese', name: '汉语', img: 'https://static.tildacdn.com/tild3033-3965-4630-b337-393532343963/18.png' }, { slug: 'es', tooltip: 'Spanish', name: 'Español', img: 'https://static.tildacdn.com/tild3536-3966-4166-b563-343838373365/4.png' } ]; rc.select({ title: 'Выберите язык', popupMode: true, class: 'language-list', buttons: buttons, pageX: e.pageX, pageY: e.pageY, })

Возвращаемые данные

При вводе значения, а так же при закрытии (срабатывающем при щелчке вне области виджета) вызывается пользовательская функция получающая текущее значение в виде параметра. Если установлен параметр onlyBackgroundClose, то так же при выборе значения второй параметр будет содержать объект со свойством dontClose c булевым значением true.
                            
const onValueSelected = value => {
    value && $.notify('Выбрано значение: ' + value.name, { position:"top center", className: 'success' });
};

rc.select({
    pageX: e.pageX,
    pageY: e.pageY,
    buttons: [
    {
        slug: 1,
        name: 'Выбор 1'
    }, {
        slug: 2,
        name: 'Выбор 2'
    }],
}, onValueSelected)
                            
                        
Made on
Tilda