Share
In deze zelfstudie leer je hoe je een responsieve webpagina kunt maken met knoppen die afhankelijk van de interactie van de gebruiker verschillende toestanden aannemen. Dit type interactie is vooral handig bij links zoals "kopen" of "verwijderen", waarbij het verstandig is om te bevestigen dat de gebruiker inderdaad een specifieke actie wil ondernemen.
Deze interactie is er een waarvan velen bekend zijn; je kunt een soortgelijk effect zien in de app store van Apple wanneer je apps koopt.
De pagina die we in deze tutorial maken, werkt ook op mobiele apparaten, omdat het een responsief ontwerp is.
We maken een voorbeeldpagina op basis van het Tuts + -netwerk, deze pagina bevat knoppen voor bevestigingsfeedback. Hoewel het voorbeeld gebruikmaakt van bevestigingsknoppen 'join now', kunt u deze stijl van interactie overal gebruiken waar u een gebruiker nodig heeft om de actie te bevestigen die zij gaan ondernemen..
Een goed UI-ontwerp geeft gebruikers een begrijpelijk gevoel van kracht dat hen consistent in controle houdt.
Een belangrijk aspect van menselijke computerinteractie is het overbrengen van een gevoel van controle naar de gebruiker. Wanneer gebruikers de controle hebben, voelen ze zich op hun gemak. Wanneer ze niet de controle hebben, raken ze gefrustreerd. Maar als je erover nadenkt, zijn mensen dat wel altijd onder controle. Computers doen nooit iets zonder dat u ze eerst instrueert.
Dit is waar het belang van goede software en UI-ontwerp in beeld komt. Een goed UI-ontwerp geeft gebruikers een begrijpelijk gevoel van kracht dat hen consistent in controle houdt. Ze zullen nooit vragen "wacht waarom gebeurde dat?" of "wacht hoe ben ik hier geraakt?"
U kunt een gevoel van controle overdragen aan de gebruiker door inzichten aan hen te communiceren bij elke interactie. Help hen oorzaak en gevolg in het systeem te begrijpen. Als u een eenvoudig voorbeeld wilt gebruiken, geeft het systeem u een positief bericht met de melding dat uw instellingen zijn opgeslagen. Gebruikers zullen dus nooit twijfelen: "Ik vraag me af of dat is opgeslagen?"
De interactie die we in deze zelfstudie maken, geeft de gebruiker een gevoel van controle. Door de status van de knop te wijzigen en de gebruiker zijn beslissing om te kopen te laten bevestigen, zorgen we ervoor dat de gebruiker nooit iets onbedoeld doet. Dit is vooral handig als u gebruikers vraagt om uit te delen met hun zuurverdiende geld; het laatste wat iemand wil, is per ongeluk iets betalen!
Het mooie van deze interactie is dat, in plaats van een pop-upprompt te ontvangen met de boodschap "Weet u zeker dat u wilt kopen?", Gebruikers worden geïnformeerd via de knopwijziging dat ze op het punt staan iets belangrijks te doen. Als ze het niet willen doen, kunnen ze gewoon doorgaan met bladeren door de site; terwijl een waarschuwingsprompt expliciet zou vereisen dat de gebruiker een ja / nee-beslissing neemt.
Zorg ervoor dat u de afhankelijkheden van de afbeeldingsbestanden voor deze zelfstudie bij de hand hebt. Zet ze in een map met de naam "afbeeldingen". Al je andere bestanden (HTML, CSS, JavaScript) komen in de hoofddirectory. Aan het einde van de tutorial ziet uw bestandsstructuur er als volgt uit:
Laten we beginnen door enkele eenvoudige HTML-code te maken die onze paginastructuur definieert.
Bevestiging Knopstijlen voor de feedback
Hier hebben we onze eenvoudige HTML5-paginastructuur. We hebben ons DOCTYPE, onze paginatitel en een hoofdartikel toegevoegd element met een ID van #houder
Laten we nu de links toevoegen naar de afhankelijkheden van de markup.
Eerst zullen we een link toevoegen naar onze CSS-stylesheet (die we binnenkort zullen maken). Dit gaat in de element.
Vervolgens voegen we een link naar de gehoste versie van Google van jQuery, evenals een link naar "script.js" die de JavaScript-code bevat die we later maken. Laten we deze vlak voor de sluiting zetten label.
Omdat we HTML5-elementen gebruiken zoals en we moeten de HTML5-shiv toevoegen, zodat onze markup in IE8 werkt. Voeg dit toe aan uw kop:
We zullen deze pagina zo ontwerpen dat deze snel en flexibel is en mobiel. Om ervoor te zorgen dat mobiele browsers onze pagina correct weergeven, moeten we de eigenschap meta viewport instellen. Bekijk het artikel van Ian Yates over de metatag van de viewport voor meer informatie. Anders voegt u eenvoudig dit codefragment toe aan uw element.
Laten we beginnen met het toevoegen van een paginakop aan ons document.
De beste manier om creatieve en technische vaardigheden te leren, zoals ontwerp, ontwikkeling en meer!
Onze header (in verschillende formaten) is vrij eenvoudig en ziet er als volgt uit:
Nu gaan we een ongeordende lijst maken onder onze element. We gebruiken dit om onze vermelde items in te pakken.
Zoals u ziet, hebben we onze ongeordende lijst een klasse 'lijst' gegeven die we zullen gebruiken om de stijlen met CSS te targeten.
Zoals je kunt zien, binnenin elk Binnenkant van Binnenkant van We gaan onze knop geven (de Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Dit is wat we tot nu toe hebben: Nu hebben we de basisstructuur voor elk U kunt doorgaan en de code van het lijstitem kopiëren en plakken voor elke Tuts + -site. Dit is wat we nu hebben: Nu we al onze markeringen hebben voltooid, gaan we beginnen met het vormgeven van de pagina. We beginnen met het instellen van enkele standaard resets: Laten we nu de hoofdstijl stijlen Hier stellen we de achtergrondkleur en een aantal standaardwaarden in voor onze typografie, zoals de lettergrootte, kleur en lijnhoogte. We willen dat onze pagina flexibel is, helemaal tot op mobiel. Dus, de twee belangrijkste componenten die we zullen gebruiken om dit te bereiken zijn percentages en de Door naar onze HTML te kijken, zult u zien Hier stellen we de breedte van onze container in op 100% van de viewport van de browser. Onze marges centreren de inhoud op de pagina. We hebben ook toegevoegd Zoals u kunt zien, heeft onze container op grotere afmetingen wat extra ruimte aan de zijkanten met een lichte achtergrond. Maar bij kleinere maten verdwijnt die extra ruimte en hebben we gewoon een witte achtergrond voor onze inhoud. Laten we niet vergeten om onze afbeeldingen responsief te maken: Laten we nu onze hoofdstijl stijlen Ons header-element en de inhoud ervan zijn nu mooi gecentreerd en groot. Nu gaan we onze lijstitems en hun broers en zussen stylen. Laten we eerst enkele fundamentele structurele stijlen maken: Als je het goed onthoudt, hebben we binnen elk lijstitem twee hoofdelementen: 'pictogram' en 'info'. De icoonfiguur zal naar links zweven en een kleine breedte krijgen. De 'info'-div wordt goed geplaatst en krijgt de meerderheid van de bovenliggende breedte. Zoals je kunt zien, hebben we de Na onze structurele CSS-toevoegingen hebben we nu iets dat er zo uitziet: Zoals u kunt zien, moet dit een beetje worden opgeschoond. Ten eerste omdat we onze elementen 'info' en 'pictogram' laten zweven, moeten we een duidelijk element toevoegen aan elk van de elementen in de lijst. We voegen ook een beetje styling toe aan elk item in de lijst. Ten slotte gaan we de informatie in elk lijstitem stylen: Nu hebben we iets dat er behoorlijk solide uit begint te zien. Laten we nu wat styling toepassen op onze knoppen. We maken ze visueel prominent: Wat hebben we hier gedaan?? Alles ziet er goed uit. Wat we nu willen doen, is het toevoegen van stijlen voor een klasse die op de knop (pen) wordt toegepast wanneer erop wordt geklikt. Voor deze zelfstudie gaan we de tekst "join now" toevoegen aan de bestaande knoptekst wanneer op de knop wordt geklikt. In wezen moet de gebruiker twee keer beslissen om "lid te worden". Om dit te bereiken, gaan we CSS-styling gebruiken, inclusief de CSS3 pseudo-klasse Laten we een klasse maken met de naam 'klikten' waaraan we onze 'geklikte' knopstijlen kunnen toevoegen (voor ontwikkelingsdoeleinden kunt u handmatig een klasse van 'geklikt' toevoegen aan Zoals u kunt zien, hebben we de klasse 'Geklikt' gekoppeld aan de klasse 'Knop'. Op die manier verschijnen de stijlen die we declareren voor 'geklikt' alleen op elementen die ook een knopklasse hebben. Wat styling betreft, hebben we eenvoudig de kleur en randen veranderd. Het is je misschien ook opgevallen dat we een box-shadow aan de knop hebben toegevoegd wanneer erop wordt geklikt. Hierdoor wordt een ingesprongen knopstijl toegevoegd die de gebruiker helpt te bevestigen dat op de knop is geklikt. Wanneer de gebruiker op de prijsknop klikt, willen we de knop laten uitvouwen en de tekst 'join now' toevoegen. Om dit te doen, zullen we de CSS3 pseudo-klasse gebruiken Nu hebben we zoiets als dit: Zoals u kunt zien, begint onze knop 'Nu deelnemen' op mobiel formaat een beetje krap te worden. Als onze koptekst erg lang is, komt onze knop in onze kop. We gebruiken de kracht van mediaquery's om onze actieknop naar een hoger niveau te tillen wanneer we op kleinere schermformaten werken. Laten we een mediaquery maken om onze knop te verplaatsen: Nu zal onze knop onder de kop op kleinere schermafmetingen vallen! Laten we nu naar ons "script.js" -bestand gaan en een javascript schrijven dat onze knopstijlen zal veranderen als er op wordt geklikt. Laten we eerst ons script voor jQuery instellen Ons script is eigenlijk vrij eenvoudig. Het enige wat we moeten doen, is de klasse van "geklikt" schakelen wanneer op een knop geklikt wordt. Dus laten we een functie instellen: Wat we nu willen doen, is controleren of de knop waarop is geklikt al een klasse heeft waarop is geklikt (misschien is er eerder op geklikt). Als er geen klasse 'aangeklikt' is, voegen we deze toe en voorkomen we de Als de knop waarop is geklikt al een klasse heeft waarop is "geklikt" Als een gebruiker op de prijsknop klikt, krijgt deze een gewijzigde knopstatus. Wat als ze de knop willen sluiten en ze buiten de knop zelf klikken? We gaan die klik registreren en verwijderen de klasse van 'geklikt'. Dit is een eenvoudige regel van jQuery: We willen een beetje meer interactiviteit toevoegen door de overgang tussen de 'aangeklikte' en normale knoptoestanden soepeler te maken. We gebruiken gewoon een CSS3-overgang en passen deze toe op de klasse 'join': Je hebt nu een leuke bevestigingsfeedbackknop. Het zal gebruikers helpen hun keuze te bevestigen om een belangrijke beslissing te nemen met uw webpagina / applicatie. Voel je vrij om met dit concept te spelen, het beter te maken en meer te leren!, we hebben twee hoofdelementen; een element. Het icoon
De info
element) element) element) element) een klasse van "join" voor CSS-styling later.
Activetuts+
$ 15.99 Laatste code voor elk
element
Activetuts+
$ 15.99 
Stap 6: elk dupliceren en wijzigen
Element element, alles wat we moeten doen is het dupliceren voor elke Tuts + invoer. Voor elk item in de lijst moeten we het volgende wijzigen:
tekst link
Stap 7: Basis CSS
/ * snelle reset * / body, h1, h2, p, ul, li margin: 0; padding: 0; ul list-style-type: none;
lichaam element. body background: #eee; lettertype: 16px / 1,4em Helvetica, Arial, schreefloos; color: # 333;
Stap 7: Responsief gaan (vloeibaar)
Maximale wijdte regel. is de belangrijkste container voor de inhoud van onze pagina's. We gebruiken percentagewaarden voor de breedte en we voegen wat basisstyling toe om het visueel te scheiden van de pagina-achtergrond. #container width: 100%; marge: 0 auto 40px; max-width: 600px; achtergrond: # fff; grensradius: 0 0 3px 3px; rand: 1px vast # d0d0d0; border-top: 0; vakschaduw: 0 1px 0px #fff;
max-width: 600px omdat we niet willen dat onze lijstitems groter worden.
img max-width: 100%;
Stap 8: Headerstijlen
element en de inhoud erin. header text-align: center; opvulling: 30px 20px; header h1 margin-bottom: 20px; header p color: # 413c38; font-size: 1.2em; line-height: 1.4em;
Stap 9: Structurele lijstitemstijlen
.icon, .info box-sizing: border-box; .icon float: links; width: 15%; text-align: right; padding-left: 3%; .info breedte: 85%; float: left; opvulling: 0 5%;
box-sizing: border-box; regel over deze twee divs. Dit stelt ons in staat om onze totale breedte tot 100% te laten optellen en nog steeds padding toe te voegen zonder een totale breedte van 100% te overschrijden. (Lees Responsive Form Elements aanmoedigen om aardig te spelen) voor meer informatie over deze eigenschap.
Stap 10: lijst met itemstijlen
.lijst li opvulling: 20px 0; border-top: 1px solid #eee; overflow: auto; beiden opschonen; .list li: hover background: # f7f7f7;
.info h2 margin-bottom: 10px; font-size: 1.75em; line-height: 1em; weergave: inline-block; .info p font-size: 14px; color: # 777;
Stap 11: Knopstijlen
een text-decoration: none; color: # fff; .join background: # 57a9eb; / * Oude browsers * / achtergrond: -moz-lineaire gradiënt (boven, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, rgba (87,169,235,1)), kleurstop (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / achtergrond: -ms-lineaire gradiënt (boven, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / achtergrond: lineaire gradiënt (boven, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 57a9eb", endColorstr = "# 359cea", GradientType = 0); / * IE6-9 * / border: 1px vast # 326fa9; border-top-color: # 3e80b1; border-bottom-color: # 1e549d; color: # fff; font-weight: bold; text-transform: in hoofdletters; text-shadow: 0 -1px 0 # 1e3c5e; font-size: 11px; border-radius: 5px; box-shadow: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inzet; white-space: nowrap; -webkit-overgang: alle .25s gemak; -moz-overgang: alle .25s gemak; overgang: alle .25s gemak; float: right; weergave: inline-block; opvulling: 1px 1em 0; / * verschijnen midden van 1 px hoogtepunt * / lijnhoogte: 2.25em;
Stap 11: Alternatieve knopstijlen
::naKlasstijlen geklikt
$ 15.99). .join.clicked background: # 24a501; / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0%, rgba (30.183,0,1)), kleurstop (100%, rgba (36.165 , 1,1))); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / achtergrond: -ms-lineaire gradiënt (boven, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / achtergrond: lineaire gradiënt (boven, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 1eb700", endColorstr = "# 24a501", GradientType = 0); / * IE6-9 * / border: 1px solid # 1e8701; border-bottom-color: # 176701; border-top-color: # 24a501; vakschaduw: 0 1px 0 #bbb, 0 1px 0 # acc63d inzet; opvulling: 1px 2em 0; cursor: wijzer; .een.geklikt: actief vakschaduw: 0 0 8px # 777 inzet;
::na klasse stijlen::na om de gewenste tekst in te voegen. .join.clicked :: before content: 'Nu meedoen';
Stap 12: Mediaquery's
@media-scherm en (max-width: 450px) .info h2 display: block; .join float: none; margin-bottom: 20px;
Stap 13: Knopinteractie met jQuery
$ (document) .ready (function () // code hier);
Stap 14: Categorieën omwisselen
$ ('. join'). on ('klik', functie () // code hier); href attribuut van de link wordt niet gevolgd. // als er geen klasse van geklikt is, // voeg er een toe en voorkom dat de link wordt gevolgd als (! ($ (this) .hasClass ('clicked'))) // Alle 'aangekochte' klassen verwijdert als er een $ ('. Clicked'). removeClass ('geklikt'); // Voeg de klasse 'clicked' toe aan de knop waarop $ (this) .addClass ('geklikt') is geklikt; // voorkomen dat de link wordt gevolgd, retourneren false; href waarde wordt gevolgd door de browser. Dit werkt goed, want als een gebruiker deze pagina tegenkomt en javascript uitgeschakeld heeft, kunnen ze eenvoudigweg niet bevestigen dat hij "nu lid wordt". Integendeel, de link wordt eenvoudig gevolgd zonder bevestigingsfeedback.
Stap 15: De klasse met kliks verwijderen
// als klikken gebeurt buiten de knop .buy, verwijdert u de klasse $ ('body'). on ('klik', functie () $ ('.geklikt'). removeClass ('geklikt'););
Stap 16: Een overgang toevoegen
-webkit-overgang: alle .25s gemak; -moz-overgang: alle .25s gemak; -ms-overgang: alle .25s gemak; -o-overgang: alle .25s gemak; overgang: alle .25s gemak;
Dat is het!
Accentsconagua
