Opprett egendefinerte Høyreklikk-kontekstmenyer med justContext.js

Hver nettleser har en standard kontekstmeny. Dette vises når brukeren høyreklikk hvor som helst på en side og det har vanligvis de samme alternativene, for eksempel “kopiere”, “lagre”, eller “inspisér element”.

Med justContext bibliotek, du kan bygge spesialiserte kontekstmenyer for noen elementer på nettstedet ditt. Disse kan være auto-befolket med alt du liker og du kan skriv tilpassede funksjoner å kjøre når brukeren klikker et alternativ i din egendefinerte meny.

Ethvert sideelement kan støtte sin egen kontekstmeny. Dette betyr at du kan mål individuelle elementer som lysbildefremvisninger eller HTML5-videospillere, eller du kan Mål hele sidekroppen.

Du har full kontroll over tema på kontekstmenyen, inkludert fonter, farger, ikoner og til og med separatorer for å dele menyen i seksjoner. Denne plugin lar deg virkelig lage en full kontekstmeny fra grunnen av med noen funksjoner du liker.

Som standard kommer justContext med to temaer: mørk og lys. Du kan velge mellom dem og finne hvilken som passer best til nettstedet ditt.

Hvert tema kan tilpasses ved hjelp av forskjellige Google webfonter, for ikke å nevne hele Font Awesome bibliotek er pakket som standard.

Sjekk ut live demoen for å se den i aksjon. Det fungerer i alle nettlesere unntatt Internet Explorer men dette bør ikke være et problem vurderer Microsofts push til den nye Edge-nettleseren.

Å lage den faktiske kontekstmenyen er litt vanskelig. Den krever noen CSS klasser og det er alt hardkodet i HTML inn i din nettside.

Her er en prøve fra de viktigste repoene på GitHub:

 
 
Kutte opp
 
Kopiere
 
Lim inn
 
 
Ny pakke
 
Ny klasse
 
Nytt grensesnitt (en deaktivert oppføring)
 
 

Hvis du er villig til tinker med innstillinger du kan gjøre mye med dette pluginet. Men jeg innrømmer også at det er a nisjespesifikk ressurs Det vil ikke være verdifullt for alle nettsteder.

Uansett hvorfor eller hvordan du vil bruke det, er justContext den absolutt beste ressursen for skaper webkontekstmenyer fra grunnen av. All dokumentasjon er tilgjengelig på GitHub og plugin er 100% fri for bruk på et hvilket som helst webprosjekt.