плагин для кнопок

NinjaRadial — плагин jQuery контекстное меню для сайта

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

Для чего все это

NinjaRadial  — это инструмент, написанный под jQuery; контекстное меню с удобной настройкой в бекенде и приятной анимацией на фронтенде. Варианты использования данного плагина мы приведем ниже:

  • кнопки социальных сетей;
  • ссылки на страницы помощи;
  • контекстное меню для веб-приложения;
  • взаимодействие с пользователем.

пример кнопок

 Техническая составляющая плагина контекстного меню

Из преимуществ, автор выделяет следующее:

  • Легкость в реализации;
  • Настройка функций каждой кнопки;
  • Выбор цвета и стилей для каждой кнопки;
  • Добавлять бесконечное кол-во кнопок;
  • Легко настроить размер, расстояние и цвета;
  • Вызвать меню из любого элемента, который Вам нужен.

Этапы использования

1. Подключаем библиотеку jQuery:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

2. Подключаем файлы плагина:

<link href="NinjaRadial.css" rel="stylesheet" type="text/css" />
<script src="NinjaRadial.js" type="text/javascript"></script>

3. Настраиваем наши кнопки, объявляя массив:

//-- Это стандартные настройки
buttonsModel = new Array();
buttonsModel.push({ text: "Edit", click: function (e, obj) { alert("Edit: " + obj.id); } });
buttonsModel.push({ text: "Remove", click: function (e, obj) { alert("Remove: " + obj.id); } });
buttonsModel.push({ text: "Add", click: function (e, obj) { alert("Add: " + obj.id); }});

4. Теперь просто вызываем плагина на нужную кнопку:

$("#ninjaRadial").ninjaGridPlus({
     buttons: buttonsModel
});

5. Все готово!

Все остальные опции плагина jQuery контекстное меню можно найти на демо-странице. Скачать файлы плагина можно по ссылке ниже. Удачи!

1503 просмотров