Responsive Flexbox-Layouts für Fortgeschrittene

Sidebar tauschen: Buttons aktivieren mit jQuery

29,95
Die ersten beiden Buttons werden mit ein paar Zeilen jQuery in der Datei sidebar-switcher.js aktiviert, sodass die Sidebar von rechts nach links und wieder zurück springen kann.

Die drei Buttons sind eingebaut und gestaltet und es wird Zeit, dass ein bisschen "Action" in die Sache kommt, sodass auch tatsächlich etwas passiert, wenn man dadrauf klickt. Kurz zur Erinnerung, hier in "holy-grail.html" sind die Buttons eingebaut, hier oben wird "font-awesome" direkt aus dem Netz geholt, denn in den Buttons gibt es auch noch ein paar Icons, "<div class="sidebar-switcher"'', da sitzt alles drin, dann gibt es drei Buttons mit den Klassen "sidebar-left-toggle" und "sidebar-right-toggle", der dritte kommt erst später, "sidebar-hide-toggle". In den Buttons sitzen die Symbole und ein bisschen Screenreader-Text, das ist alles so weit. Ganz unten kommt jQuery direkt aus dem Netz hier in den Browser und eine neue, fast leere Datei "sidebar-switcher.js" im Unterordner "js". Diese Buttons werden gestaltet hier und es gibt eine Klasse, die noch nicht benutzt wird, die heißt ".sidebar-left", da gibt es nur eine Anweisung: "order: -1;". Wenn die Sidebar diese Klasse bekommt, wird sie auf der linken Seite stehen. Dass sie diese Klasse bekommt, wird die Aufgabe von ein bisschen JavaScript sein und das steht hier in "sidebar-switcher.js". Dort ist die Setup-Funktion von jQuery bereits vorhanden und jetzt geht es los, in normalem Deutsch kann man das, was wir hier jetzt reinschreiben wollen, ungefähr so ausdrücken: Lieber Browser, achte mal darauf, ob jemand oben auf den Button klickt mit der Klasse "sidebar-left-toggle". Wenn da jemand draufklickt, dann schaue, ob die Sidebar die Klasse "sidebar-left" hat. Wenn sie die Klasse nicht hat, dann füge diese Klasse bitte hinzu. Das müssen wir jetzt nur noch in JavaScript ausdrücken und dazu geht es hier los, wie in jQuery so oft, mit einem "$": "$( 'button.sidebar-left-toggle' )", das ist der Button, wenn der geklickt wird, dann wollen wir hier etwas erreichen und zwar Folgendes: -- Diese Klammer muss ein bisschen weiter, die kommt nämlich hier hin. -- Wenn dieser Button angeklickt wird, dann soll überprüft werden: "if(!$('.sidebar')" Wenn die Sidebar nicht, das "!" ist eine Umkehrung, dann kommt jetzt: "hasClass('sidebar-left')" und die Bedingung wird geöffnet und wieder geschlossen. Bis jetzt lautet das also: Wenn jemand auf den Button klickt mit der Klasse "sidebar-left-toggle", "If 'sidebar' has not class 'sidebar-left'", wenn das Element mit der Klasse "sidebar" die Klasse "sidebar-left" nicht hat, dann soll diese jetzt hinzugefügt werden. Dazu gehe ich hier auch mal wieder unter das "$": "$('.sidebar').addClass('sidebar-left');", so steht das schön untereinander und man findet den Tippfehler schneller. Wenn der Button angeklickt wird und die Sidebar hat die Klasse "sidebar-left" nicht, dann füge der Sidebar die Klasse "sidebar-left" hinzu und wenn die Klasse "sidebar-left" dadrin steht, dann gilt hier "order: -1;" und die Sidebar steht auf der linken Seite. Neu laden und Sie sehen, die Sidebar steht noch wie gehabt auf der rechten Seite und links rüber, rechts rüber klappt noch nicht, das kommt gleich, aber links rüber klappt ja schonmal gut. Zurück in "sidebar-switcher.js" müssen wir jetzt nur noch den rechten Button belegen, dass der etwas Ähnliches macht, nämlich die Klasse wieder entfernt. Dazu kopiere ich diesen ganzen Kram -- bis hier hin -- und füge das dadrunter wieder ein; und dann wird jetzt hier das etwas geändert: "right-toggle", "click(function(){ })", also wenn der Button rechts angeklickt wird. "If 'sidebar' has class 'sidebar-left'", das ist in Ordnung, aber das muss weg, die Umkehrung, wenn die Sidebar nämlich die Klasse hat, dann soll die Sidebar nicht "addClass", sondern dann soll sie entfernt werden: "removeClass". Der linke Button fügt die Klasse hinzu, falls sie nicht sowieso schon vorhanden ist, aber dann steht sie auch schon links und der rechte Button entfernt die Klasse, falls sie nicht sowieso schon entfernt ist, dann macht er einfach nichts. Neu laden und die Sidebar steht rechts, jetzt springt sie nach links und jetzt springt sie wieder nach rechts -- da ist er. Das heißt, die ersten beiden Buttons funktionieren und der dritte folgt sogleich.

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Einzeltraining: 29,95
: ab € 19,95
Erscheinungsdatum:18.10.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!