jQuery Mobile - Guide rapide

JQuery Mobile est un cadre d'interface utilisateur, construit sur jQuery Core et utilisé pour développer des sites Web réactifs ou des applications accessibles sur les appareils mobiles, tablettes et ordinateurs de bureau. Il utilise les fonctionnalités de jQuery et jQuery UI pour fournir des fonctionnalités d'API pour les applications Web mobiles.

Il a été développé par l'équipe du projet jQuery en 2010 et écrit en JavaScript.

Pourquoi utiliser jQuery Mobile?

  • Il crée des applications Web qui fonctionneront de la même manière sur les appareils mobiles, tablettes et ordinateurs de bureau.

  • Il est compatible avec d'autres frameworks tels que PhoneGap, Whitelight, etc.

  • Il fournit un ensemble d'entrées de formulaire tactiles et de widgets d'interface utilisateur.

  • L'amélioration progressive apporte une fonctionnalité unique à toutes les plates-formes mobiles, tablettes et ordinateurs de bureau et ajoute des chargements de pages efficaces et une prise en charge plus large des appareils.

Fonctionnalités de jQuery Mobile

  • Il est construit sur jQuery Core et «écrire moins, faire plus» cadre d'interface utilisateur.

  • Il s'agit d'un framework open source, compatible avec toutes les plates-formes et tous les navigateurs.

  • Il est écrit en JavaScript et utilise les fonctionnalités de jQuery et jQuery UI pour créer des sites adaptés aux mobiles.

  • Il intègre l'interface utilisateur HTML5, CCS3, jQuery et jQuery dans un seul cadre pour créer des pages avec un script minimal.

  • Il comprend un système de navigation Ajax qui utilise des transitions de page animées.

Avantages de jQuery Mobile

  • Il est facile d'apprendre et de développer des applications si vous avez une connaissance des fonctionnalités HTML5, CSS3.

  • Il est compatible avec plusieurs plates-formes et plusieurs navigateurs, vous n'avez donc pas à vous soucier d'écrire un code différent pour chaque résolution d'appareil.

  • Vous pouvez créer le thème personnalisé à l'aide de ThemeRoller sans écrire la ligne de code. Il prend en charge tous les navigateurs HTML5.

  • Il utilise HTML5 avec JavaScript pour faciliter le développement d'applications Web.

  • Il est construit de manière à permettre au même code de passer automatiquement de l'écran mobile à l'écran du bureau.

Inconvénients de jQuery Mobile

  • Il existe des options limitées pour les thèmes CSS, de sorte que les sites qui sont construits par ces thèmes peuvent se ressembler.

  • Les applications développées à l'aide de jQuery Mobile sont plus lentes sur les mobiles.

  • Cela prend plus de temps lorsque vous combinez jQuery mobile avec d'autres frameworks mobiles.

  • Difficile de fournir un design visuel personnalisé complet.

  • Toutes les fonctionnalités d'un appareil ne sont pas accessibles par JavaScript dans un navigateur.

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

  • Inclure 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.

L'utilisateur peut interagir avec les pages jQuery Mobile, qui regroupe le contenu en vues logiques et pages vues. La vue de page peut être animée à l'aide de transitions de page. Plusieurs pages peuvent être créées à l'aide d'un document HTML et, par conséquent, il n'est pas nécessaire de demander le contenu au serveur.

Le tableau suivant montre les types de pages en détail.

Sr.No. Type et description
1 Une seule page

Une seule page est créée dans un document HTML en utilisant une méthode standard d'écriture d'un modèle.

2 Modèle multi-pages

Plusieurs pages peuvent être incluses dans le document HTML unique, qui se charge ensemble en ajoutant plusieurs divs avec data-role = "page" .

3 Page Dialogues

Les boîtes de dialogue modales ouvrent le contenu dans une superposition interactive au-dessus de la page.

Conventions, pas exigences

  • Les éléments d'attribut de rôle de données tels que l'en-tête, le pied de page, la page et le contenu sont utilisés pour fournir le format et la structure de base d'une page.

  • Pour les documents d'une seule page, l'encapsuleur de page était requis pour l'initialisation automatique est défini comme facultatif.

  • L'élément structurel peut être exclu pour une page Web avec une mise en page personnalisée.

  • Pour gérer les pages, le wrapper de page est injecté par le framework lorsqu'il n'est pas inclus par le balisage.

Prérécupérer des pages

En incluant l'attribut data-prefetch , nous pouvons pré-extraire les pages dans le DOM dans les modèles de page unique. Pour plus d'informations, cliquez ici .

Cache DOM

Lorsque la mémoire du navigateur est pleine dans DOM, cela ralentit le navigateur mobile ou peut se bloquer en raison du chargement de plusieurs pages. Il existe une méthode simple pour garder le DOM bien rangé -

  • Lorsqu'une page est chargée via ajax, cela indique de supprimer la page du DOM lorsque vous redirigez vers une autre page.

  • La page précédente que vous avez visitée peut être récupérée du cache lorsque vous la revisitez.

  • Au lieu de supprimer les pages, vous pouvez dire à jQuery mobile de le conserver dans DOM en utilisant la ligne suivante -

$.mobile.page.prototype.options.domCache = true;
  • Définissez l'option domCache sur true sur le plugin de page pour conserver toutes les pages du DOM, qui a été visité précédemment.

pageContainerElement.page({ domCache: true });

jQuery Mobile fournit un ensemble d'icônes intégrées, qui peuvent être utilisées avec des boutons, des boutons d'affichage de liste qui rendront les boutons plus attrayants.

Le tableau suivant répertorie certaines des icônes utilisées dans le framework jQuery Mobile.

Sr.No. Zone d'icônes et description
1 Jeu d'icônes

Il définit l'icône dans le bouton.

2 Icônes de positionnement

Il spécifie la position de l'icône dans le bouton.

3 Icône uniquement

Il n'affiche qu'une icône dans le bouton.

4 Ombre d'icône

Il ajoute une ombre d'icône dans votre bouton.

5 Suppression du cercle

Il supprime le cercle gris autour de l'icône.

6 Icônes noires ou blanches

Il change la couleur des icônes en noir ou blanc.

sept Combiner alt et nodisc

Il combine les classes alt et nodisc à l'icône.

Il permet de changer les valeurs de propriété qui se produisent sur une durée spécifiée et modifie le comportement d'un élément d'un état à un autre en appliquant différents styles pour chaque état.

Le tableau suivant répertorie certaines des transitions de page utilisées dans le framework jQuery Mobile -

Sr.No. Transition et description Pour les pages Pour les dialogues
1

fade

Vous pouvez faire en sorte que les éléments deviennent ou non visibles.

Fondu de la page Boîte de dialogue de fondu
2

flip

Retournez les éléments de l'arrière vers l'avant vers la page suivante.

Flip Page Boîte de dialogue Flip
3

pop

Vous pouvez créer une fenêtre contextuelle.

Page pop Boîte de dialogue pop
4

flow

Affichez la page suivante en gardant la page actuelle éloignée.

Page de flux Dialogue de flux
5

slide

Vous pouvez faire glisser la page de droite à gauche.

Page de diapositive Dialogue de diapositive
6

slidefade

Fait glisser la page de droite à gauche et s'estompe dans la page suivante.

Page Slidefade Boîte de dialogue Slidefade
sept

slideup

Fait glisser la page de bas en haut.

Page diapositive Dialogue glissé
8

slidedown

Fait glisser la page de haut en bas.

Page coulissante Boîte de dialogue coulissante
9

turn

Vous pouvez passer à la page suivante.

Tourner la page Tourner la boîte de dialogue
dix

none

Vous ne pouvez utiliser aucun effet de transition en utilisant cet attribut.

Aucune Page Aucun Dialogue

Définition de la transition et de la configuration globale

Par défaut, les pages auront fadetransition dans le cadre. Vous pouvez utiliser des transitions personnalisées en ajoutant ledata-transitionattribut au lien. Vous pouvez utiliser différents effets de transition par défaut pour la page en utilisantdefaultPageTransitionoption globalement. Pour les dialogues, vous pouvez utiliserdefaultDialogTransition option.

Transition de secours

Toutes les transitions prennent en charge les transformations 3D à l'exception de la transition de fondu. Les appareils qui ne prennent pas en charge la transformation 3D devront utiliser la transition en fondu. Certains navigateurs ne prennent pas en charge les transformations 3D pour chaque type de transition, vous pouvez donc utiliser lefade comme remplacement de transition par défaut.

Défilement maximum pour les transitions

Les transitions sont définies sur Aucune lorsque vous faites défiler depuis ou vers une page et la position de défilement sera trois fois la hauteur de l'écran de l'appareil. Parfois, vous pouvez être lent à répondre ou le navigateur peut se bloquer lorsque vous cliquez sur un élément de navigation; donc pour éviter cela, nous utilisons la position de défilement pour la transition en utilisantgetMaxScrollForTransition fonction.

Largeur maximale pour les transitions

Vous pouvez désactiver la transition lorsque la largeur de la fenêtre est supérieure à la largeur des pixels. Vous pouvez configurer la largeur maximale des transitions à l'aide du$.mobile.maxTransitionWidthoption globale, qui est définie sur false par défaut. Il prend des valeurs telles que la largeur de pixel ou la valeur fausse, et la transition sera définie sur aucune si ce n'est pas une valeur fausse lorsque la fenêtre est supérieure à la valeur spécifiée.

Transition de la même page

Vous pouvez ajouter les transitions à la page actuelle à l'aide du allowSamePageTransition option de widget de conteneur de page change() méthode.

Création de transitions personnalisées

Vous pouvez créer les transitions personnalisées dans la page à l'aide du $.mobile.transitionHandlers option qui élargit la sélection des transitions sur le site Web ou l'application.

Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu.

Le tableau ci-dessous montre les types de grilles en détail.

Sr.No. Type et description
1 la grille

Le système de grille mobile jQuery crée des mises en page via une série de lignes et de colonnes.

2 Boutons dans les grilles

Collection de bouton au format grille dans jQuery mobile.

3 Grille réactive personnalisée

Le style de grille de base peut être facilement étendu à la mise en page réactive personnalisée à l'aide de requêtes multimédias en CSS.

Un widget est un petit gadget ou contrôle de votre application mobile jQuery. Les widgets peuvent être très pratiques car ils vous permettent de mettre vos applications préférées sur votre écran d'accueil afin d'y accéder rapidement.

Le tableau suivant montre en détail les types de widgets.

Sr.No. Type et description
1 Boutons

Il spécifie un bouton cliquable qui comprend du contenu comme du texte ou des images.

2 Case à cocher

Les cases à cocher sont utilisées lorsque plusieurs options doivent être sélectionnées.

3 Radiobox

Les boutons radio sont utilisés lorsque parmi de nombreuses options, une seule option doit être sélectionnée.

4 Sélecteur de date

Il se concentre sur l'entrée pour ouvrir un calendrier interactif dans une petite superposition.

5 Pliant

Réductible vous permet de développer ou de réduire le contenu à chaque fois que vous cliquez dessus. Il est très utile pour les appareils mobiles, qui présentent un bref contenu.

6 Groupe de contrôle

Les groupes de contrôle fournissent un ensemble de boutons pour spécifier un bloc unique qui ressemble à un composant de navigation.

sept Filtrable

En utilisant l' attribut data-filter = "true" , vous pouvez filtrer les enfants de n'importe quel élément.

8 Interrupteur à levier

Flip Switch vous permet d'activer / désactiver ou de vrai / faux le commutateur en cliquant dessus pour une entrée de style booléen.

9 Listview

Le but du composant listview est de rendre un contenu complexe et personnalisé dans des listes.

dix Chargeur

JQuery Mobile propose différentes manières de charger des états sur un élément.

11 Navbar

Le widget de la barre de navigation est un ensemble de boutons qui vous relie à d'autres pages Web ou sections.

12 Panneaux

Les panneaux sont utilisés pour afficher les composants DOM dans la boîte.

13 Popups

Popup est une interface utilisateur qui apparaît dans une petite fenêtre pour afficher du texte, des images et d'autres contenus.

14 Rangeslider

Le widget Rangeslider vous fournit une paire de poignées vous permettant de sélectionner une plage de valeurs numériques.

15 Sélectionnez le menu

Un menu de sélection propose diverses options sous forme de liste déroulante, à partir de laquelle un utilisateur peut sélectionner une ou plusieurs options.

16 Glissière

Slider vous permet de choisir une valeur en faisant glisser la poignée du curseur.

17 Table

jQuery Mobile utilise le tableau pour représenter les données en termes de lignes et de colonnes, c'est-à-dire affiche les données dans un format tabulaire.

18 Onglets

Le widget onglets est l'extension du widget onglets jQuery ui, qui accepte toutes les méthodes et options.

19 Saisie de texte

La balise <input> est utilisée pour déclarer un élément d'entrée, un contrôle qui permet à l'utilisateur d'entrer des données.

20 Barre d'outils

Le widget de la barre d'outils mobile jQuery vous permet de créer des en-têtes et des pieds de page.

jQuery Mobile permet de créer des pages Web dynamiques. En utilisant des événements, vous pouvez configurer un processus événementiel sur les éléments, qui est déclenché par l'interaction de l'utilisateur telle que le clic de la souris, le survol de la souris sur un élément, la pression d'une touche sur le clavier, etc.

Le tableau suivant répertorie certains des événements pour les appareils mobiles, qui sont pris en charge par jQuery Mobile.

Sr.No. Description de l'évenement
1 Événements jQuery Mobile

Il répond à l'interaction de l'utilisateur lorsque l'utilisateur clique sur une certaine page ou passe la souris sur un élément, etc.

2 Événements jQuery Touch

Il fournit des événements tactiles lorsque l'utilisateur touche l'écran.

3 Événements de défilement jQuery

Il déclenche les événements de défilement lorsque l'utilisateur fait défiler vers le haut et vers le bas.

4 Événement d'orientation jQuery

Il déclenche l'événement d'orientation lorsque l'utilisateur fait pivoter l'appareil verticalement ou horizontalement.

5 Événements de la page jQuery

Il fournit les événements de page lorsque l'utilisateur masque, crée, charge ou décharge les pages.

La création de formulaires est facile et très flexible, qui sont construits avec une combinaison d'éléments de formulaire standardisés et de boutons.

Le tableau suivant montre les types de formulaire en détail.

Sr.No. Type et description
1 Formulaire de base

jQuery Mobile fournit un système de mise en page puissant, simple et polyvalent pour les formulaires, qui combine les styles de formulaire, les boutons de saisie et la prise en charge des curseurs.

2 Entrées de formulaire

La balise <input> est un contrôle qui permet à l'utilisateur de saisir des données.

3 Sélection de formulaire

Sous forme d'option, une liste déroulante est fournie pour le menu de sélection.

4 Curseurs de formulaire

Slider vous permet de choisir une valeur en faisant glisser la poignée du curseur.

5 Actualisation et initialisation automatique des éléments de formulaire

La méthode Refresh est utilisée pour mettre à jour le nouvel état du contrôle de formulaire par lui-même et met à jour le contrôle de formulaire avec JavaScript.

Il définit différents types de thème sur les boutons, les barres de navigation, les blocs, les liens, etc. Vous pouvez définir le thème à l'aide de l' attribut de thème de données .

Le tableau suivant décrit l'utilisation de la fonctionnalité de thème dans différents domaines qui est prise en charge par jQuery Mobile.

Sr.No. Fonctionnalité et description
1 Thèmes

Il propose deux types de thèmes différents tels que le thème «a» et le thème «b» pour personnaliser l'apparence de l'application.

2 Thème de l'en-tête et du pied de page dans les boîtes de dialogue

Définit le thème de l'en-tête et du pied de page dans la boîte de dialogue.

3 Boutons de thème, icônes et fenêtres contextuelles

Spécifie le thème des boutons, des icônes et des fenêtres contextuelles.

4 Boutons de thème dans l'en-tête et le pied de page

Affiche le thème des boutons dans l'en-tête et le pied de page.

5 Thème des barres de navigation

Applique le thème des barres de navigation dans l'en-tête ou le pied de page.

6 Panneaux de thème

Vous pouvez appliquer le thème pour le panneau.

sept Theming Bouton pliable et boutons Split

Affiche le thème des boutons réductibles et fractionnés.

8 Listes thématiques et listes réductibles

Affiche le thème des listes et des listes réductibles.

9 Formulaires pliables

Vous pouvez appliquer le thème aux formulaires.

Classes CSS jQuery

Vous pouvez utiliser différents types de classes CSS pour styliser les éléments comme décrit dans les sections ci-dessous.

Classes mondiales

Les classes suivantes peuvent être utilisées comme classes globales sur les widgets jQuery Mobile -

Sr.No. Classe et description
1

ui-corner-all

Il affiche les éléments aux coins arrondis.

2

ui-shadow

Il affiche l'ombre des éléments.

3

ui-overlay-shadow

Il affiche l'ombre de superposition des éléments.

4

ui-mini

Il affiche les plus petits éléments.

Classes de boutons

Le tableau suivant répertorie les classes de boutons utilisées avec des éléments d'ancrage ou de bouton -

Sr.No. Classe et description
1

ui-btn

Il spécifie que l'élément sera stylé comme bouton.

2

ui-btn-inline

Il montre le bouton comme élément en ligne qui économise l'espace nécessaire pour l'étiquette.

3

ui-btn-icon-top

Il place l'icône au-dessus du texte.

4

ui-btn-icon-right

Il place l'icône à droite du texte.

5

ui-btn-icon-bottom

Il place l'icône sous le texte.

6

ui-btn-icon-left

Il place l'icône à gauche du texte.

sept

ui-btn-icon-notext

Il montre la seule icône.

8

ui-btn-a|b

Il affiche la couleur du bouton ("a" sera la couleur d'arrière-plan par défaut c'est-à-dire gris et "b" changera la couleur d'arrière-plan en noir).

Classes d'icônes

Le tableau suivant répertorie les classes d'icônes utilisées avec les éléments d'ancrage ou de bouton -

Sr.No. Classe et description
1

ui-icon-action

Il montre l'icône d'action.

2

ui-icon-alert

Il affiche le point d'exclamation à l'intérieur d'un triangle.

3

ui-icon-arrow-d-l

Il spécifie vers le bas avec la flèche gauche.

4

ui-icon-arrow-d-r

Il spécifie vers le bas avec la flèche droite.

5

ui-icon-arrow-u-l

Il spécifie avec la flèche gauche.

6

ui-icon-arrow-u-r

Il spécifie avec la flèche droite.

sept

ui-icon-arrow-l

Il spécifie la flèche gauche.

8

ui-icon-arrow-r

Il spécifie la flèche droite.

9

ui-icon-arrow-u

Il spécifie la flèche vers le haut.

dix

ui-icon-arrow-d

Il spécifie la flèche vers le bas.

11

ui-icon-bars

Il montre les 3 barres horizontales les unes au-dessus des autres.

12

ui-icon-bullets

Il montre les 3 puces horizontales les unes au-dessus des autres.

13

ui-icon-carat-d

Il affiche le carat vers le bas.

14

ui-icon-carat-l

Il affiche le carat à gauche.

15

ui-icon-carat-r

Il affiche le carat à droite.

16

ui-icon-carat-u

Il affiche le carat à la hausse.

17

ui-icon-check

Il montre l'icône de coche.

18

ui-icon-comment

Il spécifie le commentaire ou le message.

19

ui-icon-forbidden

Il affiche l'icône d'interdiction.

20

ui-icon-forward

Il spécifie l'icône de transfert.

21

ui-icon-navigation

Il spécifie l'icône de navigation.

22

ui-icon-recycle

Il affiche l'icône de recyclage.

23

ui-icon-refresh

Il montre l'icône de rafraîchissement.

24

ui-icon-tag

Il indique l'icône de balise.

25

ui-icon-video

Il indique l'icône de la vidéo ou de la caméra.

Cours à thème

Il propose deux types de thèmes différents tels que le thème «a» et le thème «b» pour personnaliser l'apparence de l'application. Vous pouvez créer vos propres classes de thème en ajoutant une lettre témoin (az). Le tableau suivant répertorie les classes de thème qui sont spécifiées de la lettre a à z.

Sr.No. Classe et description
1

ui-bar-(a-z)

Il affiche la couleur de la barre, y compris les en-têtes, les pieds de page et les autres barres de la page.

2

ui-body-(a-z)

Il affiche la couleur du bloc de contenu, y compris la liste, les fenêtres contextuelles, les curseurs, les panneaux, les chargeurs, etc.

3

ui-btn-(a-z)

Il affiche la couleur du bouton.

4

ui-group-theme-(a-z)

Il affiche la couleur des groupes de contrôle, des vues de liste et des ensembles réductibles.

5

ui-overlay-(a-z)

Il affiche la couleur d'arrière-plan des conteneurs de popup, de boîte de dialogue et de page.

6

ui-page-theme-(a-z)

Il affiche la couleur des pages.

Classes de grille

Le tableau suivant répertorie les classes de grille utilisées avec une largeur égale, sans bordure, arrière-plan, marge ou remplissage.

Sr.No. Classe de grille Colonnes Largeurs de colonne Correspond à
1 ui-grid-solo 1 100% ui-block-a
2 ui-grid-a 2 50% / 50% ui-block-a | b
3 ui-grid-b 3 33% / 33% / 33% ui-bloc-a | b | c
4 ui-grid-c 4 25% / 25% / 25% / 25% ui-bloc-a | b | c | d
5 ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-bloc-a | b | c | d | e

Bouton

Il spécifie un bouton cliquable qui inclut du contenu comme du texte ou des images à l'aide de la classe ui-btn . Il est obsolète dans la version 1.4. Utilisez l' attribut ui-btn au lieu d'utiliser l'attribut data-role = "button" .

Le tableau suivant répertorie les éléments de bouton utilisés avec l'attribut data.

Sr.No. Attribut de données et description Valeur
1

data-corners

Il définit si le bouton doit contenir des coins arrondis ou non.

vrai | faux
2

data-icon

Il définit l'icône du bouton.

Par défaut, aucune icône
3

data-iconpos

Il définit la position de l'icône.

gauche | droite | top | bas
4

data-iconshadow

Il définit si l'icône du bouton doit contenir une ombre ou non.

vrai | faux
5

data-inline

Il définit si le bouton doit être en ligne ou non.

vrai | faux
6

data-mini

Il définit si le bouton doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
sept

data-shadow

Il définit si le bouton doit contenir une ombre ou non.

vrai | faux
8

data-theme

Il affiche la couleur du thème du bouton.

lettre (az)

Case à cocher

Le tableau suivant répertorie les éléments de case à cocher utilisés avec type = "checkbox".

Sr.No. Attribut de données et description Valeur
1

data-mini

Il définit si la case à cocher doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
2

data-role

Il arrête le style des cases à cocher en tant que boutons.

aucun
3

data-theme

Il affiche la couleur du thème pour la case à cocher.

lettre (az)

Pliant

Le tableau suivant répertorie les éléments pliables utilisés avec data-role = "collapsible" attribut.

Sr.No. Attribut de données et description Valeur
1

data-collapsed

Il indique si le contenu doit être fermé ou développé.

vrai | faux
2

data-collapsed-cue-text

Il affiche les commentaires des utilisateurs disposant d'un logiciel de lecture d'écran.

La valeur par défaut est la réduction du contenu
3

data-collapsed-icon

Il définit l'icône du bouton pliable.

L'icône par défaut est "plus"
4

data-content-theme

Il affiche la couleur du thème pour le contenu pliable.

lettre (az)
5

data-expanded-cue-text

Il affiche les commentaires des utilisateurs disposant d'un logiciel de lecture d'écran.

La valeur par défaut est l'expansion du contenu
6

data-expanded-icon

Il affiche le bouton réductible lorsque vous développez le contenu.

L'icône par défaut est "moins"
sept

data-iconpos

Il définit la position de l'icône.

gauche | droite | top | bas
8

data-inset

Il définit si le bouton pliable doit s'afficher avec des coins et une marge arrondis ou non.

vrai | faux
9

data-mini

Il définit si les boutons réductibles doivent s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
dix

data-theme

Il affiche la couleur du thème pour le bouton pliable.

lettre (az)

Ensemble pliable

Le tableau suivant répertorie les éléments d'ensemble réductibles utilisés avec le data-role = "collapsibleset" attribut.

Sr.No. Attribut de données et description Valeur
1

data-collapsed-icon

Il définit l'icône du bouton pliable.

L'icône par défaut est "plus"
2

data-content-theme

Il affiche la couleur du thème pour le contenu pliable.

lettre (az)
3

data-expanded-icon

Il affiche le bouton réductible lorsque vous développez le contenu.

L'icône par défaut est "moins"
4

data-iconpos

Il définit la position de l'icône.

gauche | droite | top | bas
5

data-inset

Il définit si le bouton pliable doit s'afficher avec des coins et une marge arrondis ou non.

vrai | faux
6

data-mini

Il définit si les boutons réductibles doivent s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
sept

data-theme

Il affiche la couleur du thème pour le bouton pliable.

lettre (az)

Groupe de contrôle

Le tableau suivant répertorie les éléments Controlgroup utilisés avec data-role = "controlgroup" attribut -

Sr.No. Attribut de données et description Valeur
1

data-exclude-invisible

Il définit s'il faut exclure les enfants invisibles dans l'affectation des coins arrondis.

vrai | faux
2

data-mini

Il définit si le groupe doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
3

data-theme

Il affiche la couleur du thème du groupe de contrôle.

lettre (az)
4

data-type

Il indique si le groupe doit s'afficher au format horizontal ou vertical.

horizontal | verticale

Dialogue

Le tableau suivant répertorie les éléments de dialogue utilisés avec data-dialog="true" attribut.

Sr.No. Attribut de données et description Valeur
1

data-close-btn

Il définit la position du bouton de fermeture.

gauche | droite | aucun
2

data-close-btn-text

Il définit le texte du bouton de fermeture.

texte
3

data-corners

Il définit si la boîte de dialogue doit s'afficher avec des coins arrondis ou non.

vrai | faux
4

data-dom-cache

Il indique si le cache DOM doit s'effacer ou non pour des pages individuelles.

vrai | faux
5

data-overlay-theme

Il définit la couleur de superposition de la page de dialogue.

lettre (az)
6

data-theme

Il définit la couleur du thème de la page de dialogue.

lettre (az)
sept

data-title

Il définit le titre de la page de dialogue.

texte

Renforcement

Le tableau suivant répertorie les éléments d'amélioration utilisés avec data-enhance="false" or data-ajax = "false" attribut.

Sr.No. Attribut de données et description Valeur
1

data-enhance

Vous pouvez styliser la page en définissant cet attribut sur "true". Vous ne pouvez pas styliser la page si elle est définie sur "false".

vrai | faux
2

data-ajax

Il indique si les pages doivent se charger depuis Ajax ou non.

vrai | faux

Barre d'outils fixe

Le tableau suivant répertorie les éléments de la barre d'outils utilisés avec data-position = "fixed" attribut.

Sr.No. Attribut de données et description Valeur
1

data-disable-page-zoom

Il définit si l'utilisateur est en mesure de mettre à l'échelle / zoomer la page ou non.

vrai | faux
2

data-fullscreen

Il définit que les barres d'outils doivent être positionnées en haut et / ou en bas.

vrai | faux
3

data-tap-toggle

Il indique si l'utilisateur peut activer ou non la visibilité de la barre d'outils sur les robinets.

vrai | faux
4

data-transition

Il montre un effet de transition lorsque vous appuyez ou cliquez sur l'élément.

slide | fondu | aucun
5

data-update-page-padding

Il met à jour le remplissage de la page en utilisant des événements de mise en page de redimensionnement, de transition et de mise à jour.

vrai | faux
6

data-visible-on-page-show

Il définit la visibilité de la barre d'outils lorsque la page parent est affichée.

vrai | faux

Basculer l'interrupteur à bascule

Le tableau suivant répertorie les éléments à bascule utilisés avec data-role = "flipswitch" attribut -

Sr.No. Attribut de données et description Valeur
1

data-mini

Il définit si le commutateur doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
2

data-on-text

Il définit le texte «on» sur le commutateur à bascule.

La valeur par défaut est "on"
3

data-off-text

Il définit le texte «off» sur l'interrupteur à bascule.

La valeur par défaut est "off"

Bas de page

Le tableau suivant répertorie les éléments de pied de page utilisés avec l' attribut data-role = "footer" -

Sr.No. Attribut de données et description Valeur
1

data-id

Il définit l'ID unique.

texte
2

data-position

Il définit si le pied de page doit être positionné en bas ou en ligne avec le contenu de la page.

en ligne | fixé
3

data-fullscreen

Il définit si le pied de page doit être positionné en bas et sur le contenu de la page ou non.

vrai | faux
4

data-theme

Il définit la couleur du thème du pied de page.

lettre (az)

Entête

Le tableau suivant répertorie les éléments d'en-tête utilisés avec data-role = "header" attribut.

Sr.No. Attribut de données et description Valeur
1

data-id

Il définit l'ID unique.

texte
2

data-position

Il définit si l'en-tête doit être positionné en bas ou en ligne avec le contenu de la page.

en ligne | fixé
3

data-fullscreen

Il définit si l'en-tête doit être positionné en bas et sur le contenu de la page ou non.

vrai | faux
4

data-theme

Il définit la couleur du thème de l'en-tête.

lettre (az)

Contributions

Le tableau suivant répertorie les éléments d'entrée utilisés avec type = "text|search|etc" attribut.

Sr.No. Attribut de données et description Valeur
1

data-clear-btn

Il définit si l'élément d'entrée doit contenir le bouton d'effacement ou non.

vrai | faux
2

data-clear-btn-text

Il définit le texte du bouton d'effacement.

texte
3

data-mini

Il définit si l'entrée doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
4

data-role

Il arrête de styliser les zones de saisie ou de texte en tant que boutons.

aucun
5

data-theme

Il définit la couleur du thème de l'élément d'entrée.

lettre (az)

Lien

Le tableau suivant répertorie les éléments de lien utilisés avec jQuery Mobile.

Sr.No. Attribut de données et description Valeur
1

data-ajax

Il indique si les pages doivent être chargées via Ajax ou non.

vrai | faux
2

data-direction

Il est utilisé pour la transition inverse.

inverser
3

data-dom-cache

Il indique si le cache DOM jQuery doit être clair ou non pour les pages.

vrai | faux
4

data-prefetch

Il est utilisé pour pré-extraire les pages dans le DOM.

vrai | faux
5

data-rel

Il spécifie le comportement du lien.

retour | dialogue | externe | apparaitre
6

data-transition

Il définit la transition d'une page à une autre.

fondu | flip | flux | pop | slide | slidedown | slidefade | slideup | tourner | aucun
sept

data-position-to

Il définit la position des boîtes contextuelles.

origine | sélecteur jQuery | la fenêtre

liste

Le tableau suivant montre les éléments de liste utilisés avec data-role = "listview" attribut.

Sr.No. Attribut de données et description Valeur
1

data-autodividers

Il divise la liste automatiquement.

vrai | faux
2

data-count-theme

Il définit la couleur du thème de l'élément count.

lettre (az)
3

data-divider-theme

Il définit la couleur du thème pour le séparateur de liste.

lettre (az)
4

data-filter

Il est utilisé pour filtrer les valeurs de la liste dans la zone de recherche.

vrai | faux
5

data-filter-placeholder

Il définit du texte dans la zone de recherche.

texte
6

data-filter-theme

Il définit la couleur du thème pour le filtre de recherche.

lettre (az)
sept

data-icon

Il fournit l'icône de la liste.

Par défaut, aucune icône
8

data-inset

Il définit si la liste doit s'afficher avec des coins et une marge arrondis ou non.

vrai | faux
9

data-split-icon

Il définit l'icône du bouton partagé.

L'icône par défaut est "arrow-r"
dix

data-split-theme

Il définit la couleur du thème pour le bouton divisé.

lettre (az)
11

data-theme

Il définit la couleur du thème de la liste.

lettre (az)

Élément de liste

Le tableau suivant montre les éléments d'élément de liste utilisés avec data-role = "listview" attribut.

Sr.No. Attribut de données et description Valeur
1

data-filtertext

Il est utilisé pour filtrer les valeurs de la liste à l'aide du texte dans la zone de recherche.

texte
2

data-icon

Il fournit l'icône de l'élément de liste.

Par défaut, aucune icône
3

data-role

Il définit le séparateur pour les éléments de liste.

séparateur de liste
4

data-theme

Il définit la couleur du thème de l'élément de liste.

lettre (az)

Navbar

Le tableau suivant répertorie les éléments de la barre de navigation utilisés avec data-role = "navbar" attribut.

Sr.No. Attribut de données et description Valeur
1

data-icon

Il fournit l'icône de l'élément de liste.

Par défaut, aucune icône
2

data-iconpos

Il définit la position de l'icône.

gauche | droite | top | bas | pas de texte

Page

Le tableau suivant répertorie les éléments de page utilisés avec data-role = "page" attribut.

Sr.No. Attribut de données et description Valeur
1

data-dom-cache

Il indique si le cache DOM doit s'effacer ou non pour des pages individuelles.

vrai | faux
2

data-overlay-theme

Il définit la couleur de superposition des pages de dialogue.

lettre (az)
3

data-theme

Il définit la couleur du thème de la page.

lettre (az)
4

data-title

Il fournit le titre de la page.

Par défaut, aucune icône
5

data-url

Il est utilisé pour mettre à jour l'URL.

URL

Apparaitre

Le tableau suivant répertorie les éléments contextuels utilisés avec data-role = "popup" attribut.

Sr.No. Attribut de données et description Valeur
1

data-corners

Il définit si la fenêtre contextuelle doit s'afficher avec des coins et une marge arrondis ou non.

vrai | faux
2

data-dismissible

Il définit si la fenêtre contextuelle doit être fermée en cliquant à l'extérieur ou non.

vrai | faux
3

data-history

Il définit si le popup doit afficher l'historique de l'élément lorsqu'il est ouvert.

vrai | faux
4

data-overlay-theme

Il définit la couleur de superposition de la boîte contextuelle.

lettre (az)
5

data-shadow

Il affiche l'ombre de la boîte contextuelle.

vrai | faux
6

data-theme

Il définit la couleur du thème pour la boîte contextuelle.

lettre (az)
sept

data-tolerance

Il définit les bords de la fenêtre.

30, 15, 30, 15

Bouton radio

Le tableau suivant répertorie les éléments de bouton radio utilisés avec type = "radio" attribut.

Sr.No. Attribut de données et description Valeur
1

data-mini

Il définit si le bouton doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
2

data-role

Il arrête le style des boutons radio en tant que boutons améliorés.

aucun
3

data-theme

Il définit la couleur du thème du bouton radio.

lettre (az)

Sélectionner

Le tableau suivant répertorie les éléments de sélection utilisés avec jQuery Mobile.

Sr.No. Attribut de données et description Valeur
1

data-icon

Il fournit l'icône de l'élément sélectionné.

La valeur par défaut est "arrow-d"
2

data-iconpos

Il définit la position de l'icône.

gauche | droite | top | bas
3

data-inline

Il définit si le bouton doit être en ligne ou non.

vrai | faux
4

data-mini

Il définit si select doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
5

data-native-menu

Il utilise un menu personnalisé lorsqu'il a été défini sur false.

vrai | faux
6

data-overlay-theme

Il définit la couleur de superposition pour le menu de sélection personnalisé.

lettre (az)
sept

data-placeholder

Il est utilisé pour définir un élément option de sélection non native.

vrai | faux
8

data-role

Il arrête le style des éléments sélectionnés en tant que boutons.

aucun
9

data-theme

Il affiche la couleur du thème pour les éléments sélectionnés.

lettre (az)

Glissière

Le tableau suivant répertorie les éléments de curseur utilisés avec type = "range" attribut.

Sr.No. Attribut de données et description Valeur
1

data-highlight

Il met en évidence le curseur.

vrai | faux
2

data-mini

Il définit si le curseur doit s'afficher dans une taille plus petite ou une taille normale.

vrai | faux
3

data-role

Il arrête le style des commandes de curseur en tant que boutons.

aucun
4

data-theme

Il affiche la couleur du thème du curseur.

lettre (az)
5

data-track-theme

Il affiche la couleur du thème de la piste du curseur.

lettre (az)