8 fantastische jQuery Tutorials für Designer
29. März 2008 von chriscoyier · 7 Kommentare
Ziehen Sie und Schubladen-Effekt
Der Effekt wird allgemein als ein "Akkordeon" bekannt und es ist in der Regel verwendet, um slide oben oder unten Blöcke von Inhalten auf neuen Blöcke setzen. Die Apple-Website ist eine große Demonstration dieses Effekts in Aktion, wo die Maus legt sich auf den Titel der "Sektion" und die damit verbundenen Links ausgesetzt sind. Was macht dieser Effekt besonders cool, ist, dass die Schubladen einer festen Höhe und schieben zwischen Sperrgebiet zu halten.
Chain-Lage Übergangseffekten
Nun werden wir sehen die Macht der jQuery-Verkettbarkeit. Mit nur einigen Zeilen Code, kann ich die Box um zu fliegen mit Skalierung und Fading Übergang.
VISIT TUTORIAL (# 6)
VIEW DEMO
jQuery Tabs
Tabbing hat gemeinsame Stelle im Internet seit geraumer Zeit. Heute Websites werden nutzen Tab ohne die Seite zu müssen mit dem Zusatz von JavaScript zu laden. Für dieses Tutorial habe ich zwei Screencasts demonstrieren, wie schnell eine Prise jQuery verschiedene Layouts von Markup, die, wenn das Markup gut gestaltet ist, wird es automatisch abgebaut schön ohne JavaScript aktivieren, wird erstellt.
Erstellen eines bearbeitbaren Diagramm
Visualisierung der Daten in HTML ist seit langem schwierig zu erreichen. Bisherige Lösungen haben Nicht-Standard-Plugins, proprietäre Verhalten und statischen Bildern beteiligt. Aber das hat mit dem jüngsten Wachstum in Unterstützung für die neue HTML-Canvas-Element, das eine native Zeichnungs-API, die mit einfachen Javascript angesprochen werden können bietet sich geändert.
Einfach Multi Select Transfer mit jQuery
Ich bin mir sicher, dass an einem gewissen Punkt oder ein anderes hast du ein Formular Widget, wie die unten gestoßen, so dass Optionen, um von einem multi wählen einen anderen gehandelt werden.
VISIT TUTORIAL
Live-Demo im Tutorial
jQuery Hover Sub Tag Cloud
Tag Clouds Wenn richtig eingesetzt, können sie den Besuchern einen sofortigen Darstellung der Hauptthemen der Website-Content bieten. Und obwohl wir nicht so viel Auswahl bei der Gestaltung sie, können wir immer noch unseren Weg zu finden, um mit neuen Design-Ansätze und Lösungen. Hier ist ein neuer Ansatz: Mit jQuery, um die Größe der Tag-Wolke, die Sie auf Ihren Seiten haben zu verringern.
Slider Gallery
Das "Produkt Slider" ist vergleichbar mit einem geradlinig Galerie, außer dass es einen Schieberegler, um die Elemente zu navigieren, also das Bit der Benutzer die Elemente anzuzeigen steuert. Einfache Sachen. jQuery hat bereits die Plugins, um diese Effekte zu schaffen, damit wir nicht haben, um über das Erstellen von ihnen selbst von Grund auf zu gehen.
News Ticker
LiScroll ist ein jQuery-Plugin, das eine bestimmte ungeordnete Liste in einem scrollenden News Ticker verwandelt.
VISIT TUTORIAL
Live-Demo im Tutorial
Oh, wie perfekt!
Ich habe gerade angefangen zu lernen jQuery und haben nun etwas mit der Praxis.
Vielen Dank!
Das ist just awesome Komplikation für jQuery. Vielen Dank für dieses. Es könnte nicht besser geworden sind. Cheers.
Great Job! Sehr schöne Tutorials .... Ich liebe sie alle!
Have a nice day
sowohl sub tag cloud demo und Akkordeon-Demo abgebrochen, wenn Sie Ihre Schriftgröße erhöhen in den Browser zu bekommen. Sign of bad html / css-Code.
Vielleicht sollten Sie über HTML und CSS, bevor sich Gedanken über fancy javascript machen.
Die Registerkarte Effekt kann sehr einfach mit ein paar Zeilen js durchgeführt werden, ohne jQuery.
Nizza nach ... weiter so gute Arbeit
Oh, wie perfekt!
Ich habe gerade angefangen zu lernen jQuery und haben nun etwas mit der Praxis.
Vielen Dank!
Editierbare Tabelle groß ist, aber ich kann nicht mit JQuery 1.2.2 oder 1.2.3 verwenden, es funktioniert nur mit der Version 1.2.1.
Daniel