War der erste Alpha release noch sehr buggy, merkt man dass seit dem rund 200 Tickets berarbeitet wurden und auch viele Wünsche der User aus dem Forum einzug gefunden haben. Das jQuery Mobile Team selbst sagt:
Overall the quality of jQuery Mobile has been greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality.

Die Performance im allgemeinen wurde verbessert, neue CSS-Klassen und statische Methoden hinzugefügt und vieles mehr. Den kompletten Überblick bekommt man in den release notes.

Nachdem schon javascript Plugins wie jqTouch, iUi, jo, SproutCore u.a einen ersten Ausblick auf die Entwicklung Mobiler-Apps gegeben haben und auch von Entwicklern gut angenommen wurden, so ist jetzt mit jQuery Mobile wohl eines der, wenn nicht das, mächtigste Framework zum entwickeln Mobiler-Anwendungen auf dem Markt.

Ich habe heute mal mit meinem iPhone die ersten Tests gemacht und muss sagen, mir gefiel sehr was ich gesehen habe. Gerade die Demos waren sehr vielversprechend.

Die Key-features im Überblick:

• Basierend auf dem jQuery Core. Somit eine geringe Lernkurve, da die Syntax weitestgehend gleich bleibt.
• Kompatibel mit allen großen Mobilen Plattformen. – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo.
• Leightweight. Mit gereade mal 12k im der komprimierten-Version.
• HTML5 gestützte Konfiguration.
• Automatische installation
• Volle WAI-ARIA Unterstützung
• Neue Events wie z.B. das unterstützen von Touch-Events
• Neue Plugins wie z.B. für das Theming

Das Top-Features ist, dass wirklich alle großen Mobilen Plattformen out of the Box unterstützt werden.
Hier gibt es auch noch mal einen schönen Überblick welche Platformen genau unterstützt werden. Mobile Graded Browser Support.
Wir sind gespannt wie es hier weiter geht und werden das Thema jQuery Mobile als festen Bestandteil hier im Blog integrieren und in nächster Zeit auch eine kleine Tutorial-Serie dazu starten.

Links zu den wichtigsten jQuery Mobile Seiten:

• jQuery Mobile Website
• Forum
• Blog
• Demos

Ähnliche Artikel

• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! Den gleichen Selektor nicht mehrmals aufrufen

Ich wollte heute in einem Projekt einfach nur das Suchfeld, welches default als Wert “Suche” drin stehen hat, auf klick ins Feld leeren und, sollte der User nichts anderes eingegeben haben beim Verlassen das Feld wieder mit diesem Standardwert füllen.

Hier der Code:

1
2
3
4
5
6
7
8
9
10

$('.search').focus(function() {
	value=$(this).val();
	$(this).attr("value","");
});
 
$('.search').blur(function() {
	if($(this).val()=="") {
		$(this).val(value);
	}
});

Ich hoffe das hilft dem ein oder anderen…

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 17. September 2009 -- jCryption – HTML-Form Encryption Plugin

Werfen wir vorher einen Blick auf die Signatur der neuen Methode:
.fadeToggle( [ duration ], [ easing ], [ callback ] )

Duration ist die Zeit in der das Fading ausgeführt wird
Easing ist die Art des Effektes, wobei es standardmäßig hier keine relevanten Änderungsoptionen gibt
Eine Callback Funktion um nach der Animation beliebigen Code auszuführen.

Der Javascript Code sieht nun wie folgt aus:

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

    // Variable um aktuellen Sichtbarkeitsstatus zu speichern
    var toogleState = "visible"
 
    $(document).ready(function() {
        //Beispiel 1
        $("button:first").click(function() {
          $("div#fadingBox").fadeToggle("slow", "linear");
        });
 
        //Beispiel 2
        $("button:last").click(function () {
          $("p:first").fadeToggle("fast", function () {
 
            if(toogleState == "visible"){
                $("button:last").text("zeigen");
                toogleState = "invisible";
            }
            else{
                $("button:last").text("verstecken");
                toogleState = "visible";
            }
 
          });
        });
 
    });

Das erste Beispiel ist ein Box die einfach aus- und wieder eingeblendet wird. Ohne, dass der aktuelle Anzeigestatus sichtbar oder abrufbar wäre.

Das zweite Beispiel zeigt einen einfachen Workaround, um mit dem aktuellen Anzeigemodus zu arbeiten. Also ist das Element gerade sichtbar oder nicht. Die hier vorgestellte Variante ist einfacherer Natur. Es wäre natürlich auch möglich, direkt den Sichtbarkeitsstatus des Objektes selbst abzufragen und entsprechend zu reagieren. Die vorgestellte Möglichkeit wurde wegen der besseren Nachvollziehbarkeit so gewählt. Allerdings wäre sie für größere Projekte wegen einer schlechteren Wartbarkeit weniger zu empfehlen.

Eine Demo dazu findet ihr hier.
Weder das CSS noch das JS sind ausgelagert, also einfach rechte Maustaste und Quelltext anzeigen lassen.

Ähnliche Artikel

• 26. November 2009 -- jQuery HowTo: Traversing
• 13. März 2009 -- Selektoren in jQuery
• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau

Nach langer Zeit hab ich heute mal wieder ne Kleinigkeit für euch.
Meiner Meinung nach der momentan wohl beste HTML-5 Mediaplayer.
jMediaelement spielt sowohl Audio, als auch Video-Dateien ab und hat für alle Browser die kein HTML-5 unterstützen nen Fallback auf Flash und VLC.

Der Player ist über CSS komplett stylebar und unterstützt alle großen Dateiformate wie z.B.: ogg (theora/vorbis), mp4/mov (h.264), WebM (VP8/vorbis), flv, Youtube videos und mehr.

Die implementierung des Players ist kinderleicht und gut dokumentiert.

Ähnliche Artikel

• 30. Mai 2009 -- jYouTube – jQuery YouTube thumbnail plugin
• 18. Februar 2009 -- jQuery Videos
• 4. Februar 2009 -- MooTools & jQuery – Videos

Das ganze liegt an der neuen Render Engine die Firefox spendiert bekommen hat.
Um das Problem in den Griff zu bekommen, ohne sideeffects für andere Browser zu bekommen macht Ihr einfach folgendes.

Eure jqtransform.css auf, in Zeile 90 (.jqTransformInputInner div input {) änder Ihr die height jetzt von 31px auf auto.

Das war´s schon….

Ähnliche Artikel

• 24. Juni 2009 -- ifixpng2 & pngFix – Transparenz für den IE6
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick
• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie

Einen Click handler einem Element hinzufügen
Einem Element einen Click handler mitzugeben ist wohl mit das einfachste.

1
2
3

$('#idDesElements').click(function(){
    window.alert("Click handler ausgelöst!");
});

Mehrer Click handler einem Element hinzufügen
Einem Element kann übrigens mehr als nur ein Click handler zugewiesen werden.
Wird das Element geklickt, werden alle handler der Reihe nach ausgeführt.

1
2
3
4
5
6

$('#idDesElements').click(function(){
    window.alert("Click handler 1!");
});
$('#idDesElements').click(function(){
    window.alert("Click handler 2");
});

Click Handler entfernen
Um Click Handler wieder zu entfernen reicht ein einfaches unbind.

1

$('#idDesElements').unbind('click');

Click Handler hinzufügen und gleichzeitig entfernen
Da wir mit jQuery ja die wunderschöne Methode des Chainings zur verfügung haben, können wir einem einem Element alle Ihm bisher zugeordneten Click Handler entziehen und gleichzeitig einen neuen hinzufügen.

1
2
3

$('#idDesElements').unbind('click').click(function(){
    window.alert("neuer Click handler ausgelöst!");
});

Click Handler und Anker
Wenn man einen Click Handler an einen Linkanker aufruft, aber nicht will das der Browser dem Link folgt, nachdem der Handler aufgerufen wird muss zusätzlich einfach ein return false;

1
2
3
4

$('#idDesElements').click(function(){
    window.alert("Click handler");
    return false;
});

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 26. November 2009 -- jQuery HowTo: Traversing

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

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 14. November 2010 -- fadeToggle – die Neue in jQuery 1.4.4
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

Ähnliche Artikel

• 27. Juli 2009 -- jQuery Tutorial – Closing an Accordion automatically
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style
• 25. Juni 2009 -- jQueryList – Plugin und Beispielsammlung

Wer dies tun möchte und die entsprechende Einstellung nicht finden kann, dem sei hier eine kleine Hilfe geboten. Dazu müsst ihr die jqtransform.css öffnen und in Z.36 dem Selektor “button.jqTransformButton span span” die neue Eigenschaft width zuweisen.
Das kann dann beispielsweise wie folgt aussehen:

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

button.jqTransformButton span span {
	background: transparent url(img/btn_left.gif) no-repeat top left;
	color: #333;
	padding: 10px 4px 0px 8px;
	font-weight: normal;
	font-size: 12px;
	line-height: 13px;
	display: block;
	text-decoration: none;
	height: 33px;
	width:auto;
	min-width: 100px;
}

Ähnliche Artikel

• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery
• 25. November 2010 -- jQuery Mobile – Web-Apps mit jQuery