nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Creëer ingebouwd laadeffect in knoppen met LADDA

Er zijn verschillende soorten animatie die u op uw webpagina kunt toepassen. Animatie voor tekst, modale box, overgang en de voortgangsindicator. Voor voortgangsindicatoren, meestal in de vorm van balken, geeft de voortgang die u op de balk ziet aan hoeveel vooruitgang is geboekt (of geladen). Als je echter geïnteresseerd bent in vooruitgang binnen een knop, probeer dan Ladda.

Ladda is een jQuery-plugin van Hakim El Hattab om je het laadeffect binnen een knop te geven . Het is een UI-concept dat effectief de kloof tussen actie en feedback scheidt. Gebruikers krijgen feedback in de vorm van een laadindicator in plaats van dat ze de pagina moeten verlaten. Er is ook een versie van Ladda voor WordPress beschikbaar.

Standaard gebruik

Ladda kan worden gebruikt als een op zichzelf staande plug-in die geen andere afhankelijkheden nodig heeft. Om te beginnen, moet je ten eerste zowel de ladda.min.js en spin.min.js bestanden opnemen die je op de GitHub-pagina in je project kunt krijgen, zoals zo.

Als u wilt dat de knop standaard Ladda-thema's toepast, laadt u het CSS-bestand van ladda.min.css . Als je alleen de functionele knoppen wilt zonder het thema, laad dan het bestand ladda-themeless.min.css .

HTML-markup

Om Ladda te laten werken, moet je de klasse van de ladda-button in de knop. Hier is een voorbeeld:

  

Ladda biedt ook opties binnen de HTML met behulp van gegevenskenmerken voor de knopstijl. Zoals je hierboven kunt zien, gebruikt de knop datastijl voor de animatiestijl. Om een ​​andere stijl toe te passen, kunt u de volledige lijst op de demopagina bekijken.

Als u de kleur wilt wijzigen, kunt u datakleur gebruiken. Voor knopgrootte, neem data-size naar de knop.

Samenvoegen met de server

En nu, om de laadanimatie naar de server te verzenden (die de pagina na de animatie opnieuw laadt), hebben we de methode bind() nodig. Dit zal de voortgangsknoppen binden en de voortgang van het laden simuleren:

U kunt ook uw knoppen bedienen met Javascript API met de volgende aanpak:

Conclusie

Met de steun van Bootstrap en het reactievermogen is Ladda het proberen waard in uw project. Bovendien is het getest en werkt het goed in de nieuwste versie van Chrome, Firefox, Safari en IE9 en hoger. Laat het ons weten in het opmerkingenveld hieronder.

7 manieren om uw productiviteit aanzienlijk te vergroten

7 manieren om uw productiviteit aanzienlijk te vergroten

In 1915 presenteerde Albert Einstein zijn briljante en revolutionaire relativiteitstheorie. In de drie jaar voorafgaand daaraan had hij zich volledig toegewijd aan zijn schepping, zonder te worden afgeleid door iets anders. We suggereren niet dat je drie jaar aan een bepaald project werkt (tenzij je dat echt wilt), maar deze benadering om volledig op één stuk werk te focussen is een levendige illustratie van de nieuwe werktrend ' Doing Less'.Z

(Technische en ontwerptips)

Twitter versus Weibo: 8 dingen die Twitter kan leren van de laatste

Twitter versus Weibo: 8 dingen die Twitter kan leren van de laatste

Sina Weibo is geen grap. Het is nu de meest populaire microblogdienst in China. Het verbruikt 90% marktaandeel van de microblogdienst in China, met meer dan 140 miljoen gebruikers in minder dan 2 jaar, terwijl Twitter in minder dan 5 jaar 200 miljoen gebruikers heeft verworven. Het is nieuw, het is heet en het wordt steeds groter en sterker

(Technische en ontwerptips)