Share
In diesem Lernprogramm erfahren Sie, wie Sie eine responsive Webseite mit Schaltflächen erstellen, die je nach Interaktion des Benutzers unterschiedliche Status annehmen. Diese Art der Interaktion ist besonders nützlich für Links wie "Kaufen" oder "Löschen", bei denen es sinnvoll ist, zu bestätigen, dass der Benutzer tatsächlich eine bestimmte Aktion ausführen möchte.
Diese Interaktion ist eine, die viele kennen; Beim Kauf von Apps können Sie einen ähnlichen Effekt im App Store von Apple feststellen.
Die Seite, die wir in diesem Tutorial erstellen, funktioniert auch auf mobilen Geräten, da es sich um ein responsives Design handelt.
Wir erstellen eine Musterseite basierend auf dem Tuts + -Netzwerk. Diese Seite enthält Bestätigungsschaltflächen. Obwohl in diesem Beispiel die Bestätigungsschaltflächen "Jetzt beitreten" verwendet werden, ist es denkbar, dass Sie diese Art der Interaktion überall dort einsetzen können, wo Sie einen Benutzer benötigen, um die Aktion zu bestätigen, die er ausführen möchte.
Ein gutes UI-Design gibt den Benutzern ein verständliches Gefühl der Macht, das ihnen stets hilft, die Kontrolle zu behalten.
Ein wichtiger Aspekt der Mensch-Computer-Interaktion besteht darin, dem Benutzer ein Gefühl der Kontrolle zu vermitteln. Wenn Benutzer die Kontrolle haben, fühlen sie sich wohl. Wenn sie nicht die Kontrolle haben, werden sie frustriert. Aber wenn Sie darüber nachdenken, sind die Menschen es immer in der Kontrolle. Computer tun niemals etwas, ohne dass Sie sie zuerst dazu aufgefordert haben.
Hier kommt die Bedeutung guter Software und des UI-Designs ins Spiel. Ein gutes UI-Design gibt den Benutzern ein verständliches Gefühl der Macht, das ihnen stets hilft, die Kontrolle zu behalten. Sie werden nie fragen "Warten, warum ist das passiert?" oder "warte, wie bin ich hierher gekommen?"
Sie können dem Benutzer ein Gefühl der Kontrolle vermitteln, indem Sie ihm bei jeder Interaktion Einblicke vermitteln. Helfen Sie ihnen, Ursache und Wirkung im System zu verstehen. Wenn Sie ein grundlegendes Beispiel verwenden, wenn Sie etwas speichern, erhalten Sie vom System eine positive Nachricht mit dem Hinweis "Ihre Einstellungen wurden gespeichert". Daher werden Benutzer nie fragen "Ich frage mich, ob das gerettet wurde?"
Die Interaktion, die wir in diesem Lernprogramm erstellen, hilft dem Benutzer, ein Gefühl der Kontrolle zu bekommen. Durch das Ändern des Schaltflächenstatus und die Bestätigung der Kaufentscheidung durch den Benutzer stellen wir sicher, dass der Benutzer niemals unbeabsichtigt etwas unternimmt. Dies ist besonders nützlich, wenn Sie Benutzer bitten, sich von ihrem hart verdienten Geld zu trennen. Das Letzte, was jemand will, ist, versehentlich etwas zu bezahlen!
Das Schöne an dieser Interaktion ist, dass die Benutzer nicht über eine Popup-Eingabeaufforderung mit der Meldung "Sind Sie sicher, dass Sie sie kaufen möchten?" Erhalten, über die Schaltfläche Statusänderung benachrichtigt werden, dass sie etwas Wichtiges tun werden. Wenn sie es nicht wollen, können sie einfach weiter auf der Website surfen. Eine Warnmeldung würde den Benutzer jedoch ausdrücklich dazu zwingen, eine Ja / Nein-Entscheidung zu treffen.
Stellen Sie sicher, dass Sie die Abhängigkeiten der Bilddateien für dieses Lernprogramm verwenden. Legen Sie sie in einen Ordner mit dem Namen "images". Alle anderen Dateien (HTML, CSS, JavaScript) werden im Hauptverzeichnis gespeichert. Am Ende des Tutorials sieht Ihre Dateistruktur folgendermaßen aus:
Beginnen wir mit der Erstellung eines einfachen HTML-Codes, der unsere Seitenstruktur definiert.
Bestätigungsrückmeldungsschaltflächen
Hier haben wir also unsere grundlegende HTML5-Seitenstruktur. Wir haben unseren DOCTYPE, unseren Seitentitel und einen Haupttext eingefügt Element mit einer ID von #Container
Fügen wir nun die Links zu den Abhängigkeiten des Markups hinzu.
Zuerst fügen wir einen Link zu unserem CSS-Stylesheet hinzu (das wir bald erstellen werden). Das geht in die Element.
Als Nächstes fügen wir einen Link zur gehosteten Version von jQuery von Google sowie einen Link zu "script.js" hinzu, der den Javascript-Code enthält, den wir später erstellen. Lassen Sie uns diese kurz vor dem Abschluss setzen Etikett.
Weil wir HTML5-Elemente verwenden werden und Wir müssen das HTML5-Shiv hinzufügen, damit unser Markup in IE8 funktioniert. Fügen Sie dies in Ihre Kopfzeile ein:
Wir werden diese Seite so gestalten, dass sie flexibel und flexibel ist. Um sicherzustellen, dass mobile Browser unsere Seite richtig darstellen, müssen Sie die Meta-Ansichtsfenster-Eigenschaft festlegen. Um mehr darüber zu erfahren, lesen Sie den Artikel von Ian Yates über das Viewport-Meta-Tag. Andernfalls fügen Sie einfach dieses Codefragment in Ihr ein Element.
Beginnen wir damit, unserem Dokument einen Seitenkopf hinzuzufügen.
Der beste Weg, um kreative und technische Fähigkeiten wie Design, Entwicklung und mehr zu erlernen!
Unser Header (in verschiedenen Größen) ist ziemlich einfach und sieht so aus:
Jetzt erstellen wir eine ungeordnete Liste unter unserer Element. Wir verwenden dies, um unsere aufgelisteten Elemente in einzufassen.
Wie Sie sehen, haben wir unserer ungeordneten Liste eine Klasse von "Liste" gegeben, mit der wir ihre Stile mit CSS anvisieren.
Wie Sie sehen können, in jedem Innen Innen Wir geben unseren Knopf (die Lorem ipsum dolor sitzt amet, consectetur adipisicing elit, temporäre Zwischenfälle und Labore et dolore magna aliqua. Lorem ipsum dolor sitzt amet, consectetur adipisicing elit, temporäre Zwischenfälle und Labore et dolore magna aliqua. Folgendes haben wir bisher: Jetzt haben wir die Grundstruktur für jeden Sie können den Listenelementcode für jede Tuts + Site kopieren und einfügen. Das haben wir jetzt: Nachdem wir alle Markierungen abgeschlossen haben, beginnen wir mit dem Gestalten der Seite. Wir beginnen mit einigen grundlegenden Resets: Lassen Sie uns nun die Hauptdarstellung gestalten Hier legen wir die Hintergrundfarbe und einige Standardwerte für unsere Typografie fest, z. B. Schriftgröße, Farbe und Zeilenhöhe. Wir möchten, dass unsere Seite bis hin zu mobilen Geräten flexibel ist. Die zwei Schlüsselkomponenten, die wir verwenden, um dies zu erreichen, sind die Prozentsätze und die Wenn Sie sich unser HTML ansehen, werden Sie sehen Hier legen wir die Breite unseres Containers auf 100% des Darstellungsbereichs des Browsers fest. Unsere Ränder zentrieren den Inhalt der Seite. Wir haben auch hinzugefügt Wie Sie sehen können, bietet unser Container bei größeren Größen an den Seiten etwas mehr Platz und einen hellen Hintergrund. Bei kleineren Größen verschwindet dieser zusätzliche Platz und wir haben nur einen weißen Hintergrund für unseren Inhalt. Vergessen wir nicht, unsere Bilder ansprechbar zu machen: Lassen Sie uns nun unser Hauptbild gestalten Unser Header-Element und sein Inhalt sind jetzt schön zentriert und dimensioniert. Jetzt werden wir unsere Listenelemente und ihre Geschwister gestalten. Lassen Sie uns zunächst einige grundlegende Strukturstile erstellen: Wenn Sie sich richtig erinnern, haben wir in jedem Listenelement zwei Hauptelemente: 'Symbol' und 'Info'. Die Symbolfigur wird nach links verschoben und erhält eine kleine Breite. Das Info-Div wird nach rechts verschoben und erhält die Mehrheit der übergeordneten Breite. Wie Sie sehen, haben wir das verwendet Nach unseren strukturellen CSS-Ergänzungen haben wir jetzt etwas, das folgendermaßen aussieht: Wie Sie sehen können, muss dies etwas aufgeräumt werden. Da wir unsere Elemente 'info' und 'icon' schweben lassen, müssen wir jedem Listenelement ein klares Zeichen hinzufügen. Jedem Listeneintrag werden wir ein wenig Styling hinzufügen. Als letztes werden wir die Informationen in jedem Listenelement formatieren: Jetzt haben wir etwas, das ziemlich solide aussieht. Lassen Sie uns nun ein wenig Styling auf unsere Knöpfe anwenden. Wir machen sie visuell prominent: Was haben wir hier gemacht?? Alles sieht gut aus. Was wir jetzt tun möchten, ist das Hinzufügen von Stilen für eine Klasse, die beim Klicken auf die Schaltfläche (n) angewendet werden. In diesem Tutorial fügen wir den Text "Jetzt verbinden" zum vorhandenen Schaltflächentext hinzu, wenn auf die Schaltfläche geklickt wird. Im Wesentlichen muss der Benutzer die Entscheidung treffen, zweimal "beizutreten". Um dies zu erreichen, verwenden wir ein paar CSS-Stile, einschließlich der CSS3-Pseudo-Klasse Lassen Sie uns eine Klasse mit dem Namen "clicked" erstellen, zu der wir die Stile für "angeklickte" Schaltflächen hinzufügen können. Zu Entwicklungszwecken können Sie manuell eine Klasse von "clicked" hinzufügen Wie Sie sehen, haben wir die Klasse "click" der Klasse "button" hinzugefügt. Auf diese Weise werden die Stile, die wir für "angeklickt" deklarieren, nur auf Elementen angezeigt, die auch eine Klasse von Schaltflächen haben. Was das Styling angeht, haben wir einfach die Farbe und die Ränder geändert. Möglicherweise haben Sie auch bemerkt, dass wir der Schaltfläche einen Box-Schatten hinzugefügt haben, wenn darauf geklickt wird. Dadurch wird ein eingerückter Schaltflächenstil hinzugefügt, der dem Benutzer den Eindruck vermitteln kann, dass auf die Schaltfläche geklickt wurde. Wenn der Benutzer auf die Preisschaltfläche klickt, möchten wir, dass die Schaltfläche erweitert und der Text "Jetzt beitreten" vorangestellt wird. Dazu verwenden wir die Pseudo-Klasse CSS3 Jetzt haben wir so etwas: Wie Sie sehen können, beginnt der "Jetzt teilnehmen" -Button bei der mobilen Größe ein wenig eng. Wenn der Kopfzeilentext sehr lang ist, wird unser Button in unsere Kopfzeile eingefügt. Wir nutzen also die Möglichkeiten von Medienabfragen, um unsere Aktionstaste auf die nächste Stufe zu bringen, wenn wir kleinere Bildschirmgrößen verwenden. Erstellen Sie eine Medienabfrage zum Verschieben unserer Schaltfläche: Jetzt wird unsere Schaltfläche bei kleineren Bildschirmgrößen unterhalb der Kopfzeile angezeigt! Gehen wir nun in unsere "script.js" -Datei und schreiben ein Javascript, das die Schaltflächenstile ändert, wenn sie angeklickt werden. Lassen Sie uns zunächst unser Skript für jQuery einrichten Unser Skript ist eigentlich ziemlich einfach. Alles, was wir tun müssen, ist das Umschalten der Klasse von "Klick", wenn eine Schaltfläche angeklickt wird. Lass uns also eine Funktion einrichten: Nun wollen wir prüfen, ob die Schaltfläche, auf die bereits geklickt wurde, eine Klasse von "angeklickt" hat (möglicherweise wurde sie zuvor angeklickt). Wenn die Klasse nicht angeklickt wurde, fügen wir sie hinzu und verhindern die Wenn auf die Schaltfläche, auf die bereits geklickt wurde, eine Klasse von "angeklickt" wurde Wenn ein Benutzer auf die Preisschaltfläche klickt, wird der Status der Schaltfläche geändert. Was ist, wenn sie die Schaltfläche schließen möchten und sie außerhalb der Schaltfläche klicken? Wir werden diesen Klick registrieren und die Klasse "angeklickt" entfernen. Dies ist eine einfache Zeile von jQuery: Wir möchten ein wenig mehr Interaktivität hinzufügen, indem der Übergang zwischen den "geklickten" und den normalen Tastenzuständen sanfter gestaltet wird. Wir verwenden nur einen CSS3-Übergang und wenden ihn auf die Button-Klasse "join" an: Sie haben jetzt eine schöne Bestätigungstaste. Es hilft Benutzern, ihre Entscheidung zu bestätigen, eine wichtige Entscheidung mit Ihrer Webseite / Anwendung zu treffen. Fühlen Sie sich frei, mit diesem Konzept herumzuspielen, es besser zu machen und mehr zu lernen!, Wir haben zwei Hauptelemente; ein Element. Das Symbol
Die info
Element) Element) Element) Element) eine Klasse von "join" für späteres CSS-Styling.
Aktivierungen+
15,99 $ Endgültiger Code für jeden
Element
Aktivierungen+
15,99 $ 
Schritt 6: Duplizieren und Ändern
Element Element, alles, was wir tun müssen, ist es für jeden Tuts + -Eintrag zu duplizieren. Wir müssen für jeden Listenpunkt Folgendes ändern:
Text Verknüpfung
Schritt 7: Basic CSS
/ * quick reset * / body, h1, h2, p, ul, li Marge: 0; Polsterung: 0; ul list-style-type: none;
Karosserie Element. Körper Hintergrund: #eee; Schrift: 16px / 1.4em Helvetica, Arial, serifenlos; Farbe: # 333;
Schritt 7: Reaktionsschnell (flüssig)
maximale Breite Regel. ist der Hauptcontainer für den Inhalt unserer Seite. Wir verwenden Prozentwerte für die Breite und fügen ein paar grundlegende Formatierungen hinzu, um sie visuell vom Seitenhintergrund zu trennen. #container width: 100%; Marge: 0 Auto 40px; Max-Breite: 600px; Hintergrund: #fff; Grenzradius: 0 0 3px 3px; Rand: 1px fest # d0d0d0; Border-Top: 0; Box-Schatten: 0 1px 0px #fff;
Max-Breite: 600px weil wir nicht wollen, dass unsere Listenelemente größer werden.
img max-Breite: 100%;
Schritt 8: Header-Styles
Element und den Inhalt darin. header text-align: center; Polsterung: 30px 20px; header h1 margin-bottom: 20px; header p color: # 413c38; Schriftgröße: 1.2em; Zeilenhöhe: 1.4em;
Schritt 9: Strukturelle Listenelementstile
.icon, .info Größenanpassung: Rahmen; .icon float: left; Breite: 15%; Textausrichtung: rechts; Polsterung links: 3%; .info Breite: 85%; Schwimmer: links; Polsterung: 0 5%;
Box-Dimensionierung: Border-Box; Regel auf diesen beiden Divs. Auf diese Weise können wir unsere Gesamtbreite auf 100% aufaddieren und trotzdem die Auffüllung hinzufügen, ohne die Gesamtbreite von 100% zu überschreiten. (Weitere Informationen zu dieser Eigenschaft finden Sie unter Responsive Form-Elemente zum Spielen von Nizza.).
Schritt 10: Artikelstile auflisten
.list li padding: 20px 0; Border-Top: 1px fest #eee; Überlauf: Auto; Lösche beide; .list li: hover background: # f7f7f7;
.info h2 Rand unten: 10px; Schriftgröße: 1.75em; Zeilenhöhe: 1em; Anzeige: Inline-Block; .info p font-size: 14px; Farbe: # 777;
Schritt 11: Schaltflächenstile
eine Textdekoration: keine; Farbe: #fff; .join Hintergrund: # 57a9eb; / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / Hintergrund: -webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, rgba (87,169,235,1)), Farbstopp (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / Hintergrund: -ms-linearer Gradient (oben, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / Hintergrund: linearer Gradient (oben, 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 fest # 326fa9; Rahmenfarbe: # 3e80b1; Rahmenfarbe unten: # 1e549d; Farbe: #fff; Schriftdicke: fett; Text-Transformation: Großbuchstaben; Text-Schatten: 0 -1px 0 # 1e3c5e; Schriftgröße: 11px; Grenzradius: 5px; Box-Schatten: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 Einschub; Leerraum: Nowrap; -webkit-Übergang: alle 0,25er-Leichtigkeit; -Moz-Übergang: alle 0,25s Leichtigkeit; Übergang: alle .25s Leichtigkeit; schweben rechts; Anzeige: Inline-Block; Polsterung: 1px 1em 0; / * lassen Sie den Mittelpunkt von 1px hervorheben * / Zeilenhöhe: 2.25em;
Schritt 11: Alternative Button Styles
::nach demGeklickte Klassenstile
15,99 $). .join.clicked Hintergrund: # 24a501; / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / Hintergrund: -webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, rgba (30.183,0,1)), Farbstopp (100%, rgba (36,165) 1,1))); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / Hintergrund: -ms-linearer Gradient (oben, rgba (30.183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / Hintergrund: linearer Gradient (oben, 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 fest # 1e8701; Rahmenfarbe unten: # 176701; Rahmenfarbe: # 24a501; Box-Schatten: 0 1px 0 #bbb, 0 1px 0 # acc63d Einschub; Polsterung: 1px 2em 0; Cursor: Zeiger; .join.clicked: aktiv Box-Schatten: 0 0 8px # 777 Einfügung;
::nach dem Klassenstile::nach dem um den gewünschten Text einzufügen. .join.clicked :: before content: 'Jetzt Mitglied werden';
Schritt 12: Medienabfragen
@media screen und (max-width: 450px) .info h2 display: block; .join float: none; Rand unten: 20px;
Schritt 13: Schaltflächeninteraktion mit jQuery
$ (document) .ready (function () // code here);
Schritt 14: Klassen wechseln
$ ('. join'). on ('click', function () // Code hier); href Attribut des Links ab gefolgt werden. // Wenn keine Klasse angeklickt wurde, // füge eine hinzu und verhindere, dass dem Link gefolgt wird if (! ($ (this) .hasClass ('clicked'))) // Entferne alle 'angeklickten' Klassen wenn es irgendwelche $ ('. clicked') gibt. removeClass ('clicked'); // Füge die angeklickte Klasse der Schaltfläche hinzu, auf die geklickt wurde $ (this) .addClass ('clicked'); // verhindern, dass der Link verfolgt wird return false; href Wert wird vom Browser gefolgt. Dies funktioniert gut, denn wenn ein Benutzer auf diese Seite stößt und Javascript deaktiviert hat, kann er einfach nicht bestätigen, dass er sich "jetzt anmelden" entschieden hat. Stattdessen wird der Link einfach ohne Bestätigungsmeldung verfolgt.
Schritt 15: Entfernen der angeklickten Klasse
// Wenn der Klick außerhalb der .buy-Schaltfläche erfolgt, entfernen Sie die Klasse $ ('body'). on ('click', function () $ ('. clicked'). removeClass ('clicked'););
Schritt 16: Übergang hinzufügen
-Webkit-Übergang: alle .25s Leichtigkeit; -Moz-Übergang: alle 0,25s Leichtigkeit; -ms-Übergang: alle .25s Leichtigkeit; -o-Übergang: alle .25s Leichtigkeit; Übergang: alle .25s Leichtigkeit;
Das ist es!
Accentsconagua
