Create en Facebook stil Sliding Meny i Sencha Touch
28
Del
7
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Facebook style skyvemenyen har blitt en mye brukt design mønster i mobile applikasjoner. I denne opplæringen vil du lære å bruke kraften i HTML5 og Sencha Touch Meny klasse for å lage din egen skyve menyen.
Innledning
Jeg er ikke sikker på om de var den første, men Facebook har sikkert popularisert skyve menyen design mønster. Du er sannsynligvis allerede kjent med konseptet, men det ser ut som dette:
Hovedinnholdet lysbilder til venstre eller høyre, og avdekker en meny. Fordelene med denne tilnærmingen inkluderer at det frigjør mer skjermen eiendomsmegling-motsetning til å ha, for eksempel, tabbed knappene nederst på skjermen-og tillater oss å legge til flere menyvalg uten å gå tom for plass. Det har blitt så utbredt at de fleste brukere vil umiddelbart forstå hvordan de skal samhandle med det.
Gitt nytten og populariteten til denne tilnærmingen, naturligvis Sencha Touch utviklere ønsker å inkludere en glidende meny i sine søknader. Folk kom opp med noen gode løsninger og måter å gjennomføre en glidende meny i Sencha Touch, men det ofte involvert ganske mye arbeid.
Heldigvis siden versjon 2.3.0, Sencha Touch støtter skyve menyer med Ext .Menyen klasse. I denne opplæringen, vil vi gå gjennom hvordan du legger til en glidende meny til en nylig generert Sencha Touch søknad.
1. Generere en ny søknad
Jeg vil anta at dette punktet at du allerede har miljøet satt opp for Sencha Touch utvikling. Hvis ikke, kan du besøke Sencha Touch hjemmeside og følg instruksjonene for å komme i gang.
Åpne opp ledetekst og endre din nåværende katalog til din Sencha Touch installasjon. I mitt tilfelle som er:
cd c: \\ xampp \\ htdocs \\ touch-2.4.0
Deretter kjører du følgende kommando for å generere et nytt program kalt SlidingMenu Anmeldelser som vil bli lagret i htdocs
mappe:
sencha generere app SlidingMenu ../SlidingMenu
2. Omstilling Application
Eksempelet programmet automatisk generert av Sencha Cmd
inneholder et fanebasert navigasjon som standard, som vi ikke ønsker. Vi blir nødt til å gjøre noen endringer i dette før vi legger vår meny. Åpne opp ditt app /view /Main.js
fil og gå gjennom følgende trinn.
Trinn 1
Fjern standard elementer er lagt til av Sencha Cmd
slik at din elementer
config er tom. Du bør også fjerne tabBarPosition
konfigurasjon. Config skal nå se slik ut:
config: {annonser: []}
Trinn 2
Vi trenger ikke Ext.TitleBar eller Ext.Video slik at du kan fjerne dem og i stedet legge . Ext.Menu som vist nedenfor
krever: ['Ext.Menu'],
Trinn 3
Vi kommer til å bruke en kort
layout for søknaden vår. Snarere enn å utvide Ext.tab.Panel klassen vi kommer til å utvide mer generiske Ext.Container klasse. Når du har gjort disse endringene, din Main.js
filen skal se slik ut:
Ext.define ('SlidingMenu.view.Main', {forlenge: 'Ext.Container', xtype: 'main' krever: ['Ext.Menu'], config: {layout: {Type: 'kort'}, eks: []}});
3. Legge til en knapp
Vi har et grunnleggende mal å jobbe nå, og vi kan begynne å lage funksjonelle elementer i våre skyve menyen. Før vi lage selve menyen, ønsker vi en verktøylinje som går over toppen av programmet. Denne verktøylinjen vil inneholde en knapp brukeren kan klikke på for å åpne og lukke menyen. Alle de følgende endringer vil bli gjort i app /view /Main.js
.
Trinn 1
Legg til en verktøylinje som din første elementet og legge til en knapp som en element i verktøylinjen
elementer:. [{xtype: "verktøylinje", forankret: 'top', title: 'Sliding Menu', eks: [{xtype: 'knapp', iconCls: "list", ui: ' plain '}]}]
Ved å gi knappen et iconCls
av listen vil vi få den typiske hamburger ikonet som vanligvis brukes for å skyve menyer. Sletten konfigurasjon fjerner ekstra styling, slik at bare ikonet. Jeg synes dette ser bedre ut, men gjerne utelate det alternativet
Trinn 2
Legg et behandlingsprogram for knappen som skal åpne og lukke menyen når tappet
poster:.. [ ,,,0],{xtype: "verktøylinje", forankret: 'top', title: 'Sencha Pålogging', eks: [{xtype: 'knapp', id: 'listButton', iconCls: "list", ui: 'vanlig', handler: function () {if (Ext.Viewport.getMenus () left.isHidden ().) {Ext.Viewport.showMenu ('venstre'); } Else {Ext.Viewport.hideMenu ('venstre'); }}}]}]
En hundefører er en av mange måter å fange hendelser i Sencha Touch. Hver gang det bankes på knappen vår handler funksjon vil kjøre, veksling menyen inn og ut etter behov.
Den sjekker bare hvis menyen til venstre er synlig, og hvis det er, vil det skjule det. Hvis det ikke er synlig, vil den vise den. Selv vanligvis på venstre side, menyer kan også legges til toppen, høyre og bunn. Hvis menyen kommer til å være på en annen side, så du bør gjenspeile det her.
Trinn 3
På dette punktet, kan du laste programmet i nettleseren din for å se fremgangen din. Du skal se omtrent slik ut.
Tapping menyknappen fungerer ikke ennå skjønt. Vi må skape og legge til vår meny til programmet først.
4. Opprette Meny
Vi kommer til å lage en funksjon som vil skape menyen for oss. Dette vil bli skapt utenfor config
Trinn 1
Start med å legge en
createMenu funksjon som vist nedenfor
. Ext delen. .define ('SlidingMenu.view.Main', {forlenge: 'Ext.Container', xtype: 'main', krever: ['Ext.Menu'], config: {//..snip} //funksjon går her createMenu: function () {}});
Trinn 2
Opprett en ny Ext.Menu eksempel i createMenu funksjon med følgende alternativer og returnere det
createMenu: function () {. Var menyen = Ext.create ('Ext.Menu', {width: 250, rullbar: "vertikal", eks: [{xtype: 'knapp', text: 'Alternativ 1 ",}, {xtype:' knapp ', tekst: "Alternativ 2",}]}); returnere menyen; }
Du kan legge til så mange knapper som du liker her. Det siste trinnet for å ta før vi har et funksjonelt glidende meny er å sette menyen på View.
Trinn 3
Opprett en initialize funksjon for å legge menyen til View.
initial: function () {Ext.Viewport.setMenu (this.createMenu () {side: "venstre", avslører: true}); }
Denne funksjonen er også lagt til etter config, akkurat som createMenu funksjonen var. Den initialize funksjonen vil automatisk kjøre når vårt syn er klar. Så snart utsikten er klar vår meny vil være for
Trinn 4
Main.js
filen skal nå se slik ut:.
Ext.define ('SlidingMenu.view.Main', {forlenge: 'Ext.Container', xtype: 'main', krever: ['Ext.Menu'], config: {layout: {Type: 'kort'}, eks: [ ,,,0],{xtype: "verktøylinje", forankret: 'top', title: 'Sliding Menu', eks: [{xtype: 'knapp', id: 'listButton', iconCls: "list", ui: 'vanlig', handler: function () {if (Ext.Viewport.getMenus () left.isHidden ().) {Ext.Viewport.showMenu ('venstre');} else {Ext.Viewport.hideMenu ("venstre");}}}] }]}, initial: function () {Ext.Viewport.setMenu (this.createMenu () {side: "venstre", avslører: true}); } CreateMenu: function () {var menyen = Ext.create ('Ext.Menu', {width: 250, rullbar: "vertikal", eks: [{xtype: 'knapp', text: 'Alternativ 1 ",} {xtype: 'knapp', text: 'Alternativ 2 ",}]}); returnere menyen; }});
Hvis du legger søknaden din i nettleseren på nytt, bør du nå være i stand til å tappe listen knappen for å avsløre menyen. Det skal se omtrent slik ut:.
For å skjule menyen, bør du være i stand til å tappe listen ikonet igjen eller sveipe til venstre på beholderen som er blitt presset av til høyre
5 . Lytte etter arrangementer
Det er ikke mye poeng i å lage en meny hvis alternativene ikke gjør noe når avlyttet. Vi nå skal se på hvordan man skal lytte til knappbatterier og hvordan vi kan gjøre noe nyttig med disse hendelsene, for eksempel å endre visningen. Som vi gjorde før, har vi tenkt å bruke Gafler funksjoner for å oppnå dette.
Legg til et behandlingsprogram funksjon til hver av knappene. Hvis du trykker på en av menyelementene, skal du se tilsvarende linje skrives ut til konsollen. . Selv om det er ute av omfanget for denne opplæringen, kan du bruke denne behandleren funksjonen på en lignende måte å utløse et bytte til en ny visning
createMenu: function () {var menyen = Ext.create ('Ext.Menu' , {width: 250, rullbar: "vertikal", eks: [{xtype: 'knapp', text: 'Alternativ 1 ", handler: function () {console.log (" Alternativ 1 Tappet ");}} { xtype: "knappen", tekst: "Alternativ 2", handler: function () {console.log ("Alternativ 2 Tappet");}}]}); returnere menyen;}
Konklusjon
I denne opplæringen dekket vi hvordan å generere en ny Sencha Touch søknad, lage en glidende meny, og tillater brukere å skjule og vise menyen. Menyen bruker i dag standard Sencha Touch styling slik som en forlengelse av denne opplæringen du kanskje ønsker å legge til din egen custom styling ved å redigere app.scss
fil. Hvis du har spørsmål, kan du gjerne la dem i kommentarfeltet. Anmeldelser