jQuery Präsentationen für ein besseres Verständnis

Immer wieder stolper ich über interessante Präsentationen zum Thema jQuery im Netz.
Heute möchte ich euch ein paar meiner Favoriten vorstellen.

ganzen Artikel lesen

jQuery Tutorial – Closing an Accordion automatically

Entscheidender Punkt für die Umsetzung dabei sind Events. Die jQuery API bietet eine Menge verschiedener Events für die Registierung von Mousebewegungen.
In unserem Beispiel sorgen wir nun dafür, dass sich nach dem Verlassen des Accordions mit dem Cursor das letzte geöffnete Accordion Div wieder schließt.

Also, erstmal zum HTML-Aufbau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<div>
	<h3><a href="#">First</a></h3>
		<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	           </div>
	<div>
		<h3><a href="#">Second</a></h3>
		<div>Phasellus mattis tincidunt nibh.</div>
	</div>
	<div>
		<h3><a href="#">Third</a></h3>
		<div>Nam dui erat, auctor a, dignissim quis.</div>
	</div>
</div>

Das ist der Standardaufbau des Accoridons aus jQuery UI. Das CSS entstammt dem jQuery UI CSS Framework.
Damit können Themes einfach, im Prinzip durch eine standardisierte Benamung von Elementen, ausgetauscht werden.

Nun zum Javascript Code. Er beinhaltet den Aufruf des Accordions und die Registrierung der Mouseevents.
Wir wollen das Accordion erst nach einer kleinen Verzögerung schließen, deshalb benutzen wie die Funktion setTimout. Falls der Benutzer innhalb dieser Zeit wieder mit dem Cursor über das Accordion fährt, muss dieser Timeout abgebrochen werden. Deshalb speichern wir
das Timeout-Objekt in einer globalen javascript Variabeln (tObj). Mittels der Funktion clearTimeout wird dieser Timout nun vorzeitig ohne Aufruf der Callback-Funktion beendet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
	var tObj;
 
	$(function(){
	           // simple accordion with special markup
		$('#accordion').accordion({
			header: 'h3',
			active: '.selected',
			collapsible: true,
			autoHeight: false
		});
 
		$("#accordion").mouseleave(function(){
		   	tObj=setTimeout("menu.accordion('activate', active);",3000);
 	           });
 
		$("#accordion").mouseenter(function(){
	     		clearTimeout(tObj);
   		});
 
	});
</script>

Da das Accordion in das Div mit der id “accordion” gehüllt ist, genügt es uns vollkommen die Events ebenfalls auf dieses Div zu legen.
Es bietet sich an die zwei Mousevents mittels Punktoperator zu verknüpfen. Die Funktionalität bleibt die gleiche, allerdings wird eine DOM Operation weniger ausgeführt. Was sich vor allem in Schleifen deutlich bemerkbar macht.
Verkettet sähe die Anweisung so aus:

1
2
3
4
5

	$("#accordion").mouseleave(function(){
		tObj=setTimeout("menu.accordion('activate', 'active');",3000);
               }).mouseenter(function(){
	    	clearTimeout(tObj);
	 });

Ein Beispiel dazu findet unter in unserem Demobereich.

And kind regards to Fabian Hallstein for his idea…

jQuery myPass – password hiding iPhone-Style

About

Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei Facebook anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.

Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der zuletzt eingegeben Buchstabe des Passworts zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.

Ich dachte mir sowas könnte auch für normale Formulare ganz schön sein und deshalb haben wir ein kleines jQuery-Plugin geschrieben welches dieses Verhalten imitiert.

How to use

jQuery myPass nutzt die jQuery Javascript library.

Ihr müsst nur die beiden Dateien in eueren Header einbinden.

1
2

<script src="_js/jquery.js" type="text/javascript"></script>
<script src="_js/jquery.myPass-1.0.js" type="text/javascript"></script>

Options

Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben

1
2
3
4
5

	$('.myTextField').myPass({
			charReplace : '%u2665',
			charDuration : 1000
 
	});

• charReplace: Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr hier.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : ‘%u2665′ um statt dem • ein ♥ zu verwenden.
• charDuration: Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.

HTML

Im HTML-Teil eurer Seite legt Ihr nun einfach ein ganz normales Textfeld an, gebt diesem einen Namen und die Klasse welche Ihr oben eingetragen habt.

In diesem fall .myTextField.

1
2
3
4

<form action="test.php" method="post">
<input class="myTextField" name="password" type="text" />
<input name="Send" type="submit" value="submit" />
</form>

Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.

1

echo $_POST['password'];

Download & Demo

Demonstration – Plugin in Action

Download – Alle Dateien zum Download

jQueryList – Plugin und Beispielsammlung

Wer kennt das nicht. Im laufe der Zeit hat man sich eine Vielzahl an Bookmarks angelegt, wenn man Glück hat sogar in Ordner und nach Thema sortiert. Wenn man jetzt jedoch nach einem gewissen Plugin oder Beispiel sucht gehts los. Wo war das? Wie hieß das?

Das ganze kann man jetzt auch erstmal bequemer angehn.
Gestern bin ich dank einem Tweet auf jQuery List gestoßen.
Bei jQuery List handelt es sich um EINE Seite mit Beispielen und Plugins rund um jQuery.
Die einzelnen Einträge sind in 32 Kategorien aufgeteilt, wie z.B. Grids, Drag and Drop, Form Validation usw.

Alle Inhalte befinden sich zusammengefasst auf einer einzigen Seite. Zu jedem Eintrag gibt es einen kleinen aktuellen Screenshot der dazugehörigen Seite zu sehen.
Mit 255 Einträgen ist schon so einiges dabei. Für mich persönlich wird die Seite meine Bookmarks sicher nicht ersetzen, aber wenn man mal auf die schnelle etwas braucht oder in den Bookmarks nicht das richtige dabei ist, werde ich hier sicher vorbei schauen.

jQuery noConflict Mode

Des öftern ist man gezwungen mehrere JS-Frameworks auf einer Website zu nutzen. Das geschieht wenn man eine Vielzahl von Plugins einbauen möchte und diese eben nicht für ein einziges Framework vorhanden sind. Natürlich mit dem Nachteil verbunden, dass bei jedem Aufruf einer Seite eine relativ große Menge an Daten mitgesendet werden muss, nämlich mindestens die verschiedenen Framework Core Dateien.

Die beiden Kerne einbinden bringt uns aber noch nicht ganz zum Ziel. jQuery bietet hierfür den noConflict-Mode an. Diese wird nach einbinden der Bibliothek aufgerufen und sorgt dafür, das jQuery unter einem anderen Namespace ansprechbar ist.

Ein Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = $('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});

Dieses Skript wirft bei installiertem Firebug nun ein Fehler. Javascript kann das $-Zeichen nicht referenzieren und findet in obigem Fall die Methode “attr” nicht. Nun kommt der noConflict-Mode ins Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
<script>
     jQuery.noConflict();
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = jQuery('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});
 </script>

Will man nun über jQuery ein Element ansprechen ersetzt man das “$” durch “jQuery” und behält für MooTools den $-Syntax bei. Ein friedliche Koexistenz.
Auf diese Weise lässt sich jQuery mit sogut wie jedem anderen Framework benutzen. Leider gehört jQuery zu den wenigen Frameworks die einen solchen Modus besitzen. Möchte man bspw. Prototype in Verbindung mit MooTools einsetzen gibt es keine Option dieser Art.

Formulare mit AJAX und jQuery – Ein kleines Tutorial

AJAX ist eine vom Prinzip her sehr einfache Technologie. Request mit JS abschicken, Anfrage mit serverseitigem Skript verarbeiten und Ergebnis wieder im Browser ausgeben bzw. anzeigen. Allerdings steckt der Teufel wie immer im Detail. Dieser Post ist eine kleine Anleitung wie man AJAX mit einem Formular einsetzen kann. Weit einfacher ist dies mit der Verwendung eines JS-Frameworks, hier jQuery.

So zunächste einmal der Standardaufbau in HTML für ein Formular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done …

Demo

Wie nutzt man MooTools?!

Inspiriert von einem Artikel von “chromasynthetic” möchte ich ein paar Best Practices für den Umgang mit MooTools vorstellen und diese kurz erläutern.

• Elemente ansprechen
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode document.getElementById("someID"); //mit Mootools $('someID');

Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

• “Value” bearbeiten
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode var val= document.getElementById('input').value; //mit Mootools var val = $('input').getValue();

Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

• Verketten von Methoden
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8

//javascript methode $('div').style.height = '100px'; $('div').style.background = '#ffc'; //mit Mootools $('footer').setStyles({ height: '100px', background: '#ffc' });

Einfaches Beispiel für eine Verkettung von Funktionen.

• Absetzen eines AJAX-Requests
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

//falsche Methode new Ajax('eine.php?var1=test&var2=request');   //besser mit new Ajax('eine.php', { data: { var1: 'test', var2: 'request' } });

Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

• Event-Handling
^?View Code JAVASCRIPT

1 2 3 4 5

//Falsche Methode $('Container').onclick = doSomething;   //besser mit $('Container').addEvent('click', doSomething);

Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

• Einfache Iteration über Elementgruppen
^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.collapsed').each(function(el){ el.addEvent('click', expand); });   //besser mit $$('div.collapsed').addEvent('click', expand);

Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
Gleiches gilt für:

^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.hidden').each(function(el){ el.removeClass('hidden'); })   //besser mit $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.