jQuery Mobile Grundgerüst

Wenn wir jQuery Mobile nutzen möchten, müssen wir die entsprechenden jQuery-Dateien einbinden:

  • CSS-Datei von jQuery (für das Design)
  • jQuery JavaScript Framework
  • jQuery Mobile Framework

Diese Daten können direkt vom jQuery-Server (CDN-Hostet) eingebunden werden oder auch vom eigenen Webspace (bzw. Festplatte, wenn Offline entwickelt wird).

Dabei kann auch die entsprechende Version festgelegt wird.

Wir haben also im Kopfbereich unserer HTML-Datei folgenden Einträge:

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
      rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Es gibt auch einen CDN-Server von Google und von Microsoft. Da ist es Geschmackssache, was man verwendet. Hat man sensible Daten wie Beispielsweise im Krankenhaus, dann sollte keine externe Einbindung erfolgen, sondern man sollte auf dem eigenen Webserver die notwendigen Dateien und Frameworks hosten (Download unter https://jquerymobile.com/)!

Und wenn man selber seine Website über SSL-betreibt, sollten auch die extern eingebundenen Links über „https“ aufgerufen werden!

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
      rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Im Kopfbereich der HTML-Datei sollten weitere Anweisungen vorhanden sind. Dazu gehört auf jeden Fall der Viewport. Dieser hat die Funktion, dass Handy die passende Schriftgröße verwenden. Wer mehr über den Viewport wissen möchte, kann unter https://www.html-seminar.de/viewport-richtig-setzen.htm nachlesen - ansonsten einfach folgende Zeile integrieren:

<meta name="viewport" content="width=device-width, initial-scale=1">

Wie haben somit das komplette Grundgerüst unsere HTML-Datei:

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel HTML-Grundgerüst für jQuery Mobile</title>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 
     rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <!-- eigene CSS-Anweisungen -->
    <link href="design.css" rel="stylesheet">
</head>
<body>
<h1>erste Webapp</h1>
</body>
</html>

In dieses Grundgerüst werden nun alle Einzelseiten aufgenommen.

Unser bisheriges Ergebnis auf einem Handy.