Trekkspill er en av de mest populære måtene å organisere informasjon på, og deretter bruke forskjellige effekter kan vi vise informasjonen som finnes i dem. Disse har allerede vært på nettet en stund og vi kan implementere dem med rammer som f.eks jQuery, Støvelhempe og selv om vi tør å bygge dem med bare bruk HTML5 Y CSS3.
Men teknologier utvikler seg raskt, og selv om implementering av et trekkspill ved hjelp av de ovennevnte rammene er ganske enkelt, er det fortsatt metoder som går utover denne enkelheten. En av disse er å gjøre det med det nye formspråket som heter Materialdesign og støtter oss fra rammen Materialiser for det.
Trekkspill i materialdesign
Trekkspill i Materialdesign De er ikke bare enkle å implementere, vi har også flere funksjoner for dem, noe som gir oss et mye større utvalg på nettstedet vårt, blant dem har vi følgende:
Trekkspill
Det er den klassiske og gjør det mulig å organisere informasjonen i blokker som kollapser etter hverandre når du klikker på dem, disse er definert med klassen trekkspill som kan klappes sammen.
Sprette ut
Skriv trekkspill sprette ut legge til en ny effekt til den populære komponenten og kombinere klassisk funksjonalitet med mye mer forseggjorte visningseffekter, disse er definert med klassen sammenleggbar popup.
Utvidbar
Til slutt trekkspill som kan utvides eller utvidbar gjør det mulig å åpne flere trekkspill samtidig, det vil si trekkspillet som denne eiendelen ikke vil lukke hvis vi vil se noen andre, for å definere denne typen trekkspill attributtet brukes data-sammenleggbar av typen utvidbar.
Når vi vet hva slags trekkspill vi kan implementere, skal vi lage et eksempel der vi inkluderer de tre typene på en enkelt side.
Implementering av trekkspill på nettet
Det første du må gjøre er å inkludere bibliotekene til Materialiser, både .js -filen og rammens stilark, er det viktig at vi også lenker til ikonene for å kunne bruke dem i vårt eksempel og uten å glemme den nyeste versjonen av jQuery før JavaScript -biblioteket til Materialiser:
Når dette er gjort, skal vi lage en struktur med tre beholdere for hvert trekkspill som vi implementerer, den første vil være standard trekkspill og for å definere den må vi lage en struktur av ul og li som vi vil identifisere med tilsvarende klasser:
Standard trekkspill med materialdesign
- filter_dramaFørst
Lorem ipsum smerter sitter godt.
- plassSekund
Lorem ipsum smerte sitter amet.
- hva er hotTredje
Lorem ipsum smerter sitter godt.
FORSTØRRE
Som vi kan se, ser det ganske bra ut, og vi trengte ikke å gjøre noe komplisert, nå skal vi lage trekkspill med popout -type, og for dette er det bare å legge til klassen sammenleggbar popout og behold strukturen i det forrige eksemplet med at vi skal lage funksjonaliteten vår, la oss se kodebiten for dette:
Som vi kan se, har vi skapt en ekstremt kraftig og visuelt imponerende funksjonalitet på bare noen få minutter. Det er bare opp til alle å ta eksemplet og tilpasse det til deres behov for å skape rike og nyttige funksjoner for alle nåværende nettsteder eller applikasjoner.
trekkspill_materiale_design.html 2.87K 170 Nedlastinger
