Tag: jquery

JavaScript: Ajax-Inhalt durch Deep-Links darstellen

Der Artikel bei Impressive Webs ist zwar schon etwas älter, aber vielleicht kann er bei dem einen oder anderen Web-Projekt behilflich sein. In dem Beitrag geht es um die Umsetzung von Deep-Links in JavaScript- und Ajax-Anwendungen. Das bedeutet, dass bestimmte Inhaltsbereiche über einen Hash-Link (#-Zeichen) abgerufen und dargestellt werden können. In dem Artikel wird die Programmierung einer solchen Funktionalität in JavaScript beschrieben.

Neben dem eigentlichen JavaScript-Teil ist auch die Umsetzung der eigentlichen Seite interessant: Hier wurde eine PHP-Datei geschrieben, die verschiedene Inhalte per GET-Parameter im Stil von "?view=employee1" darstellt. Durch JavaScript wird anschließend der Teil "?view=" durch das Hash-Zeichen "#" ersetzt, so dass entsprechende Deep-Links entstehen, die bei einem direkten Aufruf den referenzierten Inhalt darstellen. Auf der Demo-Seite kann die Funktionalität angesehen werden.
Das Ganze lässt sich auch sehr einfach mit jQuery umsetzen, falls mit der Bibliothek gearbeitet wird. Hier wird der Ajax-Inhalt in den Container mit der ID "ajaxcontent" geladen:

• $(document).ready(function(){
• function ajaxHashContent(ajaxFile) {
• $("#ajaxcontent").load(ajaxFile);
• }
•  
• ajaxHashContent(location.hash.substr(1) + ".html");
• });

Voraussetzung ist natürlich, dass die Ajax-Dateien die Endung ".html" besitzen und sich im gleichen Verzeichnis befinden.

jQuery Image Scroller: Mini-Vorschau zur Navigation

Kürzlich berichtete ich über das jQuery-Plugin miniZoomPan, mit dem sich Bildausschnitte eines größeren Bildes in einem Ausschnitt bewegen lassen. Ein ähnliches Skript gibt es nun von Trevor Davis: Mit dem jQuery Image Scroller wird eine kleine Vorschau eines Bildes eingeblendet, über die das Ursprungsbild angesehen und verschoben werden kann.

In dem Blog-Eintrag werden die verschiedenen Teiles des Plugins beschrieben. Zudem gibt es eine Demo-Seite, auf der das Skript getestet werden kann. Die Implementierung erfolgt wie gehabt:

• $(document).ready(function() {
• $("element").imageScroller();
• });

Auf der Miniatur-Vorschau wird also eine graue Fläche angezeigt, die den sichtbaren Bereich repräsentiert. Wird sie mit der Maus bewegt, verschiebt sich dementsprechend das Original-Bild im Sichtbereich. Dadurch können alle Bereiche von größere Grafiken (wie etwa von Produktbildern) im Detail angesehen werden. Das Skript ist momentan auf ein vertikales Verschieben ausgelegt, so dass die Breite des Original-Bildes festgelegt werden muss. Eventuell folgt bald eine Möglichkeit für eine horizontale Verschiebung.

jQuery miniZoomPan: Plugin zur Bildvergrößerung

Mit JavaScript-Bibliotheken lassen sich die ausgefallensten Bedienelemente und Effekte umsetzen. Es gibt mittlerweile unzählige jQuery-Plugins, die zur Verbesserung von Benutzeroberflächen im Web beitragen. Auch für Bildergalerien oder Slideshows stehen etliche Plugins zur Verfügung. Ein schöner Effekt für diesen Bereich stellt auch das Plugin "jQuery miniZoomPan" dar. Diese Funktionalität dürfte sich auf vielen Online-Shops wiederfinden: Fährt man mit der Maus über ein Vorschaubild, wird in dem Ausschnitt die Originalgröße des Bildes angezeigt. Anschließend lässt sich der Bildausschnitt durch Mausbewegungen verschieben.

Mit dem kleinen Plugin können also Details eines Bildes dargestellt werden, ohne dass ein separater Bereich (wie etwa eine Lightbox) geöffnet werden muss. Diese Funktionalität eignet sich vorzugsweise für Produktbilder oder auch Portfolio-Inhalte.
Das jQuery-Skript von Gian Carlo Mingati besteht aus einer JS- und einer CSS-Datei. Leider gibt es keine echte Dokumentation, weshalb die Implementierung im Quellcode des Beispiels angesehen werden muss:

• HTML-Code:
• <div id="zoom01">
• <img src="leaf_s.jpg" />
• </div>
•  
• jQuery-Code:
• $("#zoom01").miniZoomPan({
• sW: 200,
• sH: 250,
• lW: 370,
• lH: 462
• });

Definiert werden also die Dimensionen des Vorschaubildes sowie die der Originalversion. Im Quellcode des Plugins sind die beiden Varianten eines Bildes durch die Nachsilben "_s" (small) und "_l" (large) verankert. Dementsprechend müssen die Bider benannt werden. Optional können beim Plugin-Aufruf noch ein Rahmen sowie ein "Loading"-Bild definiert werden.

Brosho: Mit jQuery CSS-Code im Browser erstellen

Bei der Entwicklung einer Website ist Firebug zu einem unverzichtbaren Werkzeug geworden. Dadurch können schneller CSS-Stile angepasst und Korrekturen vorgenommen werden. Das spart Zeit und kann zudem komfortabel im Browser erledigt werden. Dieser Ansatz lässt sich auch mit jQuery umsetzen — dabei wird ein Skript auf der entsprechenden Website eingebunden und per Befehlszeile können Selektoren und CSS-Eigenschaften definiert werden. Ein jQuery-Plugin dieser Art stellt Brosho dar. Wurde das Skript auf einer Seite eingebunden, können alle DOM-Elemente per Klick ausgewählt und anschließend mit CSS-Stilen versehen werden.

Auf der Demo-Seite des Plugins kann man sich von der Funktionalität überzeugen. Neben der Auswahl per Mausklick können Elemente auch über das "Selector"-Eingabefeld ausgewählt werden. Im Bereich "CSS Styles" werden eingegebene CSS-Deklarationen direkt auf das selektierte Element übertragen, so dass die Vorschau in Echtzeit erfolgt. Ist man mit dem Resultat zufrieden, können die Änderungen mit der "Generate"-Schaltfläche als CSS-Code ausgegeben und in das finale Stylesheet eingefügt werden.
Ähnliche Ansätze verfolgt man übrigens mit Projekten wie StyleKit oder CSSDesk.

jQuery Deconstructed: Blick hinter die Kulissen

Wer sich in die verborgenen Tiefen des jQuery-Frameworks vorarbeiten will, um den Kern der JavaScript-Bibliothek zu verstehen oder bestimmte Funktionen nachzuschlagen, kann sich den Quellcode ansehen. Die aktuelle Version von jQuery kann wie gehabt als Development-Release heruntergeladen werden — der Quelltext ist 6240 Zeilen lang und enthält Kommentare zu den verschiedenen Funktionen.
Eine schöne Möglichkeit, um die Wurzeln des Frameworks etwas anschaulicher darzustellen, steht mit jQuery Deconstructed zur Verfügung. Bei diesem Projekt wurde der Quelltext von jQuery in visuelle Blöcke unterteilt, die per Klick aufgeklappt werden können.

Durch verschiedene Farben für Sektionen, Funktionen, Objekte und Eigenschaften ist es sehr einfach, die unterschiedlichen Funktionsweisen von jQuery zu verstehen. Zudem werden wieder vorkommende Funktionen durch gepunktete Linien gekennzeichnet und erlauben es, direkt zu der entsprechenden Stelle im Quelltext zu springen.
Die jQuery-Bibliothek ist sehr komplex und mithilfe von jQuery Deconstructed kann der Aufbau sicherlich besser verstanden und erkundet werden.

JavaScript: Mac OS X-Dock mit jQuery und CSS

Mit JavaScript und jQuery lassen sich anschauliche visuelle Effekte umsetzen und auf Websites einsetzen. Wer hinter die Kulissen eines Mac OS X-Docks blicken möchte, das mit jQuery umgesetzt wurde, kann sich hierzu einen Artikel von APL Web Development ansehen — darin werden die benötigten JavaScript-, HTML- und CSS-Snippets veröffentlicht, die für eine gelungene Version des Apple-Docks verwendet wurden. Es gibt mittlerweile etliche JavaScript-Varianten des bekannten Mac OS X-Docks, allerdings zeichnet sich die Version von APL durch saubere Übergänge und ein CSS-Fallback aus.

Das Dock-Beispiel ist nicht der einzige nützliche Artikel, der sich auf der Seite von APL Web Development findet. Die Website bietet interessierten Webentwicklern viele Projekte und Erklärungen aus den Bereichen JavaScript, Java, OpenGL und 3D-Computergrafik. Ein weiteres Beispiel stellt so etwa auch der Glass-Container dar, bei dem die Entwickler durch Windows Vista inspiriert wurden.

Webentwicklung: jQuery-Plugin für interaktive Karten

Auf vielen Websites ist die Einbindung eines Google Maps-Bereichs mittlerweile selbstverständlich. Für individuellere Karten, die interaktive Bereiche oder Punkte enthalten, bietet sich Flash sehr gut an. Wer eine solche Karte mit jQuery realisieren möchte, sollte sich das Plugin ZoomMap ansehen. Dabei handelt es sich um eine spezielles Skript, das für den Zweck ausgelegt wurde, interaktive und vergrößerbare Karten zu erstellen. Dabei können zudem Punkte definiert werden, die etwa per Klick Zusatzinformationen einblenden. Ein sehr schönes Beispiel, das mit dem jQuery-Plugin realisiert wurde, findet sich auf dieser Seite.

Das Skript nutzt ein Hintergrundbild für die Darstellung der Karte — klickbare Elemente werden mit Platzhalter-Bereichen versehen und können in den Optionen des Plugins definiert werden. Ein einfacher Aufruf des Plugins sieht etwa so aus:

• $("#karte").zoommap({
• width: "500px",
• height: "580px",
• blankImage: "images/blank.gif",
• map: {
• // Struktur der Karte
• }
• });

Da es sich um ein komplexes Plugin handelt, werden auch bei der Implementierung einige Einstellungen benötigt. Eine detaillierte Anleitung findet sich aber auf der Website des Entwicklers. Dort gibt es zudem ein einfaches Beispiel, welches durch den Quelltext Aufschluss über die Einrichtung des jQuery-Plugins gibt.

Tiny Carousel: Kompakte Slideshow als jQuery-Plugin

Wenn Bilder auf einer Website ansprechend präsentiert werden sollen, bieten sich verschiedene Lösungen an. Mit dem dualSlider oder dem Galleria-Plugin lassen sich erweiterte Slideshows mit jQuery realisieren. Möchte man Bilder in einer räumlichen Darstellung anordnen, bietet sich beispielsweise das Cloud Carousel an.
In manchen Fällen kann es jedoch auch gewünscht sein, ein möglichst einfaches Carousel oder eine Slideshow aufzubauen. Hierfür eignet sich etwa das Tiny Carousel von Maarten Baijs: Das 2,3 KB große jQuery-Plugin erfüllt seinen Zweck und bietet dabei noch verschiedene Anpassungsmöglichkeiten.

So können Bilderreihen auch automatisch abgespielt werden und zudem kann ein Pager (Paginierung) eingeblendet werden, über den Bildelemente direkt ausgewählt werden können. Das Carousel-Skript ist einfach zu integrieren:

• $("#element").tinycarousel();

Weitere Instruktionen finden sich wie gehabt auf der Website des jQuery-Plugins. Mit dem Skript lassen sich Bilder auch vertikal scrollen und eine Callback-Funktionalität ist ebenfalls vorhanden. Somit stellt Tiny Carousel eine kompakte Möglichkeit dar, Bilder auf einer Website zu integrieren.