Opprett innebygd lasting effekt i knapper med LADDA

Det finnes ulike typer animasjoner du kan søke inn på nettsiden din. Animasjon for tekst, modal boks, overgang og fremdriftsindikator. For fremdriftsindikatorer, vanligvis i form av barer, viser fremdriften du ser på linjen, hvor mye fremgang er gjort (eller lastet). Hvis du er interessert i fremgang inne i en knapp, kan du prøve å laste ut.

Ladda er et jQuery-plugin laget av Hakim El Hattab for å gi deg lastingseffekten inne i en knapp . Det er et brukergrensesnitt som effektivt skiller gapet mellom handling og tilbakemelding. Brukerne vil bli gitt tilbakemelding i form av en lastindikator i stedet for å måtte forlate siden. Det finnes også en versjon av Last for WordPress tilgjengelig.

Grunnleggende bruk

Ladda kan brukes som et frittstående plugin som ikke trenger noen andre avhengigheter. For å komme i gang må du først ta med både upload.min.js og spin.min.js- filene du kan få fra GitHub-siden i prosjektet ditt, slik som det.

For å få knappen til å bruke standardlast-temaer, last CSS-filen til load.min.css . Hvis du bare vil ha funksjonsknappene uten temaet, laster du filen load-themeless.min.css .

HTML Markup

For å lage ladda-button arbeid, må du legge inn ladda-button i knappen. Her er et eksempel:

 Sende inn 

Ladda gir deg også muligheter i HTML ved hjelp av dataattributter for knappestilen. Som du kan se over, bruker knappen data-style for animasjonsstil. Hvis du vil bruke en annen stil, kan du sjekke hele listen på demoversiden.

For å endre fargen, kan du bruke data-color . For knappestørrelse, inkludere data-size til knappen.

Slå sammen med serveren

Og nå, for å få laste animasjonen til serveren (som vil laste siden etter animasjonen) trenger vi bind() . Dette vil binde fremdriftsknapper og simulere lasting fremgang:

Du kan også kontrollere knappene dine ved hjelp av Javascript API med følgende tilnærming:

Konklusjon

Med støtte fra Bootstrap og å være lydhør, er Ladda verdt et forsøk i prosjektet. Dessuten har den blitt testet og det fungerer bra i den nyeste versjonen av Chrome, Firefox, Safari samt IE9 og nyere. Ta gjerne beskjed om hva du synes i kommentarfeltet nedenfor.

Dette verktøyet lar deg teste WordPress-plugins uten å installere det

Alle som bruker WordPress, vet om fjellet av plugins tilgjengelig online gratis . Det er så mange der ute, det kan være vanskelig å vite hva du skal prøve.Hvis du ikke vil installere nye WP-oppsett bare for å teste forskjellige plugins, vil du elske Addendio . Det er et gratis verktøy for WordPress-brukere som lar deg prøve tusenvis av plugins gratis gjennom en online webapp.Bare s

(Tekniske og design tips)

Slik deaktiverer du permanent Windows 8.1 Help Tips [QuickTip]

Når du oppdaterer til Windows 8.1 for første gang, får brukerne popup-vinduer for hjelpetips. Disse popup-vinduene hjelper første gang brukere lærer Metro UI, slik at de ikke blir forvirret. Disse popup-vinduene slutter vanligvis å vises etter at brukerne har fullført opplæringen.Noen brukere har imidlertid klaget over at disse popupene vil holde seg fast selv etter at opplæringen er over. Hvis du

(Tekniske og design tips)