Archiv für August, 2009

Aug200912

Stefan Huissel

0

jQuery Form Plugin – Do some AJAX magic easily

Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre Formulare AJAX gestützt umzusetzen.

form_plugin

Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.

Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/form.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() {
                alert("Formular wurde gesendet!");
            });
        });
    </script>
</head>
<body>
<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Kommentar: <textarea name="kommentar"></textarea>
    <input type="submit" value="Abschicken" />
</form>
</body>

Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.

Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:

  • target
  • url
  • success
  • …

Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11

// Optionobjekt mit gesetzten Attributen
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Erfolgreich abgeschickt!');
    }
};
 
// Options einfach der Mehthode ajaxForm als Parameter übergeben
$('#myForm').ajaxForm(options);

Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.

Aug200905

Oliver Storm

0

Tipp! Den gleichen Selektor nicht mehrmals aufrufen

Und noch ein kleiner Tipp! Oftmals kommt es vor das man einem Element mehrere Methoden mitgeben muss.
Hier sollte man vermeiden den Selektor nicht zu oft zu verwenden.

Anstatt:

?View Code JAVASCRIPT
1
2
3

$('div.class').css ('color', '#000000');
$('div.class').text ('Hier steht Text');
$('div.class').addClass ('highlighted');

sollte man:

?View Code JAVASCRIPT
1
2
3
4

var $div = $('div.class');
$div.css ('color', '#000000');
$div.text ('Hier steht Text');
$div.addClass ('highlighted');

verwenden.

Alternativ kann man das ganze auch chainen.

?View Code JAVASCRIPT
1

$('div.class').css ('color', '#000000').text ('Hier steht ein Text').addClass ('highlighted');

Aug200905

Oliver Storm

1

Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery

Anbei nur ein kleiner Tipp! wie man einfach ein li auf klick highlighten kann und dem aktiven li die Klasse wieder entzieht.

CSS:

?View Code CSS
1
2
3

        .active{
	      color: red;
        }

HTML:

?View Code HTML
1
2
3
4
5
6

<ul id="liste">
	<li>eins</li>
	<li>zwei</li>
	<li>drei</li>
	<li>vier</li>
</ul>

jQuery:

?View Code JAVASCRIPT
1
2
3
4
5

$(document).ready(function() {
		$('#liste li').click(function(){
			$(this).closest('li').addClass('active').siblings().removeClass('active');
		});
	});

Eine kleine Demo des ganzen

Aug200904

Oliver Storm

0

Formularfelder vorausfüllen und leeren mit jQuery Clearfield

Nur kurz möchte ich dieses kleine Plugin hier erwähnen.
Gerade bei Suchfeldern kennt man es das im Feld  “Suche:” steht und verschwindet sobald das Feld den Focus bekommt.

Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen jQuery Plugin lösen.

Datei einbinden

?View Code HTML
1

<input type="text" class="clearField" value="What's your name?" />

Funktion hinzufügen

?View Code JAVASCRIPT
1
2
3
4
5
6

$(document).ready(function() {
	$('.clearField').clearField({
		blurClass: 'myBlurredClass',
		activeClass: 'myActiveClass'
	});
});

und das input Field entsprechend einbinden.

?View Code HTML
1

<input type="text" class="clearField" value="What's your name?" />

Fertig!

Alle Dateien zum Downlad findet Ihr auf der offiziellen Plugin Seite.

Aug200904

Oliver Storm

0

Schöne Schriften – FontEffect Plugin für jQuery

FontEffect jQuery Plugin

Wer kennt das nicht, bettet man eine Schrift nicht als Bild ein hat man mit CSS allein so gut wie keine Möglichkeiten grafische Effekte auf die Schrift anzuwenden.
Gerade bei Headlines kann dies aber doch ab und an ganz schön sein.
Dem ganzen kann jetzt Abhilfe geschaffen werden mit diesem schönen jQuery Plugin habt ihr nun die Möglichkeit Outlines, Schatten, Verläufe und Spiegelungen an eurem Text zu verankern.
Das Plugin ist nur 7kb groß und kommt gänzlich ohne Bilder aus, so wie es z.B. manche PHP-Funktionen tun wenn sie mit Text arbeiten.

Das Plugin ist denkbar einfach zu nutzen. Einfach die Files downloaden und einbinden.

?View Code JAVASCRIPT
1
2

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-FontEffect-1.0.0.min.js" type="text/javascript"><!--mce:1--></script>

und anschließend aufrufen

?View Code JAVASCRIPT
1
2

$('#id1').FontEffect({ outline:true, shadow:true })
$('#id2').FontEffect({ gradient:true, mirror:true, mirrorColor:"#298d79" })

Das Plugin kommt mit über 20 versch. Einstellmöglichkeiten für Farbe, Position, Transparenz usw… daher.
Eine vollständige Liste der Optionen, jede Menge Demos, einen Konfigurator sowie alle Dateien zum Download findet Ihr auf der Plugin Homepage.
Auf der Seite werden auch Mögliche Fragen bzgl. User resizing, Fonts, Box model, Divs usw angesprochen.

Aug200903

Oliver Storm

1

Inhalte Zoomen mit jQuery Plugin – AnythingZoomer

zoomerdemo

Ich bin schon vor ein Paar Tagen auf dieses Plugin gestoßen und wollte es euch heute noch kurz vorstellen.
Mit AnythingZoomer für jQuery habt Ihr die Möglichkeit einzelne Elemente eurer Seite vergrößert darzustellen.
Dazu müsst Ihr einfach nur mit der Maus über die entsprechenden Stellen fahren und der Rest wird über CSS geregelt.

Hier gibts verschieden Demos und das Plugin zum Download.

Aug200903

Oliver Storm

0

MouseEvents mit jQuery auf beliebigem Element erfassen

Vor ein paar Tagen musste ich im Zuge eines Projektes MouseEvents auf beliebigen DOM-Elementen abfangen und auswerten können. Mit jQuery und event.type kein Problem.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

 $(document).ready(function() {
       $('#id').bind('mousedown mouseenter mouseleave click dblclick ',
                    functionForMore);
 
        function functionForMore(e) {
            $('p').text('Mausaktion: ' + e.type);
        }
    });

Einfach die gewünschten Events mittels bind dem oder den Elementen (ID oder Klasse), oder man baut das ganze aus und automatisiert für alle Elemente auf der Seite, andocken und im anschluss die weiterführende Funktion auslösen.