Looking for jquery-mobile Keywords? Try Ask4Keywords

jquery-mobileErste Schritte mit jquery-mobile


Bemerkungen

Diese Informationen werden direkt von der JQuery Mobile-Website übernommen:

http://jquerymobile.com/about/

"jQuery Mobile ist ein HTML5-basiertes Benutzeroberflächensystem, das responsive Websites und Apps bereitstellt, die auf allen Smartphone-, Tablet- und Desktop-Geräten verfügbar sind. Es basiert auf der soliden Basis jQuery und jQuery UI und bietet Ajax-Navigation mit Seitenübergänge, Berührungsereignisse und verschiedene Widgets. Sein einfacher Code wurde mit fortschreitender Verbesserung erstellt und verfügt über ein flexibles, einfach zu bedienendes Design. " - JQuery Mobile-Team

Ich würde dringend empfehlen, auf die Website zu gelangen, um mehr über JQuery Mobile zu erfahren. Dies ist nur ein Auszug für Anfänger.

Weitere Beispiele und Informationen finden Sie auch auf der offiziellen Seite von jquery-mobile: https://jquerymobile.com/demos

Konfiguration

Die aktuelle Version von JQuery Mobile ist 1.4.5 und kann hier heruntergeladen werden: https://jquerymobile.com/

  • Laden Sie die ZIP-Datei herunter und extrahieren Sie alle Dateien.
  • Erstellen Sie einen Bibliotheksordner (oder eine Bibliothek) in Ihrer Anwendung (im Ordner www).
  • Erstellen Sie einen Jquery-Mobile-Ordner im lib-Ordner (ich habe meinen jqm genannt).
  • Legen Sie alle von Ihnen extrahierten Jquery-Mobile-Dateien im Ordner Jquery-Mobile ab. Sie können jetzt einen Link zu diesen Dateien in Ihrer index.html-Datei erstellen.

Im folgenden Code werden die Javascript- und CSS-Dateien per URL eingefügt. Sie können alternativ den Aufzählungspunkten oben folgen und sie in den Pfad einschließen, in dem sich Ihr lokaler Computer befindet.

<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
 

Dies sind die minimierten Versionen der Dateien css und js. Sie können alternativ die nicht reduzierte Version während der Entwicklung einbeziehen, sodass sie einfacher zu lesen ist, wenn Sie nach etwas suchen. In diesem Fall würde ich empfehlen, sie bei der Bereitstellung in der Produktion auf die reduzierten Versionen umzustellen.

<!-- it is imported inside head tags. -->

<!-- no additional files needed, if css and js referred with full path. -->

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Viewport setup. -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- jQuery Mobile styles come first before js. -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Basic jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- jQuery Mobile library kind of extends upon jQuery -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

 <!-- example page element using jQuery mobile tags: -->      
 <div data-role="page" id="pageone">

     <div data-role="header" id="pageone-header">
        <h3>Insert Page header Here</h3>
     </div><!-- /header -->

     <div role="main" class="ui-content" id="pageone-content">
        <center><h3>Page title</h3></center>
        <!-- All HTML for the page content goes here -->
     </div><!-- /content -->
        
    <div data-role="footer" data-position="fixed">
        <h4>Insert Page footer Here</h4>
    </div><!-- /footer -->

 </div>
  
 </body>
 </html>