Share
Idag ska jag presentera dig för två HTML5-element: och , en del av specifikationen Interactive Elements. Webben har utvecklats till något mer än bara länkade dokument; sidor beter sig i dagare som apps. Som sådan är det en lämplig tid att skapa standardfunktioner för webinteraktivitet.
Dessa två element är bland de minst pratade bland utvecklare, förmodligen på grund av deras brist på stöd i stora webbläsare. Firefox är den enda webbläsaren som har implementerat detta element vid skrivningstillfället.
När vi pratar om meny det är viktigt att inte förväxlas med . Specifikationen gör ett bra jobb för att definiera skillnaden mellan dessa två distinkta element.
De är HTML Navigation Element. Det är det element som representerar webbsidans navigeringsblock. Den innehåller vanligtvis en uppsättning länkar som tillåter användare att navigera eller hoppa igenom sektioner på sidan eller till en annan sida på webbplatsen.
De , å andra sidan representerar en uppsättning menykommandon. Tanken liknar skrivbord eller mobila applikationer. Skrivbordsprogram använder vanligtvis verktygsfältmenyerna och kontextmenyerna för att utföra varierande uppgifter. Ta Fläck menyn i Photoshop, till exempel. Detta utför en uppgift som gör det valda lagret oskärpt.
Blur-menyn i PhotoshopDetta är den underliggande skillnaden mellan dessa två element; bör innehålla länkar för att hjälpa användare att navigera genom webbsidor, medan elementet bör hjälpa användarna att utföra vissa uppgifter.
I ett nötskal, den Elementet är utformat för att skapa kontextuella, verktygsfält och popupmenyer. De senare två av dessa har dock ännu inte implementerats i någon webbläsare, inklusive i Firefox. För tillfället är det svårt att gissa hur (om?) Webbläsare ska implementera dem och hur de ska se ut. Det finns också en bra chans att verktygsfältet och popup-menyspecifikationen ändras något i nästa iteration.
För närvarande kommer vi att fokusera vår uppmärksamhet på Kontextuell meny funktion.
En kontextuell meny (eller snabbmeny) visas när vi högerklickar på en applikation. De visade alternativen är specifika för var användaren har klickat, därför sammanhang.
Native kontextmeny i OS X och UbuntuDet går att lägga till sammanhangsmenyer på webbsidor genom JavaScript eller ett jQuery-plugin. Problemet med den här metoden är att det ofta kräver stor uppmärkning, och kritiskt kommer man att ta bort webbläsarens inbyggda kontextmeny, vilket kan störa vanliga användarförväntningar om det inte är gjort ordentligt.
Anpassad kontextmeny i Google Drive tillsammans med elementet kommer att innehålla de nya menyalternativen som en del av den inbyggda kontextmenyn. I exemplet nedan lägger vi till vår ett nytt kontext menyobjekt som heter "Hello World".
De väsentliga delarna av ovanstående kod är attributen - id, typ och innehålls meny - som anger meny typ som a sammanhang menyn samt omfattningen där den nya menyn ska visas.
I vårt fall kommer den nya menyn att visas var som helst på dokumentet när du utför högerklick, som vi har tilldelat det med hjälp av innehålls meny attribut till kropp.
Alternativt kan du begränsa räckvidden inom ett visst avsnitt på sidan genom att tilldela När vi tittar på det i webbläsaren (för tillfället bara i Firefox) ska du se att Undermenyer består av en grupp av objekt med samrelaterade eller liknande åtgärder. Photoshop Bildrotation menyn är ett perfekt exempel på detta. De Bildrotation menyn innehåller flera undermenyalternativ för att låta användare välja vilken rotationsgrad ( Använda När vi kör det här i en stödjande webbläsare hittar vi en ny meny med fyra undermenyer: Dessutom kallas ett nytt attribut Och där är ikonen, som du kan se nedan. Vi har byggt något som ser ut som en kontextmeny, men fungerar inte som sådan. Användare kommer att förvänta sig något att hända när de klickar på det; klicka på Kopia ska kopiera texten eller länken medan du klickar på a Ny mapp menyalternativet ska skapa en ny mapp. Vi kan göra detta med hjälp av JavaScript. Notera: innan jag fortsätter rekommenderar jag att du tar en titt på Jeremy McPeaks kurs på JavaScript-grundval en bra utgångspunkt för alla som läser JavaScript. Ta vårt "Image Rotation" -exempel ovan, låt oss lägga till en funktion som roterar bilden vi klickat på. CSS3 Transform och Transition kan utföra den aktuella rotationen i webbläsaren för oss; här är den stil som roterar bilden 90 grader: Med den angivna stilregeln måste vi skriva en funktion för att tillämpa detta på bilden: Lägg till den här funktionen i respektive För att slutföra, skapa stilregler som roterar bilden 180 grader och vänd bilden. Och lägg till varje funktion i respektive objekt tillsammans med parametern. Visa det här exemplet i åtgärd på demoversidan. De Förhoppningsvis kommer Safari, Chrome, Opera och Internet Explorer att komma igång snart och även implementera andra meny typer ( innehålls meny attribut till elementen - , , och etc. - istället i kropp.
menuitem Vi deklarerade läggs till längst upp i listan.
Det nya menyalternativet, "Hello World", laddas som en del av den inbyggda kontextmenyn.Lägga till undermeny och ikon
900 och 1800 ) de vill ha, liksom riktningen att tillämpa den. element, lägga till undermenyer är enkelt och intuitivt. Fortsätt och bo ett annat tillsammans med a märka att deklarera menyns namn, som så:
ikoner
ikon har introducerats vilket gör det möjligt att lägga till en ikon längs menyn. Det är värt att notera att detta attribut endast är tillämpligt inom element. Ange ikonväg till ikon, såhär.
Varje undermeny har nu en illustrativ ikon. Ikoner med Fugue ikon.Lägga till en funktion i menyn
.rotera-90 transform: rotera (90deg);
funktion imageRotation (namn) document.getElementById ('image'). className = namn; genom onclick ange och skicka parametern med klassnamnet, rotera-90:Slutsats
element kan vara mycket användbart både i webbapplikationer eller vanliga webbplatser. Tyvärr är stödet fortfarande riktigt dåligt.
dyka upp och verktygsfält ). Jag ser verkligen fram emot hur detta element kommer att utvecklas under det kommande året.Ytterligare referenser
Accentsconagua