Was passiert hier? Basis ist diese HTML Struktur:

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

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 3. Dezember 2009 -- jQuery – Click Handler Elementen zuordnen und entfernen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

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

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield

Die gängigsten JS Frameworks (jQuery, jQuery UI, MooTools, Prototype, Dojo) sind dort vertreten, genauso wie annähernd alle APIs von Google. Beispiele dazu sind:

• Language API
• Earth API
• Maps API
• Calender API
• Youtube API

Zu allen APIs gibt es kleine Beispiele die sofort ausgeführt werden können. Ein paar nette Goodies dazu sind, der Direktlink auf die Dokumentation des API genauso wie der intergrierte Firebug Lite zum debuggen. Der erstellte Code kann dann als HTML editiert oder kopiert werden.

Ähnliche Artikel

• Keine ähnlichen Artikel verfügbar

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

Ähnliche Artikel

• 8. Dezember 2009 -- jQuery load function – Ajax the simple way (Part 1)
• 30. Mai 2009 -- jYouTube – jQuery YouTube thumbnail plugin
• 17. April 2009 -- jQuery API Browser v1.3 für den Desktop