Контекстно меню в браузъра с помощта на HTML5. Работа с десен бутон (в контекстното меню) Менюто с десен бутон не се отваря

Контекстно меню в браузъра с помощта на HTML5.  Работа с десен бутон (в контекстното меню) Менюто с десен бутон не се отваря
Контекстно меню в браузъра с помощта на HTML5. Работа с десен бутон (в контекстното меню) Менюто с десен бутон не се отваря

Задача: да хванете десния бутон на мишката, щракнете върху прозореца на браузъра и покажете своя контекстно меню.

Какво се случва, когато щракнете с десния бутон в прозорец на браузър? Ще се появи контекстно меню, външен види чийто набор от функции ще зависи от вида на браузъра и мястото, където сте щракнали.
Но какво ще стане, ако искаме да блокираме контекстното меню на браузъра и да покажем нашето собствено? Може би? да За съжаление не е между браузър, но кодът по-долу ще работи в Gecko, Safari и IE. Opera не предоставя такива функции по подразбиране.

Като начало, нека начертаем три DIV-а, в 2 от които ще покажем нашето собствено контекстно меню, а в третото ще оставим браузъра по подразбиране.

"height:100px; border:1px solid red; background-color:#FFCCCC;"> щракнете Кликнете с десния бутон

"height:100px; border:1px solid blue; background-color:#CCCCFF;"> Кликнете с десния бутон

"height:100px; border:1px solid green; background-color:#CCFFCC;"> Кликнете с десния бутон


"position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;">


Както можете да видите, щракването на десния бутон се улавя чрез събитието в контекстното меню. За да напишете кода на функцията на менюто, са необходими следните компоненти:
– Функция за добавяне на манипулатори на събития. Използва се за скриване на собственото контекстно меню при щракване в други части на документа.
– Функция за определяне на координатите на показалеца на мишката. Използва се за определяне на позицията, на която ще покажем контекстното меню.
Можете да блокирате изскачащото меню на стандартен браузър просто като върнете false.

Сега код:

// Функция за определяне на координатите на показалеца на мишката
функция defPosition(събитие) (
var x = y = 0;
if (document.attachEvent != null) ( // Internet Explorer& Опера
x = window.event .clientX + (document.documentElement .scrollLeft ? document.documentElement .scrollLeft : document.body .scrollLeft ) ;
y = window.event .clientY + (document.documentElement .scrollTop ? document.documentElement .scrollTop : document.body .scrollTop ) ;
) иначе ако (!document.attachEvent && document.addEventListener ) ( // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
) иначе (
// Не правете нищо
}
връщане (x:x, y:y);
}

функционално меню (тип, evt) (
// Блокиране на изскачащия прозорец на събитието контекстно меню
evt = evt || window.event;
evt.cancelBubble = true;
// Показване на потребителско контекстно меню
var menu = document.getElementById("contextMenuId" ) ;
varhtml = "";
превключвател (тип) (
случай (1):
html= "Меню за първия DIV";
html += "
Първа функция"
;
html += "
Втора функция"
;
html += "
Трета функция"
;
прекъсване ;
случай (2):
html= "Меню за второ DIV";
html +="
(празен)" ;
прекъсване ;
по подразбиране :
// Нищо
прекъсване ;
}
// Ако има какво да покажете - покажете
ако(html)(
menu.innerHTML = html;
menu.style .top = defPosition(evt) .y + "px" ;
menu.style .left = defPosition(evt) .x + "px" ;
menu.style .display = "";
}
// Блокиране на изскачащи прозорци на стандартното меню на браузъра
връща невярно;
}

// Затворете контекста, когато щракнете върху левия или десния бутон върху документа
// Функция за добавяне на манипулатори на събития
функция addHandler(обект, събитие, манипулатор, useCapture) (
ако (object.addEventListener) (
object.addEventListener (събитие, манипулатор, useCapture ? useCapture: false) ;
) иначе ако (object.attachEvent) (
object.attachEvent("on" + събитие, манипулатор) ;
) друг сигнал ( „Добавяне на манипулатор не се поддържа“) ;
}
addHandler(документ, "контекстно меню", функция () (

} ) ;
addHandler(документ, "щракване", функция () (
document.getElementById ("contextMenuId" ) .style .display = "none" ;
} ) ;

Контекстното меню е менюто, което се появява, когато щракнете с десния бутон върху екрана. Обикновено такива менюта се използват, за да улеснят извършването на любими действия, като сортиране на папки и файлове, отваряне на нов прозорец на приложение или достъп до системните настройки.

В продължение на много години терминът "контекстно меню" се отнася предимно за естествени приложения. Сега обаче имаме възможност да се възползваме от него и в уеб приложенията. Пример е файловият мениджър в Gmil. Това меню е реализирано с помощта на javascript код:

В бъдеще ще можем да създаваме контекстни менюта за базирани на HTML5 сайтове. Каним ви да се запознаете с този подход.

Разработка на контекстно меню

HTML5 ни представи 2 нови елемента: меню и елемент от менюто, и те ви позволяват да създавате контекстни менюта. За да може браузърът да третира елемента на менюто като „контекстно меню“, трябва да зададем типа меню на контекст и също така да му дадем уникален идентификатор.

По-долу е даден пример, в който създаваме контекстно меню с тези свойства.


Редактиране на съдържанието
Избор на имейл

Също така имаме възможността да добавяме подменюта чрез разклоняване на елемента от менюто по следния начин:


Редактиране на съдържанието
Избор на имейл

Facebook
Twitter


Сега, за да може контекстното меню да се появи на екрана, когато се щракне с десния бутон на мишката, ние използваме нов HTML атрибут, наречен contextmenu. Този атрибут се използва за идентифициране на менюто с посочения идентификатор. Имайки предвид нашия пример по-горе, можем да дефинираме нашето контекстно меню с contextmenu=context-menu-id.

Можем да зададем атрибут на етикета body, ако искаме да използваме контекстното меню в цялата страница. Можем също да го добавим към HTML елемента, така че това менюизползвани изключително в рамките на този елемент.

Сега в менюто на операционната система ще се появи ново контекстно меню, както се вижда в примера по-долу.


Добавяне на икона

Сигурни сме, че много от вас са виждали контекстни менюта, които използват икони. В някои случаи иконата може да бъде чудесна визуална помощ, за да помогне на потребителите да намерят менюто. В допълнение, той също така позволява на потребителите да разберат за какво е менюто.


Можем също да добавим икона към нашето HTML5 контекстно меню, като използваме атрибута на иконата:


Редактиране на съдържанието
Избор на имейл

Facebook
Twitter


Ето какво ще видим в прозореца на браузъра.


Направете менюто да работи

На този етапнашето ново контекстно меню няма да работи при щракване. Въпреки това можем много лесно да го вдъхнем живот с малко javascript код. В нашия пример менюто се нарича Избор на имейл. Това меню позволява на потребителите да изпращат избран текст по имейл.

За да работи, нека добавим функция, която ще позволи на потребителите да използват маркирания код.

Функция getSelectedText() (
променлив текст = "";
if(window.getSelection) (
текст = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
текст = document.selection.createRange().текст;
}
върнат текст;
};
След това създаваме друга функция, да кажем sendEmail(), която отваря имейл клиента. Тема на писмото ще бъде въведеният текст от горната част на документа, а тялото на писмото ще бъде запълнено с избрания текст.

функция sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
И накрая, добавяме тази функционалност към нашето меню чрез атрибута onclick.

Избор на имейл
По-рано ви казахме как да използвате HTML5 EditableContent, което ни позволява да редактираме уеб съдържание направо на страницата. Можем да използваме тази функция, добавяйки го към нашето меню, наречено „Редактиране на съдържание“.

В заключение

Лично ние бяхме много доволни от това нова функция. Виждаме много възможности в него. За съжаление, към момента на писане този материал, само Firefox поддържаше това свойство. Надяваме се, че други браузъри скоро ще се свържат с него.

Можете да видите демонстрация по-долу (работи само във Firefox).

Производителността на всички устройства. В случай на повреди, повреди, не винаги е необходимо да се обаждате на специалисти, понякога плащайки за услугите им на доста високи цени. Много недостатъци, грешки могат да бъдат коригирани независимо. Тези видове повреди, грешки включват, когато десният бутон на мишката не отваря контекстното меню. Как да действаме в такива случаи?

Първо, трябва да разберете защо операцията е неуспешна, защо контекстното меню не работи. меню на windows 10. Има няколко възможни причини за това:

  • бъркотия в регистъра с остарели файлове;
  • липса на програми, включени в контекстното меню, тяхната нестабилна работа.

Нека да помислим какво да правим в тези случаи, как да променим ситуацията, когато контекстното меню с десен бутон не се отваря.

Ако контекстното меню с десен бутон не се появи поради претрупания регистър с остарели файлове, препоръчваме да използвате помощна програма за почистване, например Glary Utilities. Glary Utilities е набор от системни настройки, помощни програми, които помагат за защитата, фина настройка, подобряване на производителността на компютъра. С помощта на комплекта можете да премахнете ненужни файлове, които задръстват системата, записи в регистъра, които са отдавна остарели, да оптимизирате RAM, да управлявате стартирането, да оптимизирате паметта и други функции, които са полезни за доброто функциониране на компютъра. Glary Utilities можете да изтеглите безплатно.


След като зададете настройките, почистете устройството си от Ненужни файловечрез същата помощна програма почистете системния регистър, като по този начин увеличите скоростта на компютъра.

Замразяване на корекция на грешки

Ако, когато щракнете върху RMB върху файл или папка, контекстното меню на работния плот не работи, компютърът замръзва, ключът не отговаря на команди, можете да коригирате това замръзване по два начина, препоръчваме ви да направите и двата последователно . Преди да продължите с някой от тях, трябва да имате администраторски права. Ще трябва да работите с регистъра, тук трябва да внимавате, ако го направите неправилно, системата може да се провали. Ето защо, когато стартирате процеса на коригиране на повреди, не забравяйте да създадете точка за възстановяване на системата, преди да изтриете каквото и да било.

„Тихото“ замразяване обикновено се причинява от нестабилна програма, замразена програма или когато връзка в контекстното меню сочи към несъществуващ ресурс.

Метод първи

Следвайте стъпките в последователност:



  1. Проверете списъка, който се появява за програмите, които вече сте деинсталирали.
  2. Ако в списъка има програма, която сте премахнали, премахнете я от регистъра. Преди да изтриете който и да е ключ на системния регистър, ви препоръчваме да създадете негово резервно копие, за да го запазите, в случай че трябва да го възстановите.

Метод втори

Алгоритъмът за втория метод, когато контекстното меню на Windows 10 не се отвори, ще бъде както следва.

  1. Отворете редактора на системния регистър, както е описано в стъпки 1-2 от предишния метод.
  2. Отворете подключ HKEY_CLASSES_ROOT,
  3. В него ще видите няколко подсекции с имена като "name_programm.exe", "name_programm.dll". Проверете всеки от тях на свой ред, като щракнете върху LMB до подраздела „команда“. Всички подсекции трябва да са отворени. Ако не се отвори, в дясната част на прозореца вижте наличието на параметъра "NoOpenWith". Няма такъв параметър - създайте го. За какво следвайте стъпките:

  1. След като намерите подраздела „команда“, щракнете върху LMB, проверете за наличието на параметъра „(По подразбиране)“ от дясната страна. Параметърът трябва да бъде зададен на приложението или мрежов ресурскоито съществуват на компютъра.
  • Ако параметърът се отнася до ресурс, който вече не съществува, целият раздел, който започва с името на този ресурс, програмата, трябва да бъде изтрит. Не забравяйте да създадете резервно копие, преди да изтриете за възстановяване, ако е необходимо. Изтрийте, като щракнете върху името на секцията с RMB, след което щракнете върху „Изтриване“ - „Да“.

След като завършите двата метода, контекстното меню трябва да се отвори, компютърът ще спре да замръзва, когато RMB щракне върху файла.

Настройването на контекстното меню не е трудно, просто не забравяйте, че всеки опит за промяна на системния регистър може да доведе до несигурна работа PC, така че не забравяйте да създадете точки за възстановяване, архивни копия на програмите, които премахвате. Когато десният бутон на мишката не отваря контекстното меню, следвайте инструкциите по-горе последователно, приложете всички методи, грешката ще бъде коригирана.

Забелязали ли сте, че щракването с десния бутон върху изображения на някои сайтове не прави нищо. Изглежда, че бутонът щраква на празен ход и браузърът не се интересува от това - той „замръзва и мисли“. В действителност браузърът просто блокира кликванията, като получи такава команда от JavaScript скрипта на заредената страница.

как десен бутон за отключванеда щракнете върху изображение, за да го запазите за гледане офлайн? В повечето интернет браузъри това е достатъчно, за да "копаете" в разширените настройки JavaScript.. Така…

Ако имате " Опера»:
1. Следвайте пътя "Инструменти" -> "Общи настройки";
2. В прозореца, който се показва, спрете до елемента „Съдържание“ и намерете бутона „Конфигуриране на JavaScript“ (вижте фиг. 1).

3. Като щракнете върху него, отворете прозореца подробни настройки JavaScript и премахнете отметката от квадратчето до „Блокиране на десния бутон“.
След потвърждение (щракване върху "Ok"), този бутон ще стане "безплатен" за повиквания към контекстното меню. Между другото, в firefox» За да отключите десния бутон, трябва да премахнете отметката от квадратчето до такъв елемент (вижте фиг. 2).

В други разширени браузъри блокирането на десния бутон се премахва по същия начин - чрез същите разширени настройки на JavaScript.

В този урок ще разгледаме една рядко споменавана функция на HTML5, контекстното меню. Може би никога досега не сте чували за такова меню, но в някои ситуации то може да бъде изключително полезно.

За какво може да се използва атрибутът contextmenu? Тя ви позволява да добавяте различни опции към контекстното меню на браузъра с десен бутон само с няколко реда HTML, дори когато Javascript е деактивиран. Въпреки че в момента това удобен инструментдостъпно само във Firefox.

Ето как работи:

Използването на контекстното меню е много по-лесно, отколкото може да изглежда на пръв поглед. Трябва да добавите атрибута contextmenu:

След това създаваме менюто:

Атрибутът id трябва да съответства на атрибута contextmenu. По този начин е възможно да се използват различни контекстни менюта за различни частистраници.

След това добавяме елементи от менюто. Първо вмъкваме елемент от менюто с текст и икона, след това добавяме връзка за излъчване на текущата страница към Facebook и накрая вмъкваме връзка за опресняване на страницата. Оказва се контекстно меню с три елемента:

Можете също да създавате подменюта:

Много интересно и полезно свойство на HTML5. Но приложението му е ограничено само до браузъра Firefox.