Автор оригинала: Richard Umoffia.
Прежде чем начать, вот предварительный просмотр того, что мы будем создавать.
Давайте обсудим несколько случаев использования пользовательского контекстного меню.
- Вы хотите отобразить пользовательское контекстное меню в области вашего веб-приложения, а не по умолчанию.
Я исчерпал примеры регистрации моего использования, но я уверен, что вы можете придумать несколько других.
Давайте код!
Во-первых, мы создадим список элементов, которые будут представлять наше собственное контекстное меню, используя HTML.
Затем мы добавим несколько строк SCSS, чтобы освежить наше настраиваемое меню. Заставьте это хорошо и чисто.
.menu {
width: 120px;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: relative;
display: none;
.menu-options {
list-style: none;
padding: 10px 0;
.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}
}
К основным курсу
Всякий раз, когда мы щелкаем правой кнопкой мыши, чтобы просмотреть контекстное меню на нашей странице, срабатывает событие. Имя события (вы догадались правильно) ContextMenu Отказ
Сумасшедший, верно? Не так много.
Первое, что мы сделаем, это слушать это событие, затем предотвратить запуск поведения по умолчанию.
window.addEventListener("contextmenu", e => {
e.preventDefault();
});
Здесь мы слушаем ContextMenu Событие на всем окне, но вы всегда можете указать конкретную область, а не все окно.
Теперь, когда мы выясним это, мы настроим отображение нашего пользовательского контекстного меню прямо в обратном вызове событий. Мы собираемся использовать два свойства на объекте события, чтобы определить, где мы будем отображать наше меню. Это будет область, где запущен пользователь.
Pagex и Стражи Свойство обратного вызовования событий описывает положение мыши при запуске запроса на контекстное меню. Вы захотите поместить контекстное меню в этот момент. Давайте обновим наш код JS, чтобы отразить эти изменения.
const toggleMenu = command => {
menu.style.display = command === "show" ? "block" : "none";
};
const setPosition = ({ top, left }) => {
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
toggleMenu('show');
};
window.addEventListener("contextmenu", e => {
e.preventDefault();
const origin = {
left: e.pageX,
top: e.pageY
};
setPosition(origin);
return false;
});
TOGGLEMENU Функция переключает дисплей меню и Установка Функция устанавливает положение меню. Имена функций действительно самоуверенно.
К настоящему времени мы должны иметь полностью функциональное контекстное меню, но есть проблема нашего меню, не уходящего. Это просто там. Поэтому нам придется настроить другой слушатель событий, чтобы скрыть наше контекстное меню, если оно видно. Чтобы сделать это, мы будем слушать Нажмите Событие на окне или области, где вы настроили свой пользовательский контекстное меню.
const menu = document.querySelector(".menu");
let menuVisible = false;
const toggleMenu = command => {
menu.style.display = command === "show" ? "block" : "none";
menuVisible = !menuVisible;
};
const setPosition = ({ top, left }) => {
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
toggleMenu("show");
};
window.addEventListener("click", e => {
if(menuVisible)toggleMenu("hide");
});
window.addEventListener("contextmenu", e => {
e.preventDefault();
const origin = {
left: e.pageX,
top: e.pageY
};
setPosition(origin);
return false;
});
Есть последний внешний вид нашего файла JS. У нас есть рабочий контекстное меню, но, как обычно, есть еще несколько улучшений, которые нам понадобятся для нашего контекстного меню, чтобы быть реальным стильным.
- Как расположить меню при щелчке очень близко к нижней или верхней части окна.
- Добавление нескольких анимаций для сглаживания входа и выхода из нашего меню.
Это займет всего несколько строк кода для достижения этого. Я верю, что вы можете понять это.
Проверьте Кодепен для полной кодовой базы. Ударил меня в Twitter для любых предложений и проблем @iamafro