sætter brugerne i feedback knapper, kontrol med bekræftelse af feedback - knapper,,,,, at dette tutor vil lære dig, hvordan man skaber en lydhør hjemmeside med knapper, der tager på forskellige stater afhængigt af brugerens interaktion.denne form for interaktion er navnlig nyttig på forbindelser, såsom "køb" eller "fjerne" hvor det er klogt at bekræfte, at de bruger også vil have en specifik aktion.,,,, denne interaktion er, at mange er bekendt med, at du kan se en lignende virkning i apples app butikken, når de køber apps.,,, undskylder den franske, du får den idé...den side, vi skaber i denne forelæsning vil også arbejde med mobilt udstyr, som det er deres design.,, indledning, vil vi skabe et eksemplar, baseret på tuts + - netværket, denne side vil indeholde en bekræftelse af feedback - knapper.selv om f.eks. bruger "med" bekræftelse knapper, du kan måske bruge denne form for interaktion, hvor du har brug for en bruger til at bekræfte de foranstaltninger, de er ved at tage, hvornår og hvorfor vælge dette samspil, god - design giver brugerne en klar følelse af magt, som konsekvent hjælper dem være i kontrol. et vigtigt aspekt af den menneskelige computer interaktion give brugeren en følelse af kontrol.når brugere er i kontrol, de føler sig godt tilpas.når de har ikke kontrol, de bliver frustrerede.men når man tænker over det, mennesker er altid under kontrol.computere aldrig gøre noget uden først at undervise dem. dette er, hvor betydningen af god software og - design, kommer ind i billedet.god - design giver brugerne en klar følelse af magt, som konsekvent hjælper dem være i kontrol.de vil aldrig bede "vent, hvorfor skete det?"eller "vent, hvordan kom jeg her?"kan du sende en følelse af kontrol til brugeren kommunikerer viden til dem med hver interaktion.hjælpe dem med at forstå årsag og virkning i systemet.at anvende en grundlæggende eksempel, hvis du redder noget systemet vil give dem et positivt budskab til deres indstillinger er blevet reddet.således, vil brugerne aldrig spørgsmål ", spørger jeg mig selv, om det var reddet."hvad har det at gøre med resten?det samspil, vil vi skabe i denne forelæsning, bidrager til at give brugeren en følelse af kontrol.ved at ændre på den medlemsstat, og som brugeren bekræfte deres beslutning om at købe, og vi sørger for, at brugeren gør aldrig noget utilsigtet.det er især nyttig, når man spørger brugerne til at skille sig af med deres hårdt tjente penge; det sidste nogen ønsker, er at komme til at betale for noget!den skønhed af denne interaktion er, at i stedet for at få en pop - up hurtig siger, "er du sikker på, du vil købe?"brugere, der er meddelt via knap medlemsstat ændre de er ved at gøre noget vigtigt.hvis de ikke ønsker at gøre det, de bare kan fortsætte med at gøre stedet; en indberetning, hurtig udtrykkeligt kræver, at brugeren giver et ja /nej afgørelse, før du starter, sørg for at få det billede, fil afhængighed for denne forelæsning.læg dem i en mappe, der hedder "billeder".alle dine filer (http: //, css, javascript) vil gå i den centrale fortegnelse.ved afslutningen af den pædagogiske, din fil struktur vil se sådan ud:,, trin 1: begyndt med: lad os komme i gang med at skabe nogle grundlæggende html, der definerer vores side struktur. <!doctype html > < html > < head > < afsnit > bekræftelse feedback knap styles < /afsnit > < /head > < krop > < afsnit id = "containere" > < /afsnit > < /organ > < /html >, så her har vi vores grundlæggende html5 side struktur.vi har medtaget vores doctype, vores side titel, og den vigtigste, < afsnit > element med et id - kort,&#container, trin 2:, der forbinder til afhængighed, lad os tilføje forbindelser til tillægget er afhængighed, for det første vil vi tilføje en forbindelse til vores css stylesheet (som vi snart vil skabe).dette går i, < head > element. < forbindelse href = "styles. css" rel = "stylesheet" />, det næste vil indeholde et link til google er vært for version af jquery, samt en forbindelse til "script. j 'er", som vil hold javascript kode skaber vi senere.lad os sætte disse lige før den lukker, < /organ >, tag. < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.7.1 /jquery. min.js" > < /manuskript > < manuskript src = "manus. det er" type = "tekst /javascript" > < /manuskript > < /organ >, fordi vi vil bruge html5 elementer som < header > og < afsnit > vi skal behov for at tilføje et html5 kniv - - arbejder i ie8.dette indgå i deres hoved:, <!- hvis det er [9] > < manuskript src = //html5shiv. googlecode. kom /svn /bagagerum /html5. er "> < /manuskript > <![endif] - >,, trin 3: udarbejdelse af fleksibelt, vi vil udforme denne side for at være lydhøre og fleksible ned til mobile.for at sikre mobile browsere gøre vores side korrekt, vi bliver nødt til at indstille meta - viewport ejendom.for at lære mere om dette, tjek ian yates' artikel om viewport meta - mærke.ellers blot tilføje dette indlæg af kode i din, < head > element. < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1, maksimale omfang = 1 >,, trin 4: at skabe header avance, - start ved at tilføje en side ned til vores dokument. < header > < h1 > < img src =" billeder /tuts plus. men heller ikke dér er menneskene sikre "/> < /h1 > < p > den bedste måde at lære kreative og tekniske færdigheder som konstruktion, udvikling og mere!< /p > < /header >, vores mission (i forskellige størrelser) er ret grundlæggende og ser sådan ud:,, løntrin 5: etablering af listen af avancen, nu er vi ved at skabe en unordered liste under vores < header > element.vi bruger den til at afslutte vores produkter på listen i., unordered liste, < ul klasse = "listen" > < /ul >, som du kan se, vi gav vores unordered liste a - liste, som vi kan bruge til at målrette sin stil med ccs. den liste, som punkt struktur:, < li > < figur klasse = "ikon" > <!- ikon - > < /figur > < div klasse = "info" > <!- info - > < /div > < /li >, som du kan se, i hver < li >,, vi har to centrale elementer; a, < div > og a < figur >,.tallet element er ideelt til hus, vores liste punkt på dagsordenen er ikon.det okay med en klasse af "info", hvor vi stiller de oplysninger, der er forbundet med ikon.igen, dette er indeholdt i en, < li > element. ikonet indeni, < figur klasse = "ikon" > vi skal have post er ikon ved, < img />, tag.tallet element er bredde, vil blive kontrolleret.så ved at hævde, at dette billede skal have en maksimal bredde svarende til de tal, det vil resize i henhold til moderselskabet element., <figure class="icon"> \t<img src="images/active-tuts.png"/> </figure>,The info,Inside of ,<div class="info">, we are going to have three elements:, ,The item's header (using the ,<h2>, element),The action button (using the ,<a>, element),The item's description (using the ,<p>, element), ,We're going to give our button (the ,<a>, element) a class of "join" for CSS styling later on., <div class="info"> \t<h2>Activetuts+</h2> \t<a href="http://tutsplus.com" class="join">$15.99</a> \t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua.</p> </div>,Final code for each ,<li>, element,\t <li> \t<figure class="icon"> \t\t<img src="images/active-tuts.png"/> \t</figure> \t<div class="info"> \t\t<h2>Activetuts+</h2> \t\t<a href="http://active.tutsplus.com/" class="join">$15.99</a> \t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua.</p> \t</div> </li>,Here's what we have so far:, , Step 6: Duplicating and Modifying Each ,<li>, Element,Now that we have the basic structure for each ,<li>, element, all we have to do is duplicate it for each Tuts+ entry. vi er nødt til at ændre følgende for hver liste punkt:,,, < h2 >, tekst, < en href >, link, < img src />, file navn, kan du gå videre og kopi /pasta listen punkt for hver tuts + stedet. det er, hvad vi har nu:,, trin 7: grundlæggende forskning, nu hvor vi har alle vores - komplette, lad os begynde - side.vi vil begynde med et par grundlæggende nulstiller: /* hurtigt nulstille * /organ, h1, h2, p, ul, li {margen: 0; polstring: 0;} ul (liste stil type: ingen;}, lad os så stil det vigtigste organ, element. organ {baggrund:&#eee skrifttype: 16px /1.4em helvetica, ariel, uden serif; farve:ō.}, her har vi sat baggrund farve og en misligholdelse for vores typografi, f.eks. type, størrelse, farve og linjehøjde.,, trin 7: responderende (flydende), ønsker vi, at vores side til at være fleksibel, hele vejen ned til mobile.så de to centrale elementer, vi skal bruge for at nå dette er procentsatser og max bredde, regel., ved at se på vores html, ser du, < afsnit id = "containere" > er den primære beholder til vores side indhold.vi bruger procentdel værdier for den bredde, og vi vil tilføje nogle grundlæggende design at adskille det visuelt fra side baggrund.,&#container (bredde: 100% margen: 0 - 40px; max bredde: 600px; baggrund:&#fff; grænseoverskridende radius: 0 0 3px 3px; grænse: 1px fast&#d0d0d0; grænse top: 0; rubrik skygge: 0 1px 0px&#fff;}, vi beholder bredde skal være 100% af browseren er viewport.vores margener center indholdet på den side.vi tilføjede også, max bredde: 600px, fordi vi ikke ønsker, at vores liste, der nogensinde er større end det, som du kan se, på større størrelser vores container har en ekstra plads på siderne med en lys baggrund.men i mindre størrelser, at ekstra plads forsvinder, og at vi kun har en hvid baggrund for vores indhold. vi må ikke glemme, at vores billeder, img (max reagerer: bredde: 100%), trin 8: header styles, lad os nu stil vores vigtigste, < header >, element og indholdet i det, header {tekst tilpasse: center; polstring: 30px 20px;} header h1 {margen nederst: 20px;} header p (farve:Ɲc38; skriftstørrelsen: 1.2em; linje højde: 1.4em;}, vores header element, og dens indhold er nu pænt samlet og størrelse.,, trin 9: strukturelle liste punkt styles, nu begynder vi satte vores liste over produkter og deres søskende.først, lad os skabe en grundlæggende strukturelle styles:,. ikon,. info (rubrik størrelsessortering: grænse boks}. ikon {flyde: venstre; bredde: 15%; tekst tilpasse: ret; polstring til venstre: 3%;}. info (bredde: 85%; flyde: venstre polstring: 0, 5%}, hvis du husker rigtigt, indenfor hver liste punkt, vi har to hovedelementer: "ikon" og "info".ikon - tal vil blive lanceret tilbage og får en lille bredde."info" div vil være ret og på de fleste af de oprindelige bredde. som du kan se, har vi brugt, rubrik størrelsessortering: grænse boks, tage stilling til, om disse to divs.dette giver os mulighed for at få vores samlede bredde tilføje op til 100%, og stadig være i stand til at tilføje polstring uden hen over en samlet bredde 100% (for at lære mere om denne ejendom, læse fremme responderende form elementer til at spille sød).,, trin 10: liste over punkt styles, efter vores strukturelle css tilføjelser, vi nu har i noget, der ligner det, som du kan se, er det nødvendigt, at dette bliver ryddet lidt op.først, fordi vi flyder vores elementer "info" og "ikon", er vi nødt til at tilføje en klar til hver af listen over elementer.vi vil også tilføje lidt på vej til hver liste punkt.,. liste li (polstring: 20px 0; grænseoverskridende top: 1px fast&#eee overløb: auto, klart, at begge;}. liste li - svævning (baggrund:&#f7f7f7;), og endelig skal vi stil oplysningerne i hver liste punkt:,. info h2 (margin nederst: 10px; skriftstørrelsen: 1.75em; linje højde: 1em; display: i overensstemmelse med blok.}. info p (skriftstørrelse: 14px; farve:̉}, nu har vi noget, der begynder at se ret solidt.,, trin 11: knap styles, lad os anvende nogle på vej til vores knapper.We'll make them visually prominent:, a { \ttext-decoration:none; \tcolor:#fff; } .join { \tbackground: #57a9eb; /* Old browsers */ \tbackground: -moz-linear-gradient(top, rgba(87,169,235,1) 0%, rgba(53,156,234,1) 100%); /* FF3.6+ */ \tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,169,235,1)), color-stop(100%,rgba(53,156,234,1))); /* Chrome,Safari4+ */ \tbackground: -webkit-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* Chrome10+,Safari5.1+ */ \tbackground: -o-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* Opera 11.10+ */ \tbackground: -ms-linear-gradient(top, rgba(87,169,235,1) 0%,rgba(53,156,234,1) 100%); /* IE10+ */ \tbackground: linear-gradient(top, rgba (87169235,1) 0%, rgba (53156234,1) 100%) /* w3c * /filter: progid: dximagetransform. microsoft. hældning (startcolorstr =9a9eb, endcolorstr =ŧcea, gradienttype = 0) /* ie6-9 * /grænse: 1px fastņfa9; grænse - farve:e80b1; grænseoverskridende bunden farve:e549d; farve:&#fff; skrifttype vægt: dristige; tekst omdanne: store; tekst skygge: 0 - 1px 0e3c5e; skriftstørrelsen: 11px; grænseoverskridende radius: 5px; rubrik skygge: 0 1px 0&#bbb, 0 1px 0 cccf3 indpresningsdybde. hvidt rum: nowrap; - webkit overgang. 25s lette; - moz overgang. 25s lette; overgang. 25s lette; flyde: ret; display: i overensstemmelse med blok; polstring: 1px 1em 0 /* gøre anføres center fra 1px fremhæve * /linje højde: 2.25em;}, - vi gør her?,,,,,,,, vi lancerede vores knappen til højre.det vil gøre den knap ud til højre for den vigtigste liste header.,, polstring, brugte vi linjehøjde ejendom til knappen højden, vi ønskede.vi tilføjede også 1px polstret på toppen, opvejer den 1px fremhæver vi tilføjede ved hjælp af rubrik skygge ejendom.,, visuelle stil, tilføjede vi nogle visuelle stil med grænser, rubrik skygger osv. vi brugte også den css3 baggrund gradient objekt (du kan bruge en generator værktøjer som f.eks. colorzilla til generering af din stigninger).,,, trin 11: anden knap styles, alt ser ret god.det, vi nu skal gøre, er at tilføje styles i en klasse, der vil blive anvendt til knap (s), når de er sammen.for resten, er vi nødt til at tilføje teksten "med" de eksisterende knap tekst, når knappen bliver slået.Essentially, the user has to make the decision to "join" twice.,To accomplish this, we are going to use some CSS styling, including the CSS3 pseudo class ,::after,,Clicked class styles,Let's create a class called 'clicked' to which we can add our 'clicked' button styles (for development purposes, you can manually add a class of "clicked" to any ,<a href="" class="button">$15.99</a>,)., .join.clicked { \tbackground: #24a501; /* Old browsers */ \tbackground: -moz-linear-gradient(top, rgba(30,183,0,1) 0%, rgba(36,165,1,1) 100%); /* FF3.6+ */ \tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,183,0,1)), color-stop(100%,rgba(36,165,1,1))); /* Chrome,Safari4+ */ \tbackground: -webkit-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* Chrome10+,Safari5.1+ */ \tbackground: -o-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* Opera 11.10+ */ \tbackground: -ms-linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* IE10+ */ \tbackground: linear-gradient(top, rgba(30,183,0,1) 0%,rgba(36,165,1,1) 100%); /* W3C */ \tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1eb700', endColorstr='#24a501',GradientType=0 ); /* IE6-9 */ \tborder:1px solid #1e8701; \tborder-bottom-color:#176701; \tborder-top-color:#24a501; \tbox-shadow:0 1px 0 #bbb, 0 1px 0 #acc63d inset; \tpadding:1px 2em 0; \tcursor:pointer; } .join.clicked:active { \tbox-shadow:0 0 8px #777 inset; },As you can se, vi har knyttet "klik" gruppe "knap" klasse.på den måde styles erklærer vi for klikkede "vil kun anføres på elementer, som også har en klasse af knap.for så vidt angår - går vi ganske enkelt ændrede sin farve og grænser.du kan også have bemærket, at vi har tilføjet en kasse skygge til knap, når det bliver slået.dette vil yderligere en indgroet knap stil, der bidrager til at styrke til brugeren, at knap var sammen.,,: efter klasse styles, når brugeren klik prisen knap, hvad vi ønsker at gøre, er at have den knap, udvide og prepend teksten "med".for at gøre det, vil vi bruge de css3 pseudo - klasse: efter at indsætte den tekst, vi ønsker, med. sammen: før (indhold:'join nu "), og nu har vi noget lignende:,, trin 12: media forespørgsler, som du kan se, på mobile størrelse vores" med "knap er begyndt at blive lidt trangt.hvis vores header tekst er meget lang, vores knap vil løbe ind i vores mission.så vil vi udnytte den magt af medier forespørgsler til at støde vores aktion knap til næste niveau, når vi er på mindre skærmstørrelser. lad os skabe et media forespørgsel for at flytte vores knap:, @ medier skærm og max bredde: 450px) {. info h2 (display: blok.}. med {flyde - ingen; margen nederst: 20px;}}, nu vores knap vil støde ned under den overskrift på mindre skærmstørrelse.,, trin 13: knap interaktion med jquery, lad os gå ind i vores "script. er" fil og skrive nogle javascript, der vil ændre vores knap styles, når de bliver sammen. lad os først fælde vores manuskript for jquery $(dokument). - (function() (//kode her}).,, punkt 14: toggling klasser, vores manuskript er faktisk ret enkelt.det eneste vi skal gøre er at aktivere den klasse "klik", når en knap får sammen. så lad os fælde en funktion: $(". i '). ('click, function() (//kode her}), nu, hvad vi ønsker at gøre, er at se, om de knap var sammen allerede har en klasse" klik "(det var måske klikkede tidligere).hvis det ikke er "klik" klasse, vi kan tilføje det og forhindre, href, attribut i forbindelse med forfulgt. //, hvis det ikke har en klasse sammen, //tilføje en og forhindre, at forbindelsen bliver fulgt, hvis (!($(dette). hasclass ('clicked ')) (//fjerne enhver "klik" klasser, hvis der er $("klik"). removeclass ('clicked); //add "klik" klasse til knap, der blev slået $(det). addclass ('clicked'); ////////, at forbindelsen fra følges tilbage falske}, hvis den knap, der var faldet allerede har en klasse "klik", href, værdi vil blive efterfulgt af browseren.dette fungerer godt, for hvis en bruger støder på denne side og har javascript handicappede, de vil ikke være i stand til at bekræfte deres beslutning om at "med".men forbindelsen vil blot følges uden bekræftelse feedback, trin 15: at fjerne klikkede klasse, hvis en bruger klik på den pris, knap, vil de få en ændret knap.hvad, hvis de ønsker at afsætte knap, og de klikker uden for det knap selv.vi skal til at registrere det klik og fjerne klassen af "klik".det er en simpel række jquery: //hvis klik sker udenfor. køber knap, fjern det er klasse $('body). ('click, function() {$(. "klik"). removeclass ('clicked)}), trin 16: at føje en overgang, vi vil at tilføje en lille smule mere interaktivitet ved overgangen mellem "klik" og normale knap stater nemmere.vi skal bare bruge en css3 overgang og anvende den til "med knap klasse:, - webkit overgang. 25s lette; - moz overgang. 25s lette; - ms overgang. 25s lette; - o-transition: alle. 25s lette; overgang. 25s lette,,, er det!du har nu en god bekræftelse feedback - knappen.det vil hjælpe brugerne bekræfte deres valg at træffe en vigtig beslutning, med din hjemmeside /anvendelse.de er fri til at lege med dette begreb, og gøre det bedre og lære mere.,,,
