www.PHP-Kurs.com

PHP lernen für Einsteiger
und Fortgeschrittene

PHP-Tutorial mit Videos

Sie befinden sich: Startseite » Web-App mit Datenbankanbindung » jQuery Mobile Grundgerüst

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.

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe