JS: 10 nützliche jQuery Mobile Codezeilen

Der erste Beitrag zu meinem neuen Themengebiet ist eine kleine Übersicht, über die 10 nützliche jQuery Mobile Codezeilen. Die Liste basiert auf meinen persönlichen Erfahrungen und wurde hauptsächlich mit der jQuery Mobile Version 1.3.2 erstellt/getestet. Ich hoffe, dass euch diese Codezeilen etwas helfen und den Einstieg in jQuery Mobile erleichtern:)

1. Lade-Symbol/-Grafik anzeigen

Inoffizielle Tests haben ergeben, dass Benutzer maximal 2 Sekunden auf die Antwort eines Programms warten. Jedoch reicht diese Zeit oft nicht aus, um die benötigten Daten aus dem Internet zu laden oder irgendwechle Berechnungen zu vollenden. Um den Benutzer anzuzeigen, dass noch was passiert und das Programm nicht abgestürzt ist, sollte man immer eine Lade-Symbol anzeigen. Mit jQuery Mobile nutzt man folgende Befehle:

// Symbol anzeigen
$.mobile.showPageLoadingMsg();

// Symbol verstecken
$.mobile.hidePageLoadingMsg();	

2. Seiten/Links ohne AJAX und die Animation öffnen

Teilweise sind die Animationen beim Wechseln der Seiten sehr langsam oder man will/möchte das Laden der nächsten Seite per AJAX nicht. Dann hilft nur noch:

// data-ajax="false"
<a href="index.html" data-ajax="false">Startseite</a>
// oder
// rel="external"
<a href="index.html" rel="external">Startseite</a>

oder mit JavaScript:

 $.mobile.ajaxLinksEnabled = false;

3. das Kürzen von Texten in Buttons und Listen ausschalten

Manchmal nervt das automatische Kürzen von Texten in Buttons und Listen. Dann muss man folgendes CSS einfügen:

// Für Buttons
.ui-btn-text {
white-space: normal;
}

// Für Listen
.ui-li-desc {
white-space: normal;
}

// einschalten
white-space: nowrap;

4. Popup öffnen

Egal ob Fehlermeldung, Hinweis, Warnung, Werbung oder Info – so erstellt man ein Popup in jQery Mobile:

		<div data-role="popup" id="doppelt" name="doppelt" data-overlay-theme="a" style="max-width:400px;" class="ui-corner-all">
			<div data-role="header" class="ui-corner-top">
				<h1>Fehler</h1>
			</div>
			 <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
			<div data-role="content" class="ui-corner-bottom ui-content">
				<h3 class="ui-title">irgendwas geht nicht!</h3>
			</div>
		</div>

per JavaScript öffnen:

$( "#doppelt" ).popup( "open", {transition: 'flip'} );

5. Listview aktualisieren

Wenn man Elemente einer Listview entfernt oder hinzufügt, sollte man zur Aktualisierung der Liste folgenden Befehl aufrufen:

$('#idDeinerListe').listview("refresh");

6. Seite per JavaScript wechseln

Nach einer bestimmten Aktion muss man den Benutzer entweder auf Seite A oder Seite B weiterleiten. Mit diesen Befehl wird die entsprechende Seite geladen:

			$.mobile.changePage( "neueSeite.html", {
				transition: "slide",
				reverse: false,
				changeHash: true
				});

7. Button sperren und öffnen

Durch diverse Konstellationen im Programmablauf ist es oftmals erforderlich Buttons zu aktivieren oder zu gesperren. Mit diesen Befehl geht das locker leicht:)

$('#btnId').button("disable");
// oder
$('#btnId').button("enable");

// danach immer
$('#btnId').button('refresh');	

8. Device erkennen

Bestimmte Layouts oder Elemente sollten nur bei Smartphones oder mobilen Endgeräten angezeigt werden. Hierbei hilft diese Abfrage:

if( /Android|Windows Phone|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// mobilgerät
}else{
// es ist ein z.B. PC
}

9. Events

Das sind die wichtigsten Events einer jQuery Mobile-Seite

<div data-role="page" id="indexPage" data-theme="a" >
...

$( "#indexPage" ).on( "pageshow", function( event, ui ) {
// Event wird beim anzeigen der Seite ausgelöst
});

$( "#indexPage" ).on( "pagehide", function( event, ui ) {
// Event wird beim verlassen der Seite ausgelöst
});


$( document ).on( "pageinit", "#indexPage", function() {
// Event wird beim erstmaligen laden ausgelöst
});

10. Seite trotz Sidebar nutzen

Standardmäßig kann man entweder nur die Seite oder die Sidebar nutzen. Mit diesen CSS geht beides parallel:

@media (min-width:35em){

	/* wrap on wide viewports once open */
	
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
	.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
	.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
		margin-right: 17em;
	}
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
	.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
	.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
		margin-left: 17em;
	}
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
	.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
		width: auto;
	}
	
	/* disable "dismiss" on wide viewports */
	.ui-panel-dismiss {
		display: none;
	}
	/* same as the above but for panels with display mode "push" only */
	.ui-panel-dismiss-display-push {
		display: none;
	}

}

Quellen und weitere Links

• Petra Bork / pixelio.de
• 10 handy jQuery mobile tips and snippets to get you started
• Top 10 jQuery Mobile Code Snippets that you need to know
• Beste Seite 4 Ever:) jquerymobile.com

Copyright © 2013 AxxG – Alexander Gräsel