Dragspel är ett av de mest populära sätten att organisera information och sedan använda olika effekter kan vi visa den informationen som finns i dem. Dessa har redan funnits på webben ett tag och vi kan implementera dem med ramar som t.ex. jQuery, Bootstrap och även om vi vågar bygga dem med endast användning HTML5 Y CSS3.
Men tekniken utvecklas snabbt och även om det är ganska enkelt att implementera ett dragspel med de ovannämnda ramarna, finns det fortfarande metoder som går utöver denna enkelhet. En av dessa är att göra det med det nya formspråket som heter Material Design och stöder oss från ramarna Förverkligas för det.
Dragspel i materialdesign
Dragspel i Material Design De är inte bara enkla att implementera, vi har också flera funktioner för dem, vilket ger oss en mycket större variation av vår webbplats, bland dem har vi följande:
Dragspel
Det är den klassiska och gör det möjligt att organisera informationen i block som kollapsar efter varandra när du klickar på dem, dessa definieras med klassen hopfällbart dragspel.
Poppa ut
Skriv dragspel poppa ut lägga till en ny effekt till den populära komponenten och kombinera klassisk funktionalitet med mycket mer genomarbetade displayeffekter, dessa definieras med klassen hopfällbar popout.
Utbyggbart
Slutligen expanderbara dragspel eller expanderbart gör det möjligt att öppna flera dragspel samtidigt, det vill säga dragspelet som denna tillgång inte kommer att stänga om vi vill se någon annan, för att definiera denna typ av dragspel attributet används data-hopfällbar av typ utbyggbart.
När vi väl vet vilka typer av dragspel som vi kan implementera, kommer vi att göra ett exempel där vi inkluderar de tre typerna på en enda sida.
Implementering av dragspel på nätet
Det första du ska göra är att inkludera biblioteken i Förverkligas, både .js -filen och ramens stilark, är det viktigt att vi också länkar till ikonerna för att kunna använda dem i vårt exempel och utan att glömma den senaste versionen av jQuery före JavaScript -biblioteket för Förverkligas:
När detta är gjort ska vi skapa en struktur med tre behållare för varje dragspel som vi implementerar, det första är standard dragspel och för att definiera det måste vi skapa en struktur av ul och li som vi kommer att identifiera med motsvarande klasser:
Standard dragspel med Material Design
- filter_dramaFörst
Lorem ipsum smärta sitter.
- platsAndra
Lorem ipsum smärta sitter.
- vad är hettTredje
Lorem ipsum smärta sitter.
FÖRSTORA
Som vi kan se ser det ganska bra ut och vi behövde inte göra någonting komplicerat, nu ska vi skapa vårt popout -dragspel, och för detta behöver vi bara lägga till klassen hopfällbar popout och behåll strukturen i det tidigare exemplet med att vi kommer att skapa vår funktionalitet, låt oss se kodavsnittet för detta:
Som vi kan se har vi skapat en extremt kraftfull och visuellt imponerande funktionalitet på bara några minuter. Det är bara upp till var och en att ta exemplet och anpassa det till sina behov för att skapa rika och användbara funktioner för alla nuvarande webbplatser eller applikationer.
dragspel_material_design.html 2.87K 170 Nedladdningar
