Skapa anpassade menyer med högerklickskontext med justContext.js

Varje webbläsare har en standard kontextmeny. Detta visas när användaren högerklick var som helst på en sida och det har vanligtvis samma alternativ, till exempel “kopia”, “spara”, eller “inspektera elementet”.

Med justContext-biblioteket, du kan bygga specialiserade kontextmenyer för några element på din webbplats. Dessa kan vara auto-befolkade med allt du gillar och du kan skriv anpassade funktioner att springa när användaren klickar på ett alternativ i din anpassade meny.

Varje sidelement kan stödja sin egen snabbmeny. Det betyder att du kan rikta enskilda objekt till exempel bildspel eller HTML5-videospelare, eller så kan du rikta hela sidokroppen.

Du har full kontroll över teman i snabbmenyn, inklusive teckensnitt, färger, ikoner och till och med separatorer för att dela din meny i sektioner. Det här pluginet låter dig verkligen skapa en full kontextmeny från början med några funktioner du gillar.

Som standard kommer justContext med två teman: mörk och ljus. Du kan välja mellan dem och hitta vilken som bäst matchar din webbplats.

Varje tema kan anpassas med olika Google webbfonter, för att inte tala om hela Teckensnyggt bibliotek är förpackad som standard.

Kolla in live demo för att se den i aktion. Det fungerar i alla webbläsare utom Internet Explorer men det borde inte vara ett problem med Microsofts push till den nya Edge-webbläsaren.

Att skapa den verkliga kontextmenyn är lite knepig. Det kräver några CSS-klasser och det är allt hårdkodad i HTML in i din webbsida.

Här är en prov från huvudrepo på GitHub:

 
 
Skära
 
Kopia
 
Klistra
 
 
Nytt paket
 
Ny klass
 
Nytt gränssnitt (en inaktiverad post)
 
 

Om du är villig att tinker med inställningar du kan göra mycket med det här pluginet. Men jag erkänner också att det är a nischspecifika resurser Det kommer inte att vara värdefullt för alla webbplatser.

Oavsett varför eller hur du använder det är justContext den absolut bästa resursen för skapa webbkontextmenyer från början. All dokumentation finns tillgänglig på GitHub och plugin är 100% fri att använda på något webbprojekt.