jQuery.twinkle in Aktion

Es gibt Themen zu denen fällt mir einfach keine sinnvolle, kurze Überschrift ein jQuery.twinkle ist so ein Thema…

Im Grunde ist das, was das PlugIn tut sehr simpel: es lenkt die Aufmerksamkeit eines Benutzers auf ein bestimmtes Element einer Website. Wenn man z.B. einen Benutzer einer Applikation auf einen bestimmten Button hinweisen möchte oder ihm zeigen möchte wo bestimmte Informationen angezeigt werden, dann ist das mit jQuery.twinkle sehr einfach möglich – sobald man es aufruft wird an der Position auf die man den Benutzer aufmerksam machen möchte ein grafischer Effekt eingeblendet. Zum Beispiel ein sich vergrössernder roter Kreis, ein pulsierender Kreis, oder kleine Kreise die das jeweilige Element umkreisen (ja, ich weiss – da sind eine Menge Kreise in diesem Satz ).

Perfekt ist sowas zum Beispiel wenn ein Benutzer eine Aktion zum ersten Mal durchführt. Man könnte dann einmal so etwas anzeigen wie "Wenn Sie die Daten eingegeben haben, klicken Sie bitte auf speichern." und dann z.B. sofort oder wenn er mit der Maus über das "speichern" fährt den entsprechenden Button markieren.

Chosen

Chosen ist ein PlugIn für jQuery und Prototype mit dem man Select-Boxen "aufpeppen" kann

Z.B. kann ein Suchfeld eingeblendet werden (was man auf dem Screenshot sieht) über das man die Einträge die man sieht filtern kann um schnell zu einem bestimmten Eintrag zu kommen. Ausserdem unterstützt Chosen auch Multi-Select (man wählt dann die einzelnen Einträge nacheinander aus und sie werden ähnlich einer Tagliste angezeigt – schaut Euch einfach mal die Demo an), <optgroup> wird ebenfalls unterstützt, genauso wie vorselektierte und deaktivierte Einträge.

Ein Fork von Chosen für MooTools gibt es ebenfalls (ist auf der Seite verlinkt).

Das PlugIn bietet sehr komfortable Möglichkeiten Flash-Filme/Widgets in eine Website einzubinden und mit ihnen zu kommunizieren. So kann man dann z.B. dynamisch Flash-Objekte zu Seiten hinzufügen, Variablen verändern, usw.

Um z.B. Variablen zu übergeben würde man so vorgehen:

function () {
	// #myFlashVars is the selector
	$('#myFlashVars').flash(
		{
			// test_flashvars.swf is the flash document
			swf: 'test_flashvars.swf',
			// these arguments will be passed into the flash document
			flashvars: {
				name1: 'jQuery',
				name2: 'SWFObject',
				name3: 'Plugin'
			}
		}
	);
}

Wer auf seinen Seiten viel mit Flash arbeitet sollte sich das PlugIn mal anschauen. Es kann die Arbeit doch sehr vereinfachen.

miniTip in Aktion

miniTip ist ein kleines (~4 KB) jQuery-PlugIn mit dem man sehr einfach Tooltips erzeugen kann.

Die Tooltips können dabei entweder über das title-Attribut gefüllt werden oder auch sehr einfach über JavaScript. Das PlugIn erlaubt es dabei auch sehr einfach Funktionen beim Anzeigen oder Ausblenden der Tooltips aufzurufen in denen man z.B. Inhalte per AJAX laden könnte oder Ähnliches.

Das PlugIn kommt dabei komplett ohne zusätzliche Grafiken aus und benötigt nur ein paar CSS-Anweisungen für das Design.

jbar

Bevor jemand fragt: Nein, dieses PlugIn hat nichts mit dem jBar-PlugIn zu tun welches ich hier vor einiger Zeit vorgestellt habe

jbar ist ein jQuery-PlugIn mit dem man auf sehr einfache Art und Weise einen Toolbar aus einer Liste erzeugen kann.

Dazu muss man lediglich die einzelnen Links in die <li> Elemente packen (ggf. mit Verschachtelung für Untermenüs) und jbar aufrufen. Das Ergebnis seht ihr im Screenshot.