Il s'agit d'un cadre d'interface utilisateur basé sur jQuery Core et utilisé pour développer des sites Web ou des applications réactifs accessibles sur les appareils mobiles, tablettes et ordinateurs de bureau.
Il crée des applications Web de manière à ce qu'il fonctionne 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.
Il vous apporte des fonctionnalités sur toutes les plates-formes mobiles, tablettes et de bureau et ajoute des chargements de pages efficaces et une prise en charge plus large des appareils.
Il est construit sur jQuery Core et «écrire moins, faire plus» cadre d'interface utilisateur.
Il s'agit d'un logiciel open source, multi-plateforme et compatible avec tous les navigateurs.
Il est écrit en JavaScript et utilise les fonctionnalités de jQuery et jQueryUI pour créer des sites mobiles conviviaux.
Il intègre HTML5, CCS3, jQuery et jQueryUI 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 pages animées.
Il est facile d'apprendre et de développer des applications si vous connaissez les fonctionnalités HTML5, CSS3.
Il est compatible avec toutes les plates-formes et tous les navigateurs, vous n'avez donc pas à vous soucier d'écrire un code différent pour chaque résolution d'appareil.
Il utilise HTML5 avec JavaScript pour faciliter le développement d'applications Web.
Il est construit de telle manière qu'il permet au même code de passer automatiquement de l'écran mobile à l'écran du bureau.
Il existe des options limitées pour les thèmes CSS, de sorte que les sites peuvent se ressembler et sont construits par ces thèmes.
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 une conception visuelle personnalisée complète.
Custom Download : Pour télécharger une version personnalisée de la bibliothèque.
Latest Stable: Pour obtenir la dernière version stable de la bibliothèque jQuery Mobile.
Vous pouvez utiliser les fichiers 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>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h1>Header</h1>
</div>
<div data-role = "main" class = "ui-content">
//content goes here
</div>
<div data-role = "footer">
<h1>Footer</h1>
</div>
</div>Il crée l'en-tête en haut de la page.
Il est utilisé pour définir le contenu de la page.
Il crée un pied de page au bas de la page.
Il comprend un remplissage et une marge à l'intérieur du contenu de la page.
Plusieurs pages peuvent être incluses dans le seul document mobile jQuery qui se chargent ensemble en ajoutant plusieurs divs avec l'attribut data-role = "page".
Utilisez l'attribut data-dialog = "true" pour n'importe quelle page pour afficher une boîte de dialogue.
L'attribut de transition de données est utilisé pour appliquer les différentes transitions sur la boîte de dialogue telles que le glissement, le retournement, etc.
Le bouton peut être fermé à l'aide de l'attribut data-close-btn.
L'attribut data-rel = "back" est utilisé pour naviguer et revenir à la boîte de dialogue précédente.
Le thème peut être inclus dans la boîte de dialogue en ajoutant un thème de données d'attribut à tous les conteneurs tels que l'en-tête, le pied de page ou le contenu.
coin-interface-tout
Vous pouvez définir l'icône dans le bouton en utilisant la classe ui-icon et la classe ui-btn-icon-pos_name pour spécifier la position de l'icône.
Vous pouvez ajouter une ombre d'icône dans votre bouton en utilisant la classe ui-shadow-icon.
Vous pouvez supprimer le cercle gris autour de l'icône à l'aide de la classe ui-nodisc-icon.
Utilisez la classe ui-grid-solo dans la balise div pour créer une grille de colonne unique.
Ajoutez la classe ui-grid-a à la balise div et incluez deux conteneurs enfants avec les classes ui-block-a et ui-block-b pour créer une disposition à deux colonnes.
Utilisez la classe ui-grid-b dans la balise div pour créer une grille à trois colonnes.
Utilisez la classe ui-grid-c dans la balise div pour créer une grille à quatre colonnes.
Utilisez la classe ui-grid-d dans la balise div pour créer une grille à cinq colonnes.
Créez un bouton de base simple dans la page à l'aide de la classe ui-btn.
Créez un groupe de boutons verticalement et horizontalement dans la page à l'aide de l'attribut data-role = "controlgroup".
Vous pouvez créer un bouton plus petit dans la page en utilisant la classe ui-mini et afficher la position des icônes dans le bouton en utilisant la classe ui-btn-icon-ico_pos.
Utilisez l'attribut data-role = "date" dans le champ de saisie pour afficher au format jj / mm / aa.
Réductible peut être créé à l'aide de l'attribut data-role = "collapsible" d'un conteneur.
Vous pouvez afficher le groupe de contrôle à l'aide de l'attribut data-role = "controlgroup".
En utilisant l'attribut data-filter = "true", vous pouvez filtrer les enfants de n'importe quel élément.
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.
La Listview est utilisée pour afficher une liste d'éléments. L'attribut data-role = "listview" est inclus dans le conteneur pour afficher la liste dans une liste déroulante verticale.
Le widget Rangeslider vous fournit une paire de poignées vous permettant de sélectionner une plage de valeurs numériques.
Un événement répondra à l'interaction de l'utilisateur lorsque l'utilisateur clique sur une certaine page ou passe la souris sur un élément, etc.
Il se déclenche lorsque l'utilisateur tape sur un élément en utilisant l'id de la page pour spécifier l'événement et la méthode on () attache les gestionnaires d'événements.
Il se déclenche lorsque l'utilisateur fait glisser horizontalement plus de 30 pixels sur un élément en utilisant l'ID de la page pour spécifier l'événement et la méthode on () attache les gestionnaires d'événements.
L'événement de début de défilement se déclenche lorsque l'utilisateur commence à faire défiler la page et l'événement d'arrêt de défilement se déclenche lorsque l'utilisateur arrête de faire défiler la page en utilisant l'id de la page pour spécifier l'événement et la méthode on () attache les gestionnaires d'événements.
Vous pouvez déclencher l'événement d'orientation lorsque l'utilisateur fait pivoter l'appareil verticalement ou horizontalement à l'aide de l' événement orientationchange . Il utilise la propriété window.orientation pour spécifier si la fenêtre ou le périphérique est défini en orientation verticale ou horizontale.
Vous pouvez afficher la valeur du curseur sous forme d'info-bulle à l'aide de l'attribut data-popup-enabled = "true".
La bascule de colonne met les colonnes dans une cachette et permet à l'utilisateur de sélectionner les colonnes selon leur choix en utilisant l'attribut data-mode = "columntoggle".
Il représente les données au format horizontal en réduisant le tableau en représentation empilée à l'aide de l'attribut data-mode = "reflow".
Vous pouvez afficher les ensembles de données au format bandes et traits en utilisant les classes table-stripe et table-stroke.
Vous pouvez augmenter la qualité et la fonctionnalité des entrées de texte en définissant l'attribut data-extended = "true" dans le champ de saisie.
Vous pouvez changer la couleur de l'icône en noir en utilisant la classe ui-alt-icon. Par défaut, toutes les icônes sont blanches.
Il a été développé par l'équipe du projet jQuery en 2010 et écrit en JavaScript.
Il indique si les pages doivent être chargées via ajax ou non.