Rukovanje klikom na desni taster miša (onkontekstualni meni). Prilagođeni kontekstni meni koristeći JavaScript Zašto desni taster miša ne otvori meni

Jeste li primijetili da desni klik na slike na nekim stranicama ne vodi ničemu. Čini se kao da dugme klikće u praznom hodu, a pretraživač ne mari za to – on se „zamrzava i razmišlja“. U stvarnosti, pretraživač jednostavno blokira klikove nakon što primi takvu komandu od JavaScript skripte učitane stranice.

Kako desno dugme za otključavanje da kliknete na sliku i sačuvate je za gledanje van mreže? U većini internet pretraživača, ovo je dovoljno da se „kopaju” po naprednim postavkama JavaScript.. Dakle…

Ako imate " Opera»:
1. Pratite putanju “Alati” -> “Opšta podešavanja”;
2. U prozoru koji se pojavi zaustavite se na stavci “Sadržaj” i pronađite dugme “Konfiguriši JavaScript” (pogledajte sliku 1).

3. Klikom na njega pozovite prozor detaljna podešavanja JavaScript i poništite izbor u polju pored "Blokiraj desno dugme".
Nakon potvrde (klikom na “OK”), ovo dugme će postati “slobodno” za pozivanje kontekstnog menija. Inače, u " FireFox„Da biste otključali desno dugme, potrebno je da poništite kvadratić pored ove stavke (vidi sliku 2).

U drugim naprednim pretraživačima, blokiranje desnog dugmeta uklanja se na isti način - kroz iste napredne JavaScript postavke.

Zadatak: uhvatite desni klik miša u prozoru pretraživača i pokažite svoj kontekstni meni.

Šta se dešava kada kliknete desnim tasterom miša u prozor pretraživača? Pojavit će se kontekstni meni, izgled a skup funkcija će zavisiti od tipa pretraživača i mesta na koje ste kliknuli.
Šta ako želimo da blokiramo kontekstni meni pretraživača i prikažemo svoj? Možda? Da. Nažalost, nije kompatibilan sa više pretraživača, ali kod ispod će raditi u Gecko, Safari i IE. Opera podrazumevano ne nudi takve funkcije.

Prvo, nacrtajmo tri DIV-a, u 2 od kojih ćemo prikazati vlastiti kontekstni meni, au trećem ćemo ostaviti jedan zadani pretraživač.

"visina:100px; granica:1px puna crvena; boja pozadine:#FFCCCC;"> Desni klik

"visina:100px; granica:1px puna plava; boja pozadine:#CCCCFF;"> Desni klik

"visina:100px; granica:1px puna zelena; boja pozadine:#CCFFCC;"> Desni klik


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


Kao što vidite, desni klik se hvata pomoću događaja oncontextmenu. Za pisanje koda za funkciju menija potrebne su sljedeće komponente:
– Funkcija za dodavanje rukovatelja događajima. Koristi se za sakrivanje sopstvenog kontekstnog menija kada kliknete na druge delove dokumenta.
– Funkcija za određivanje koordinata pokazivača miša. Koristi se za definisanje pozicije na kojoj ćemo prikazati kontekstni meni.
Možete blokirati iskačući prozor standardnog menija pretraživača jednostavnim vraćanjem false.

Sada kod:

// Funkcija za određivanje koordinata pokazivača miša
funkcija defPosition(događaj) (
var x = y = 0;
if (document.attachEvent != null) ( // Internet Explorer& Opera
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 ) ;
) else if (!document.attachEvent && document.addEventListener ) ( // Gecko
x = event.clientX + window.scrollX ;
y = event.clientY + window.scrollY ;
) drugo (
// Ne radi ništa
}
return ( x:x, y:y) ;
}

meni funkcija (tip, evt) (
// Blokiraj pojavljivanje događaja kontekstnog menija
evt = evt || window.event ;
evt.cancelBubble = istina;
// Prikažimo naš vlastiti kontekstni meni
var menu = document.getElementById ("contextMenuId") ;
var html = "" ;
prekidač (tip) (
slučaj (1) :
html = "Jelovnik za prvi DIV";
html += "
Prva funkcija"
;
html += "
druga funkcija"
;
html += "
Treća funkcija"
;
break ;
slučaj (2) :
html = "Jelovnik za drugi DIV";
html += "
(prazno)" ;
break ;
zadano:
// Ništa
break ;
}
// Ako ima nešto za pokazati, mi to pokazujemo
if (html) (
menu.innerHTML = html;
menu.style .top = defPosition(evt) .y + "px" ;
menu.style .left = defPosition(evt) .x + "px" ;
menu.style .display = "" ;
}
// Blokiraj iskačući prozor standardnog menija pretraživača
return false ;
}

// Zatvorite kontekstualni kada kliknete lijevo ili desno dugme na dokumentu
// Funkcija za dodavanje rukovaoca događajima
funkcija addHandler(objekat, događaj, rukovalac, useCapture) (
if (object.addEventListener) (
object.addEventListener(događaj, rukovalac, useCapture ? useCapture: false) ;
) else if (object.attachEvent) (
object.attachEvent("on" + događaj, rukovalac) ;
) drugo upozorenje ( "Dodaj rukovalac nije podržan") ;
}
addHandler(document, "contextmenu" , function () (

} ) ;
addHandler(dokument, "klik" , funkcija () (
document.getElementById("contextMenuId").style.display = "nema";
} ) ;

IN ovu lekciju Pogledaćemo retko spominjanu HTML5 funkciju - kontekstni meni. Možda nikada ranije niste čuli za ovaj meni, ali u nekim situacijama može biti izuzetno koristan.

Za šta bi se mogao koristiti atribut kontekstnog menija? Omogućava vam da dodate različite opcije u kontekstni meni pretraživača desnim klikom sa samo nekoliko linija HTML koda, čak i kada je Javascript onemogućen. Iako je trenutno takav zgodan alat dostupan samo u Firefoxu.

Evo kako to funkcionira:

Korišćenje kontekstnog menija je mnogo lakše nego što se čini na prvi pogled. Morate dodati atribut contextmenu:

Zatim kreiramo meni:

Atribut id mora odgovarati atributu kontekstnog menija. Stoga je moguće koristiti različite kontekstne menije za različite dijelove stranice.

Zatim dodajemo stavke menija. Prvo ubacimo stavku menija sa tekstom i ikonicom, zatim dodamo link za emitovanje trenutne stranice na Facebook-u i na kraju ubacimo link za ažuriranje stranice. Ovo rezultira kontekstnim menijem sa tri stavke:

Takođe možete kreirati podmenije:

Veoma interesantno i korisno svojstvo HTML5. Ali, njegova upotreba je ograničena samo na Firefox pretraživač.

Kontekstni meni je meni koji se pojavljuje kada kliknete desnim tasterom miša na ekran. Obično se takvi meniji koriste da bi se olakšalo izvođenje omiljenih radnji, kao što je sortiranje foldera i datoteka, otvaranje novog prozora aplikacije ili pristup postavkama sistema.

Dugi niz godina, izraz „kontekstni meni“ prvenstveno se odnosio na izvorne aplikacije. Međutim, sada imamo priliku da to iskoristimo i u web aplikacijama. Primjer je upravitelj datoteka u Gmil-u. Ovaj meni je implementiran pomoću javascript koda:

U budućnosti ćemo moći da kreiramo kontekstne menije za sajtove zasnovane na HTML5. Pozivamo vas da se upoznate sa ovim pristupom.

Razvoj kontekstnog menija

HTML5 nam je predstavio 2 nova elementa: meni i stavku menija, i oni vam omogućavaju da kreirate kontekstne menije. Da bi pretraživač tretirao element menija kao „kontekstni meni“, moramo da postavimo tip menija na kontekst i da mu damo jedinstveni ID.

Ispod je primjer gdje kreiramo kontekstni meni sa ovim svojstvima.


Uredi sadržaj
Izbor e-pošte

Još uvijek imamo mogućnost dodavanja podmenija grananjem elementa menija ovako:


Uredi sadržaj
Izbor e-pošte

Facebook
Twitter


Sada, da bi se kontekstni meni pojavio na ekranu kada kliknete desnim tasterom miša, koristimo novi HTML atribut koji se zove contextmenu. Ovaj atribut se koristi za identifikaciju menija sa navedenim ID-om. S obzirom na naš gornji primjer, možemo definirati naš kontekstni meni koristeći contextmenu=context-menu-id.

Možemo postaviti atribut u oznaci body ako želimo koristiti kontekstni meni na cijeloj stranici. Možemo ga dodati i u HTML element tako da ovaj meni je korišten isključivo unutar ovog elementa.

Sada će se novi kontekstni meni pojaviti unutar menija Operativni sistem, kao što se vidi u primjeru ispod.


Dodavanje ikone

Sigurni smo da su mnogi od vas vidjeli kontekstne menije koji koriste ikone. U nekim slučajevima ikona može biti odlična vizualna pomoć koja pomaže korisnicima da pronađu meni. Pored toga, takođe omogućava korisnicima da razumeju čemu služi meni.


Također možemo dodati ikonu u naš HTML5 kontekst meni pomoću atributa ikone:


Uredi sadržaj
Izbor e-pošte

Facebook
Twitter


Ovo ćemo vidjeti u prozoru pretraživača.


Osposobljavanje menija

U ovoj fazi, naš novi kontekstni meni neće raditi kada se klikne. Međutim, možemo ga vrlo lako oživjeti s malo javascript koda. U našem primjeru, meni se zove Izbor e-pošte. Ovaj meni omogućava korisnicima da pošalju odabrani tekst putem e-pošte.

Da bi to funkcioniralo, dodajmo funkciju koja omogućava korisnicima da koriste kod iza njega.

Funkcija getSelectedText() (
var text = "";
if(window.getSelection) (
tekst = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Kontrola") (
tekst = document.selection.createRange().text;
}
povratni tekst;
};
Zatim kreiramo drugu funkciju, recimo sendEmail(), koja otvara email klijent. Predmet e-poruke će biti uneseni tekst iz naslova dokumenta, a tijelo e-pošte će biti popunjeno odabranim tekstom.

Funkcija sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Konačno, ovu funkcionalnost dodajemo u naš meni preko onclick atributa.

Izbor e-pošte
Prethodno smo vam rekli kako da koristite HTML5 EditableContent, koji nam omogućava da uređujemo web sadržaj direktno na stranici. Možemo koristiti ovu funkciju, dodajući ga u naš meni pod nazivom “Uredi sadržaj”.

U zakljucku

Lično smo bili veoma srećni zbog ovoga nova funkcija. U tome vidimo mnoge mogućnosti. Nažalost, u vrijeme pisanja ovog materijala samo je Firefox podržavao ovo svojstvo. Nadamo se da će se i drugi pretraživači uskoro povezati na njega.

Demo možete pogledati ispod (radi samo u Firefoxu).

Rad svih uređaja. U slučaju kvarova ili kvarova, nije uvijek potrebno pozvati stručnjake, ponekad plaćajući njihove usluge po prilično visokim cijenama. Mnoge nedostatke i greške možete sami ispraviti. Ove vrste kvarova i grešaka uključuju kada desno dugme miš ne otvara kontekstni meni. Šta učiniti u takvim slučajevima?

Prvo, trebali biste saznati zašto rad ne funkcionira, zašto kontekstualni Windows meni 10. Postoji nekoliko mogućih razloga za to:

  • nered u registru sa zastarjelim datotekama;
  • nedostatak programa uključenih u kontekstni meni, njihov nestabilan rad.

Razmotrimo šta učiniti u ovim slučajevima, kako promijeniti situaciju kada se kontekstni meni desnim klikom ne otvori.

Ako se kontekstni meni desnog klika ne pojavi zbog toga što je registar pretrpan zastarjelim datotekama, preporučujemo korištenje uslužnog programa za čišćenje, na primjer, Glary Utilities. Glary Utilities je skup sistemskih podešavanja, uslužnih programa koji pomažu u zaštiti, fino podešavanje, povećanje performansi računara. Koristeći set, možete ukloniti nepotrebne datoteke koje začepljuju sistem, stavke registra koji su odavno zastarjeli, optimizirati RAM, upravljati pokretanjem, optimizirati memoriju i druge funkcije korisne za dobro funkcionisanje vašeg računala. Glary Utilities se može besplatno preuzeti.


Nakon postavljanja postavki, očistite svoj uređaj nepotrebni fajlovi Koristeći isti uslužni program, očistite registar, čime ćete povećati performanse vašeg računara.

Ispravka greške pri zamrzavanju

Ako, kada kliknete desnim tasterom miša na datoteku ili fasciklu, kontekstni meni na radnoj površini ne radi, računar se zamrzne, taster ne reaguje na komande, ovo zamrzavanje možete popraviti na dva načina, preporučujemo da uradite oba uzastopno. Prije nego što započnete bilo šta od ovoga, morate imati administratorska prava. Morat ćete raditi sa registrom, ovdje morate biti oprezni, ako to učinite pogrešno, sistem može pokvariti. Stoga, kada započnete proces otklanjanja grešaka, obavezno kreirajte tačku vraćanja sistema prije nego što bilo šta izbrišete.

„Tiho“ zamrzavanje obično je uzrokovano nestabilnim programom, zamrznutim programom ili kada veza u kontekstualnom meniju ukazuje na nepostojeći resurs.

Prvi metod

Slijedite korake uzastopno:



  1. Provjerite postoje li programi koje ste već izbrisali na listi koja se pojavljuje.
  2. Ako se na listi nalazi program koji ste uklonili, uklonite ga iz registra. Prije brisanja bilo kojeg ključa registratora, preporučujemo da napravite njegovu arhivsku kopiju za spremanje u slučaju da je trebate vratiti.

Drugi metod

Algoritam za drugu metodu, kada se kontekstni meni Windows 10 ne otvori, bit će sljedeći.

  1. Otvorite uređivač registra kao što je opisano u koracima 1–2 prethodne metode.
  2. Otvorite potključ HKEY_CLASSES_ROOT,
  3. U njemu ćete vidjeti nekoliko pododjeljaka s imenima poput “name_programm.exe”, “name_programm.dll”. Provjerite svaki redom klikom na LMB do pododjeljka “command”. Svi pododjeljci bi trebali biti otvoreni. Ako se ne otvori, pogledajte na desnoj strani prozora da li postoji parametar “NoOpenWith”. Ne postoji takav parametar - kreirajte ga. Da biste to učinili, slijedite ove korake:

  1. Nakon što ste pronašli pododjeljak “command”, kliknite LMB i provjerite prisutnost parametra “(Default)” na desnoj strani. Parametar mora biti specificiran za aplikaciju ili mrežni resurs koji postoji na računaru.
  • Ako se parametar odnosi na resurs koji već nedostaje, cijeli odjeljak koji počinje imenom ovog resursa ili programa treba izbrisati. Prije brisanja, ne zaboravite stvoriti arhivsku kopiju za vraćanje ako je potrebno. Izbrišite tako što ćete kliknuti na naziv RMB odjeljka, a zatim kliknuti na "Izbriši" - "Da".

Nakon dovršetka dvije metode, trebao bi se otvoriti kontekstni meni, PC se više neće zamrznuti kada kliknete desnim klikom na datoteku.

Nije teško učiniti da kontekstni meni radi, samo zapamtite da svaki pokušaj promjene registra može dovesti do nestabilnog rada računala, stoga ne zaboravite stvoriti točke vraćanja. arhivske kopije izbrisani programi. Kada desna tipka miša ne otvori kontekstni meni, slijedite gore navedene upute uzastopno, primijenite sve metode, greška će biti ispravljena.

Dijeli