Einstieg jQuery Mobile – Alles ist irgendwie anders

24.10.2016 02:31 Uhr

Leicht mahnende Worte vorweg: Der „Einstieg jQuery Mobile“ macht nur Sinn, wenn bereits ein absolutes Verständnis von „Standard“-HTML vorliegt. Dazu sind die Inhalte aus dem Kurs „Advanced Web Basics“ notwendig. Ohne Kenntnis des Standards ist ein Unterschied zum Standard nicht erkennbar.

Einstieg jQuery Mobile – Die erste Seite

Eine erste Seite mit einem Fast-Minimalbeispiel sieht in jQuery Mobile wie folgt aus. Alle Kursteilnehmer sollten diese Seite in ihrer Umgebung laufen haben. Um Scripts von anderen Seiten einzubinden, ist es notwendig, dass eine funktionierende Internetverbindung vorliegt. Außerdem sollte die Seite nicht lokal ausgeführt werden, sondern durch einen Webserver.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Welcome To Our First Page</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>Willkommen auf unserer ersten Webseite. Haben Sie
            das geahnt, als Sie den Quellcode angeschaut haben?</p>
        <a href="#pagetwo">zur zweiten Seite</a>
    </div>

    <div data-role="footer">
        <h1>Footer Text, später mehr hier</h1>
    </div>
</div>

<div data-role="page" id="pagetwo">
    <div data-role="header">
        <h1>Willkommen zur zweiten Seite</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>Dies ist nun die zweite Seite. Diese Art des Umgangs mit Seiten hat noch große Konsequenzen für uns.</p>
        <a href="#pageone">zurück zur ersten Seite</a>
    </div>

    <div data-role="footer">
        <h1>Footer Text, und wieder später mehr</h1>
    </div>
</div>

</body>
</html>

Während der Kursstunde wird dieses Beispiel vollständig auseinander genommen werden. Besonders intensiv werden wir uns mit dem Grundaufbau beschäftigen. Allerdings ergeben sich aus der Arbeitsweise, die hier gezeigt wird, eine Reihe wichtiger Konsequenzen, die wir uns genauer anschauen müssen. Besonders in Bezug auf Javascript gibt es einen enormen Gewinn an Möglichkeiten.

In der nächsten Kursstunde werden diese Inhalte als verstanden vorausgesetzt!

Neben der ersten Betrachtung vom „Einstieg jQuery Mobile“ ist auch jQuery selbst Thema dieser Kursstunde. Dazu wird etwas „wiederholt“, das uns in Zukunft häufiger unterkommen wird: Der Umgang mit „Events“ und deren Handhabung mit jQuery. Dies wird sicherlich nicht während der Kursstunde bereits abschließend behandelt und bildet daher auch den Beginn der nächsten Kursstunde.