jQuery Mobile - Configuration

Dans ce chapitre, nous verrons comment installer et configurer jQuery Mobile.

Télécharger jQuery Mobile

Lorsque vous ouvrez le lien jquerymobile.com/ , vous verrez qu'il existe deux options pour télécharger la bibliothèque mobile jQuery.

Custom Download - Cliquez sur ce bouton pour télécharger une version personnalisée de la bibliothèque.
Latest Stable - Cliquez sur ce bouton pour obtenir la dernière version stable de la bibliothèque mobile jQuery.

Téléchargement personnalisé avec Download Builder

À l'aide de Download Builder, vous pouvez créer une version personnalisée comprenant uniquement les parties de la bibliothèque dont vous avez besoin. Lorsque vous téléchargez cette nouvelle version personnalisée de jQuery Mobile, vous verrez l'écran suivant.

Vous pouvez sélectionner les bibliothèques selon vos besoins et cliquer sur le bouton Build My Download bouton.

Téléchargement stable

Cliquez sur le bouton Stable , qui mène directement à un fichier ZIP contenant les fichiers CSS et JQuery, pour la dernière version de la bibliothèque mobile jQuery. Extrayez le contenu du fichier ZIP dans un répertoire mobile jQuery.

Cette version contient tous les fichiers, y compris toutes les dépendances, une grande collection de démos et même la suite de tests unitaires de la bibliothèque. Cette version est utile pour démarrer.

Télécharger la bibliothèque jQuery à partir des CDN

Un CDN (Content Delivery Network) est un réseau de serveurs conçu pour servir des fichiers aux utilisateurs. Si vous utilisez un lien CDN dans votre page Web, il transfère la responsabilité de l'hébergement des fichiers de vos propres serveurs vers une série de serveurs externes. Cela offre également un avantage: si un visiteur de votre page Web a déjà téléchargé une copie de jQuery mobile à partir du même CDN, il n'aura pas à être retéléchargé. Vous pouvez inclure les fichiers CDN suivants dans le document HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Nous utilisons les versions CDN de la bibliothèque tout au long de ce didacticiel. Nous utilisons AMPPS (AMPPS est une pile WAMP, MAMP et LAMP d'Apache, MySQL, MongoDB, PHP, Perl & Python) pour exécuter tous nos exemples.

Exemple

Voici un exemple simple de jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <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>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Les détails du code ci-dessus sont -

Ce code est spécifié à l'intérieur de l'élément head.

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

La fenêtre est utilisée pour spécifier (par le navigateur) d'afficher le niveau de zoom et la dimension de la page.
content = "width = device-width" est utilisé pour définir la largeur en pixels de la page ou du périphérique d'écran.
initial-scale = 1 définit le niveau de zoom initial, lorsque la page est chargée pour la première fois.

Incluez les CDN suivants

<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>

Le contenu de la balise <body> est une page affichée dans le navigateur.

<div data-role = "page">
   ...
</div>

data-role = "header" crée l'en-tête en haut de la page.
data-role = "main" est utilisé pour définir le contenu de la page.
data-role = "footer" crée le pied de page en bas de la page.
class = "ui-content" inclut le remplissage et la marge à l'intérieur du contenu de la page.

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

Enregistrez le code html ci-dessus sous simple_example.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/simple_example.html et la sortie suivante sera affichée.

↰ Previous page Next page ↱