Date post: | 04-Jun-2018 |
Category: |
Documents |
Upload: | dinhkhuong |
View: | 218 times |
Download: | 0 times |
Web-Apps mit jQuery Mobile – Update zum Buch 1
Update für jQuery Mobile 1.4 und etwas mehr... August 2014, Philipp Friberg
Web-Apps mit jQuery Mobile – Update zum Buch 2
1 UPDATE AUF JQUERY MOBILE 1.4 3 1.1 JQM-‐PAGE 3 1.2 NAVIGATION MIT CHANGEPAGE() 4 1.3 EVENTS 5 1.4 AKTIVE PAGE 6 1.5 THEMEN 6 1.6 COLLAPSIBLE SETS 7 1.7 ICONS 7 1.8 FIELD-‐CONTAINER 7 1.9 DATUMSEINGABE 8 1.10 FLIP TOGGLE SWITCH 9 1.11 BUTTONS 9 1.12 LISTVIEW 10 1.12.1 BILDER IN DER LISTVIEW 10 1.12.2 FILTER 10 1.13 PANELS 11
2 WEITERE JQM-‐THEMEN 12 2.1 FOCUS SETZEN 12 2.2 HASH LÖSCHEN 12 2.3 INPUT-‐FIELD X LÖSCHEN BEIM IE10 12 2.4 AUF WELCHER PAGE BEFINDET SICH DER ANWENDER? 12 2.5 KONTRAST 13 2.6 AJAX 13 2.7 DIALOG BREITE UND ABSTÄNDE BEEINFLUSSEN 14
3 BILD IN DIE WHISKY-‐APP EINFÜGEN 15 3.1 WHISKY-‐APP UND FOTOS 15 3.2 HTML-‐ANPASSUNGEN 16 3.3 DATENBANK 17 3.4 CONTROLLER 17
4 WEITERES SIMPLES BEISPIEL 18
5 KORRIGENDA 21
Web-Apps mit jQuery Mobile – Update zum Buch 3
1 Update auf jQuery Mobile 1.4
Mit jQuery Mobile in der Version 1.4 hat sich einiges in der Bibliothek als auch außerhalb der Bibliothek getan, z.B. wurde die langersehnte Road-‐map1 veröffentlicht. Das API soll bis zur Version 2.0 schrittweise überar-‐beitet werden und gewisse jQuery UI Widgets auf die Mobile-‐Philosophie adaptiert werden.
In der Version 1.4 von jQuery Mobile wurde die Performance ver-‐bessert, das Widget-‐Konzept konsequenter angewendet, die Themen überarbeitet und auf SVG-‐Icons gewechselt. Einen 1:1 Update der Biblio-‐thek von der Version 1.3 auf 1.4 ist leider nicht möglich. Anhand der Whisky-‐App aus dem Buch Web-‐Apps mit jQuery Mobile2 zeige ich Ihnen, was sich geändert hat.
1.1 jQM-Page
Abschnitt 4
data-role=“content“ wird ab jQM 1.5 nicht mehr unterstützt. Neu muss die CSS-‐Klasse verwendet werden:
<div class="ui-content"> ... </div>
In unsere Whisky-‐App muss dies ersetzt werden, zum Glück kann dies mit „Suchen/Ersetzen“ vollzogen werden. Somit ergibt sich folgendes neues Grundgerüst für eine jQM 1.4 Applikation:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"
1 Siehe http://jquerymobile.com/roadmap/ 2 Siehe dazu den Code im Verzeichnis „jQM_1_4“
Web-Apps mit jQuery Mobile – Update zum Buch 4
href="http://code.jquery.com/mobile/[version]/ jquery.mobile-[version].min.css" /> <script src="http://code.jquery.com/ jquery-[version].min.js"></script> <script src="http://code.jquery.com/mobile/ [version]/jquery.mobile-[version].min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Sie werden folgend öfters feststellen, dass die data-role-Attribute zu CSS-‐Klassen geändert wurden.
1.2 Navigation mit changePage()
Abschnitt 5.1
changePage() und loadPage() werden ab Version 1.5 nicht mehr unter-‐stützt. Die „Page“ wurde in ein eigenes Widget gepackt – was ja aus Struktur-‐Gründen vernünftig ist. Somit muss aber dem Pagecontainer den Seitenwechsel mitgeteilt werden:
Alt:
$.mobile.changePage("#whisky-home", { transition : "none" });
Neu: $( "body" ).pagecontainer( "change", "#whisky-home", { transition : "none" });
Web-Apps mit jQuery Mobile – Update zum Buch 5
In der Datei controller.js müssen wir also mittels „suchen/ersetzen“ die Methode ändern.
1.3 Events
verschiedene Abschnitte
Wegen der Einführung des Pagecontainers haben sich verschiedene Page-‐Events geändert:
• pageshow wird zu pagecontainershow • pageinit wird zu pagecreate
Es empfiehlt sich die Doku zu konsultieren, da weitere Events sich geän-‐dert haben. Für die Whisky-‐App müssen wir im controller.js und der view.js die Events anpassen.
Im Controller ist des weiteren zu beachten, dass die Initialisierung nur in der Page whisky-home ausgeführt werden darf und nicht für jede Page:
/** Controller aufrufen, wenn pageinit von jQM geworfen wird. */
// $('#whisky-home').live("pageinit", function(event) { $(document).on("pagecreate", "#whisky-home", function(event) { if (( typeof cordova == 'undefined') && ( typeof Cordova == 'undefined')) { WhiskyApp.controller.initialize(); } });
In der View:
/** * Event für neues Tasting darstellen. */ // in jQM 1.4 nicht mehr pageshow sondern pagecontainershow $(document).on("pagecontainershow", function(event, ui) { if( $( "body" ).pagecontainer( "getActivePage" ).attr("id") == "whisky-home" && typeof cordova == 'undefined' && typeof Cordova == 'undefined' && // Nativ oder Web? WhiskyApp.tablet == true ) WhiskyApp.controller.firstView(); )};
Web-Apps mit jQuery Mobile – Update zum Buch 6
1.4 Aktive Page
Abschnitt 7.1
Auch die Methode $.mobile.activePage() hat sich wegen dem neuen Page-‐Widget geändert. Die aktuelle Page muss nun auch mit der pagecon-tainer()-‐Methode ermittelt werden:
$( "body" ).pagecontainer( "getActivePage" );
Im Controller setzen wir dies aus Performance-‐Gründen sehr häufig ein. Zum Glück genügt auch hier „Suchen/Ersetzen“.
1.5 Themen
Abschnitt 5.2
Die Überarbeitung der Themen ist eine der größten Änderungen. Das Ziel war mehr CSS und weniger JavaScript. Es gibt nur noch zwei Themen die ausgeliefert werden: a für ein helles, leichtes Design und b für ein dunk-‐les Design. Der ThemeRoller für sein individuelles Design existiert weiter-‐hin.
Alt:
<ul data-role="listview" data-theme="d"> <li>List item</li> </ul>
Neu:
<ul data-role="listview" data-theme="a"> <li>List item</li> </ul>
In der Whisky-‐App wurde entsprechend data-theme auf a gesetzt. Auf das gelbe Design habe ich aus persönlichen Gründen verzichtet, es störte mich mit der Zeit. Einzig der header habe ich auf das Thema b gesetzt. Eine typische „suchen/ersetzen“ Arbeit.
Abb. 1: Die Whisky-App im neuen Design
Web-Apps mit jQuery Mobile – Update zum Buch 7
1.6 Collapsible Sets
Abschnitt 5.3.1
Wer bis anhin das Aufklappen eines Bereiches mit $("#mycollapsib-le").trigger( "expand" ); steuerte, muss den Code ändern:
$( "#mycollapsible" ).collapsible( "expand" );
1.7 Icons
Abschnitt 5.3.1
Die Icons wurden komplett überarbeitet und erweitert:
Abb. 2: Die neuen Icons
Entsprechend habe ich in der Whisky-‐App die Icons angepasst. Da jQM 1.4 mit dem verwendeten Icon-‐Pack nicht mehr kompatibel ist, habe ich dieses ganz entfernt. Dank der erweiterten Icon-‐Auswahl benötigen wir diese in der Whisky-‐App nicht mehr.
Der Schatten bei den Icons, den wir im header ausschalten mussten, ist mit dem neuen Design hinfällig, sprich es gibt ihn nicht mehr. Somit können wir die data-shadow="false" Attribute entfernen.
1.8 Field-Container
Abschnitt 5.4.1
Einen Field-‐Container hatte man bis anhin wie folgt definiert:
<div data-role="fieldcontain"> ... </div>
Web-Apps mit jQuery Mobile – Update zum Buch 8
Dies wird ab jQM 1.5 nicht mehr unterstützt und sollte auch hier mit CSS gelöst werden. Aber keine Angst, eine typische „suchen/ersetzen“-‐Arbeit durch die ganze Whisky-‐App und erledigt ist es:
<div class="ui-field-contain"> ... </div>
1.9 Datumseingabe
Abschnitt 5.4.4
Da die Strategie vom jQM-‐Team Richtung jQuery UI geht, macht es sinn, die für jQM empfohlene Datumseingabe aus dem jQuery UI zu verwen-‐den. Dazu wurde ein Wrapper entwickelt.
1. Das CSS uns Java-‐Script einbinden: <link rel="stylesheet"
href="lib/datepicker/jquery.mobile.datepicker.css" />
<script src="lib/datepicker/datepicker.js"></script>
<script id="mobile-datepicker"
src="lib/datepicker/jquery.mobile.datepicker.js"></script>
2. Das Input-‐Feld vereinfacht sich um einiges: <input data-role="date" required type="text" name="date" id="date"
data-mini="true">
3. In der main.js – Datei können wir die Parameter setzen – inkl. den Übersetzungen:
/* jQM 1.4: Verwendung des Datepickers aus jQuery.ui */ $.datepicker.setDefaults({ dateFormat: "dd.mm.yy", prevText: '<zurück', prevStatus: '', prevJumpText: '<<', prevJumpStatus: '', nextText: 'Vor>', nextStatus: '', nextJumpText: '>>', nextJumpStatus: '', currentText: 'heute', currentStatus: '', todayText: 'heute', todayStatus: '', clearText: '-', clearStatus: '', closeText: 'schließen', closeStatus: '', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November', 'Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch', 'Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], showMonthAfterYear: false });
Web-Apps mit jQuery Mobile – Update zum Buch 9
1.10 Flip Toggle Switch
Abschnitt 5.4.7
Der Flip Toggle Switch sollte man nicht mehr verwenden, statt dessen das Widget Flipswitch:
Bisher:
<label for="switch">Switch:</label> <select id="switch" name="switch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
Neu:
<label for="switch">Switch:</label> <select id="switch" name="switch" data-role="flipswitch"> <option>Off</option> <option>On</option> </select>
Es hat sich also aus Sicht der Anwendung nicht viel geändert, so dass wir mit „suchen/ersetzen“ durch die Whisky-‐App gehen können.
1.11 Buttons
Abschnitt 5.4.14
Neu sollten die Buttons nur noch mit dem Anker-‐ oder Button-‐Element erstellt werden. Entsprechend müssen wir die div-‐Buttons im header anpassen.
Wir haben gelernt, dass wir ein Button mit data-Attributen anpassen können. Dies funktioniert in jQM 1.4 weiterhin. Zukünftig sollte man jedoch die CSS-‐Klassen verwenden:
n data-role="button" → class="ui-btn"
n data-theme="a" → class="ui-btn-a"
n data-corners="true" → class="ui-corner-all"
n data-shadow="true" → class="ui-shadow"
n data-mini="true" → class="ui-mini"
n data-icon="home" → class="ui-icon-home"
n data-iconpos="right" → class="ui-btn-icon-right" (oder left, top,
bottom)
n data-iconshadow="true" → class="ui-shadow-icon"
Web-Apps mit jQuery Mobile – Update zum Buch 10
Bisher:
<a href="#" data-role="button" data-theme="b" data-mini="true" data-icon="grid">Link button</a>
Neu:
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-icon-right ui-icon-grid">Link button</a>
1.12 Listview
Abschnitt 5.6
Bei der Listview hat es zwei wesentliche Änderungen gegeben: Bei der Integration von Bildern und dem Filter.
1.12.1 Bilder in der Listview
Wir hatten gelernt, dass mit der Klasse ui-li-icon ein Bild als Icon darge-‐stellt wird, vgl. Seite 131. Aus Performance-‐Gründen verzichtete das Entwickler-‐Team auf diese Funktionalität. Neu muss ein Bild, das als Icon dargestellt werden soll im Format 16x16 Pixel vorhanden sein. Weiter muss die Klasse ui-li-has-thumb dem li-‐Element hinzugefügt werden. In unsere App sieht das dann so aus:
<li id="entryTemplate" class="ui-li-has-thumb entry" > ... <img style="max-width:16px; max-height:16px; padding-top: 15pt; padding-left: 5pt" class="ui-li-icon ui-li-thumb" /> ... </li>
1.12.2 Filter
Die bisherige Art von Filter wird nicht mehr unterstützt. Es gibt ein neues Filter-‐Widget:
Alt:
<!-- Liste --> <div id="whiskylist" class="content-list"> <ul class="whiskies" data-role="listview" data-filter="true"> </ul> </div>
Neu:
Web-Apps mit jQuery Mobile – Update zum Buch 11
<!-- Liste --> <div id="whiskylist" class="content-list"> <form class="ui-filterable"> <input id="filter-input" data-type="search"> </form> <ul class="whiskies" data-role="listview" data-filter="true" data-input="#filter-input"> </ul> </div>
1.13 Panels
Abschnitt 5.8
Die CSS-‐Klassen zu den Panels wurden geändert und erweitert. Siehe dazu die Dokumentation.
Web-Apps mit jQuery Mobile – Update zum Buch 12
2 Weitere jQM-Themen
In diesem Kapitel möchte ich ein paar weitere jQM-‐Themen erwähnen, die immer mal wieder auftauchen.
2.1 Focus setzen
Der Focus kann mit der jQuery-‐Methode focus() gesetzt werden:
$('#fbuda').focus();
2.2 Hash löschen
Es gibt die Situation, dass die Hash-‐Funktion benötigt wird, aber bei einem erneuten Initialen Laden der Seite der Hash aus der URL nicht berücksichtigt werden soll. Dieser kann im mobileinit-‐Event entspre-‐chend gelöscht werden:
$(document).bind('mobileinit', function() { parent.location.hash = '' });
2.3 Input-Field X löschen beim IE10
Ab dem IE10 stellt der IE selbst das X zum den Inhalt löschen dar. Will man dies jedoch mit jQM machen, werden beide Icons dargestellt. Dies kann einfach im IE „deaktiviert“ werden, indem dem CSS folgender Ein-‐trag hinzugefügt wird:
::-ms-clear { display: none; }
2.4 Auf welcher page befindet sich der Anwender?
Dies kann mittels dem Attribute id abgefragt werden:
if ($.mobile.activePage.attr("id") == "home") { .. }
Web-Apps mit jQuery Mobile – Update zum Buch 13
Seit jQuery Mobile 1.4 muss dies wie folgt lauten:
if( $( "body" ).pagecontainer( "getActivePage" ).attr("id") == "whisky-home" ) { ... }
2.5 Kontrast
Der Kontrast von deaktivierten Feldern (disabled) als auch vom Placehol-‐der passe ich oft an: /* Bessere Placeholder-Kontraste */ ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } ::-moz-placeholder { color: #bbb; } :-ms-input-placeholder { color: #bbb; } /* Kontrast für disabled */ .ui-disabled { filter: Alpha(Opacity=100); opacity: 0.7; }
2.6 AJAX
jQuery setzt den Mimetype bei AJAX-‐Requests als UTF8-‐URL codiert. Damit die Sonderzeichen keine Probleme schaffen, empfiehlt es sich, davor mit encodeURIComponent() die Daten zu encoden:
var encoded = encodeURIComponent(JSON.stringify(obj)); $.ajax({ type : "POST", data : "data=" + encoded, dataType : "json", ... });
Web-Apps mit jQuery Mobile – Update zum Buch 14
2.7 Dialog Breite und Abstände beeinflussen
Das Dialog-‐Widget stellt einen „kleinen“ Dialog dar. Möchte man diesen beeinflussen, so muss die Klasse .ui-dialog-contain im eigenen CSS entsprechend überschrieben werden.
/* Dialog verbreitern und oben weniger Abstand */ .ui-dialog-contain { width: 92.5%; max-width: 750px; margin: 5% auto 15px auto; padding: 0; position: relative; top: -15px; }
Web-Apps mit jQuery Mobile – Update zum Buch 15
3 Bild in die Whisky-App einfügen
Wie es so oft ist, wird Herr Weber etwas später wieder einmal gerufen. Das Unternehmen möchte statt der Proben-‐Nummer lieber ein Foto hinterlegen können – am liebsten soll dies gleich mit der Kamera aufge-‐nommen werden.
Herr Weber erklärt, dass dies bei Hybrid-‐Apps kein Problem darstellt. Seit einiger Zeit ist es aber auch mit dem HTML5-‐File-‐API möglich, das seit iOS 6 und Android 3 auch auf mobilen Geräten zur Verfügung steht. Während beim PC nur Dateien hochgeladen werden können, stellt die iOS Implementation das Aufnehmen von Fotos zur Verfügung:
Abb. 3: Foto aus der Web-App
Die Spirit AG entscheidet sich für einen einfachen Prototyp unter iOS.
3.1 Whisky-App und Fotos
Um möglichst schnell den Prototyp gemacht zu haben, entscheidet man sich, die Proben-‐Nummer als Foto-‐Speicher zu verwenden, so muss das
Web-Apps mit jQuery Mobile – Update zum Buch 16
Modell nicht angepasst werden3. Folgende Schritte sind nun auszufüh-‐ren:
1. HTML-‐Seite anpassen: File-‐Upload und Bilddarstellung. 2. Datenbank-‐Feld anpassen. 3. File-‐Listener und Bilddarstellung im Contoller implementieren.
3.2 HTML-Anpassungen
Nach der Bezeichnung des Whiskys soll die Fotoauswahl sowie die Dar-‐stellung erfolgen. Somit muss folgender Code nach dem Feld „Bez:“ eingefügt werden: <div class="ui-field-contain"> <label for="bild">Bild:</label> <input type="file" name="bild" id="bild" accept="image/*" capture > </div> <div class="ui-field-contain"> <label for="bildView"></label> <img name="bildView" id="bildView" src="" style="max-width:250px; max-height:500px;" > </div>
Das sieht dann so aus:
Abb. 4: Whisky-Probe mit Foto
Die Auswahl des Fotos erfolgt mit einem Input-‐Feld vom Typ file, das nur images/* akzeptiert. Mit einem img-‐Feld stellen wir es dann drunter dar. Die Größe der Grafik beschränken wir mittels CSS.4 3 und für uns wird es einfacher nachzuvollziehen, da es weniger Änderungen an weniger Stellen sind. Das scheint mir für dieses Beispiel wichtiger zu sein. 4 Auf der Datenbank wird somit die volle Größe der Grafik gespeichert. Ob dies gewollt ist oder nicht, sei an dieser Stelle nicht wesentlich.
Web-Apps mit jQuery Mobile – Update zum Buch 17
Für Videos müssten wir accept=“video/*“ resp. für Audio audio/* schreiben.
3.3 Datenbank
Für den einfachen Prototyp ändert Herr Weber in der Create()-‐Methode der db.js-‐Datei das Feld probennr zu einem String. Zusätzlich ändert er die Version auf 2.0 und vergrößert den Datenbedarf. Auf eine Migration wird für den Prototyp verzichtet und erst umgesetzt, wenn die App so akzeptiert wird.
3.4 Controller
Im Controller muss auf die Auswahl eines Bildes reagiert werden. Des-‐halb fügt er bei der Initialisierung einen Listener auf den Change-‐Event hinzu:
$("#bild").change( handleFileSelect );
Jetzt fehlt nur noch die Methode handleFileSelect(). In dieser lesen wir mit dem FileReader-‐Objekt den Inhalt der Datei aus. Diesen Inhalt fügen wir anschließend dem img-‐Element als Source hinzu.
/** Liest das Bild ein und stellt es dar */ function handleFileSelect(evt) { if(typeof FileReader == "undefined") return true; var file = evt.target.files[0]; // nur eine Auswahl var elem = $(this); if (file.type.match('image.*')) { var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var image = e.target.result; $('#bildView').attr( 'src', image); }; })(file); reader.readAsDataURL(file); } }
Web-Apps mit jQuery Mobile – Update zum Buch 18
4 Weiteres simples Beispiel
Mit diesem Beispiel möchte ich eine ganz einfache jQM-‐Seite zeigen, mit der man Werte in eine Liste einfügen kann. Weiter wird diese im localS-torage gespeichert und beim Start der Seite ausgelesen:
Abb. 5: Simple Beispiel
Die HTML-‐Datei hat eine Page mit einem Header und dem Content. In diesem gibt es ein Field-Container für die Eingabe und ein Button. Wenn auf das Button geklickt wird, wird dessen Wert in die darunter liegenden Liste eingefügt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple jQM Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
Web-Apps mit jQuery Mobile – Update zum Buch 19
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script src="index.js"></script> </head> <body> <div id="home" data-role="page"> <div data-role="header"> <h1>Simple jQuery Mobile Example</h1> </div><!-- /header --> <div role="main" class="ui-content"> <h3>Wert in Liste hinzufügen</h3> <div class="ui-field-contain"> <label for="value">Wert:</label> <input type="text" name="value" id="value" /> </div> <button type="button" id="save" data-icon="check">Hinzufügen</button> <ul data-role="listview" data-inset="true" id="meineListe"></ul> </div><!-- /content --> </div><!-- /page --> </body> </html>
In der index.js-‐Datei implementieren wir den Event-‐Handler des But-‐tons. In dessen Methode lesen wir den Wert aus, fügen ihn in der Liste ein und speichern das Array als JSON-‐String im localStorage. Zu beachten ist, dass wir die Liste wegen den neu hinzugefügten HTML-‐Elementen neu rendern müssen. Dazu rufen wir vom Widget die refresh-‐Funktion auf.
// Liste mit den Werten var meineListeAr = Array(); var AppController = function() { // Merkt den Wert und speichert ihn function saveWert() { // 1. Wert auslesen var wert = $('#value').val(); console.log(wert);
Web-Apps mit jQuery Mobile – Update zum Buch 20
// 2. Liste hinzufügen $('#meineListe').prepend('<li>'+wert+'</li>'); $('#meineListe').listview('refresh'); // 3. Speichern meineListeAr.push(wert); localStorage.setItem('SimpleApp.meineListe', JSON.stringify(meineListeAr)); } // Liest die Werte aus dem localStorage function ladenWerte() { try { var meineWerte = JSON.parse(localStorage.getItem( 'SimpleApp.meineListe')); for (var i = 0; i < meineWerte.length; i++) { meineListeAr.push(meineWerte[i]); $('#meineListe').prepend('<li>'+ meineWerte[i]+'</li>'); } } catch(e) { } $('#meineListe').listview('refresh'); } return { initialize : function() { // Save - Button $('#save').click(saveWert); }, laden : function() { ladenWerte(); } } } $(document).on("pagecreate", function(event) { controller = new AppController(); controller.initialize(); controller.laden(); });
Web-Apps mit jQuery Mobile – Update zum Buch 21
5 Korrigenda
Seite 44 im Code:
var whisky = new Whisky("Ardbeg", 46, 15) // Instanz erzeugen console.log(whisky.getName()); // Ardbeg console.log(whisky.getAlcohol()); // 46% alc./vol. console.log(whisky.getInFassGelagert()); // 15 console.log(whisky instanceof Whisky); // true console.log(whisky instanceof Spirituose); // true
Seite 69 im Code:
$('#box').function_a().function_b().function_c();
Seite 203, Tabelle 7-1:
Es war nicht der Browser Firefox Max sondern Firefox auf dem Mac.