Share
I dag skal jeg introdusere deg til to HTML5-elementer: og , del av spesifikasjonen Interactive Elements. Internett har utviklet seg til noe mer enn bare koblede dokumenter; sider oppfører seg i stadig større grad som apps. Som sådan er det en passende tid å danne standard webinteraktivitetsfunksjoner.
Disse to elementene er blant de minst snakkete blant utviklere, sannsynligvis på grunn av manglende støtte i store nettlesere. Firefox er den eneste nettleseren som har implementert dette elementet ved skrivingstidspunktet.
Når vi snakker om Meny det er viktig å ikke forveksles med . Spesifikasjonen gjør en god jobb i å definere forskjellen mellom disse to forskjellige elementene.
De er den HTML Navigasjonselement. Det er elementet som representerer nettsidens navigasjonsblokk. Den inneholder vanligvis et sett med koblinger som tillater brukere å navigere eller hoppe gjennom seksjoner på siden eller til en annen side av nettstedet.
De , på den annen side representerer et sett med menykommandoer. Ideen ligner på desktop- eller mobilapplikasjoner. Skrivebordsprogrammer bruker vanligvis verktøylinjemenyer og kontekstmenyer til å utføre varierende oppgaver. Ta Uklarhet menyen i Photoshop, for eksempel. Dette utfører en oppgave som gjør det valgte laget uskarpt.
Blur-meny i PhotoshopDette er den underliggende forskjellen mellom disse to elementene; bør inneholde lenker for å hjelpe brukerne navigere gjennom nettsider, mens elementet skal hjelpe brukerne til å utføre bestemte oppgaver.
I et nøtteskall, den elementet er laget for å lage kontekstuelle, verktøylinje og popup-menyer. De to sistnevnte er imidlertid ikke implementert i noen nettleser, inkludert i Firefox. For øyeblikket er det vanskelig å gjette hvordan (hvis?) Nettlesere vil implementere dem og hvordan de vil se ut. Det er også en god sjanse for at verktøylinjen og popup-menyspesifikasjonen vil endres litt i neste iterasjon.
For nå vil vi fokusere vår oppmerksomhet på Kontekstmeny trekk.
En kontekstuell meny (eller kontekstmeny) vises når vi høyreklikker på et program. Alternativene som er avslørt, er spesifikke for hvor brukeren har klikket, dermed kontekst.
Innfødt kontekstuell meny i OS X og UbuntuDet er mulig å legge til kontekstmenyer på nettsider gjennom JavaScript eller et jQuery-plugin. Problemet med denne metoden er at det ofte krever kraftig merking, og kritisk vil skriptet fjerne nettleserens innfødte kontekstmeny, noe som kan forstyrre vanlig brukerforventning hvis ikke gjort riktig.
Tilpasset kontekstuellmeny i Google Disk sammen med elementet vil innlemme de nye menypunktene som en del av den innfødte kontekstuelle menyen. I eksemplet nedenfor legger vi til vår et nytt kontekst menyelement kalt "Hello World".
De essensielle delene av den ovennevnte koden er attributter - id, type og kontekstmenyen - som angir menypunktet som en kontekst menyen samt omfanget der den nye menyen skal vises.
I vårt tilfelle vil den nye menyen vises hvor som helst på dokumentet når du utfører høyreklikk, slik vi har tildelt det ved hjelp av kontekstmenyen attributt til kropp.
Alternativt kan du begrense omfanget innenfor en bestemt seksjon på siden ved å tilordne Når vi ser det i nettleseren (for øyeblikket bare i Firefox), bør du se at Undermenyer består av en gruppe elementer med sammenhengende eller lignende handlinger. The Photoshop Bildrotasjon menyen er et perfekt eksempel på dette. De Bildrotasjon Menyen har flere undermenyelementer for å la brukerne velge hvilken rotasjonsgrad ( Bruker Når vi kjører dette i en støttende nettleser, finner vi en ny meny med fire undermenyer: Videre kalles et nytt attributt Og der er det ikonet, som du kan se nedenfor. Vi har bygget noe som ser ut som en kontekstmeny, men det fungerer ikke som sådan. Brukere vil forvente at noe skal skje når de klikker på det; klikke på Kopiere bør kopiere teksten eller lenken, mens du klikker på a Ny mappe Menyelementet bør opprette en ny mappe. Vi kan gjøre dette ved hjelp av JavaScript. Merk: Før du fortsetter anbefaler jeg at du tar en titt på Jeremy McPeaks kurs på JavaScript-grunnlag; et flott utgangspunkt for alle som lærer JavaScript. Ta vårt "Image Rotation" eksempel ovenfor, la oss legge til en funksjon som vil rotere bildet vi har klikket på. CSS3 Transform and Transition kan utføre den faktiske rotasjonen i nettleseren for oss; her er stilen som vil rotere bildet 90 grader: Med stilregelen spesifisert, må vi skrive en funksjon for å bruke dette på bildet: Legg til denne funksjonen i de respektive For å avslutte, opprett stilreglene som vil rotere bildet 180 grader og bla bildet. Og legg til hver funksjon i det respektive elementet sammen med parameteren. Se dette eksemplet i handlingen på demonstrasiden. De Forhåpentligvis vil Safari, Chrome, Opera og Internet Explorer fange snart og også implementere andre meny typer ( kontekstmenyen attributt til elementene - , , og etc. - i stedet i kropp.
menyvalget Vi erklæres lagt til øverst på listen.
Det nye menyelementet, "Hello World", er lastet som en del av den innfødte kontekstuelle menyen.Legge til undermeny og ikon
900 og 1800 ) de vil ha, samt retningen til å bruke den. element, legge til undermenyer er enkelt og intuitivt. Gå videre og nest en annen sammen med en merkelapp å deklarere menynavnet, slik som:
ikoner
ikon har blitt introdusert og gjør det mulig å legge til et ikon langs siden av menyen. Det er verdt å merke seg at dette attributtet kun er aktuelt i element. Angi ikonbanen til ikon, som så.
Hver undermeny har nå et illustrativt ikon. Ikoner med Fugue ikon.Legge til en funksjon i menyen
.roter-90 transform: roter (90deg);
funksjon imageRotation (navn) document.getElementById ('image'). className = navn; gjennom ved trykk Tilordne og send parameteren med klassenavnet, roter-90:Konklusjon
elementet kan være svært nyttig både i webapplikasjoner eller vanlige nettsteder. Dessverre er støtten fortsatt veldig dårlig.
popup og verktøylinje ). Jeg gleder meg virkelig til hvordan dette elementet vil utvikle seg i løpet av det kommende året.Ytterligere referanser
Accentsconagua