Maak aangepaste rechtermuisknop-contextmenu's met justContext.js

Elke webbrowser heeft een standaard contextmenu. Dit verschijnt wanneer de gebruiker rechtsklikken overal op een pagina en heeft meestal dezelfde opties, zoals “kopiëren”, “opslaan”, of “inspecteer element”.

Met de justContext-bibliotheek, je kunt bouwen gespecialiseerde contextmenu's voor alle elementen op uw site. Deze kunnen zijn auto-bevolkte met alles wat je leuk vindt en je kunt schrijf aangepaste functies uitvoeren wanneer de gebruiker op een optie in uw aangepaste menu klikt.

Elk pagina-element kan zijn eigen contextmenu ondersteunen. Dit betekent dat je kunt doel individuele items zoals diavoorstellingen of HTML5-videospelers, of u kunt het richten op de volledige pagina.

Je hebt de volledige controle over de thema van het contextmenu, inclusief lettertypen, kleuren, pictogrammen en zelfs scheidingstekens om uw menu op te splitsen in secties. Met deze plug-in kun je echt een maken volledig contextmenu vanuit het niets met functies die je leuk vindt.

Standaard wordt standaard meegeleverd met twee thema's: donker en licht. U kunt tussen hen kiezen en zoeken welke het beste bij uw website past.

Elk thema kan worden aangepast met behulp van verschillende Google Web Fonts, om nog maar te zwijgen over het geheel Font Awesome-bibliotheek is standaard verpakt.

Bekijk de live demo om hem in actie te zien. Het werkt in alle browsers behalve Internet Explorer maar dit zou geen probleem moeten zijn gezien Microsoft's push naar de nieuwe Edge-browser.

Het maken van het eigenlijke contextmenu is een beetje lastig. Het vereist een paar CSS-klassen en het is alles hard-gecodeerd in HTML op uw webpagina.

Hier is een monster van de hoofdrepositie op GitHub:

 
 
Besnoeiing
 
Kopiëren
 
Pasta
 
 
Nieuw pakket
 
Nieuwe klas
 
Nieuwe interface (een uitgeschakelde invoer)
 
 

Als je bereid bent om te doen sleutelen aan instellingen je kunt veel doen met deze plug-in. Maar ik geef ook toe dat het een is niche-specifieke bron dat zal niet waardevol zijn voor alle websites.

Ongeacht het waarom of hoe u het zou gebruiken, justContext is de absoluut beste bron voor Web-context-menu's helemaal opnieuw maken. Alle documentatie is beschikbaar op GitHub en de plug-in is 100% gratis te gebruiken voor elk webproject.