Opprett egendefinerte Høyreklikk-kontekstmenyer med justContext.js

Hver nettleser har en standard kontekstmeny . Dette vises når brukeren høyreklikker hvor som helst på en side, og den har vanligvis de samme alternativene, for eksempel "kopi", "lagre" eller "inspiser element".

Med justContext-biblioteket kan du bygge spesialiserte kontekstmenyer for elementer på nettstedet ditt. Disse kan automatisk fylles med alt du liker, og du kan skrive egendefinerte funksjoner for å løpe når brukeren klikker et alternativ i din egendefinerte meny.

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

Du har full kontroll over temaet 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 bunnen av med alle 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 Web Fonts, for ikke å nevne at hele Font Awesome-biblioteket er pakket som standard.

Sjekk ut live demoen for å se den i aksjon. Den fungerer i alle nettlesere bortsett fra 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. Det krever noen CSS-klasser, og det er alt hardkodet i HTML i websiden din.

Her er et eksempel fra hovedreko 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, kan du gjøre mye med dette pluginet. Men jeg innrømmer også at det er en nisjespesifikk ressurs som ikke vil være verdifull for alle nettsteder.

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