web-dev-qa-db-fra.com

jQuery Mobile pour mobile et bureau?

Je développe une application web. Back-end MySql/PHP et front-end HTML/jQuery.

Je voulais utiliser le framework jQuery UI.

Maintenant, voyez que jQuery Mobile est sorti, et je veux rendre l'application accessible aux appareils mobiles autant que possible.

J'ai googlé, mais je n'ai pas trouvé de réponse de qualité.

Puis-je faire en sorte que tout fonctionne avec le même code si j'utilise jQuery Mobile?

Je voudrais qu'il montre les widgets mobiles si on y accède depuis le navigateur mobile.
Mais utiliser les widgets jQuery UI est accessible à partir du navigateur du bureau.

Est-ce possible simplement en utilisant jQuery Mobile et son balisage, ou je dois écrire le front-end pour mobile (jQuery Mobile) et bureau (jQuery UI) séparément?

Autrement dit, jQuery Mobile peut-il "se replier" automatiquement sur l'interface utilisateur jQuery s'il est accessible à partir du navigateur du bureau.

44
ZolaKt

Je pense que cela dépend en grande partie de ce que vous voulez faire et des fonctionnalités que vous essayez de capturer. Si vous voulez qu'une page Web se comporte d'une certaine manière sur mobile et sur le même bureau, alors avec un codage/test minutieux, vous serez d'accord avec jquery.mobile.

Si vous consultez le CSS pour jquery.mobile (version non compressée), vous pouvez réellement modifier le code directement pour afficher les éléments HTML comme vous le souhaitez pour des tailles d'écran particulières. Sélectionnez simplement celui pour les tailles de bureau/grand écran à l'échelle appropriée.

Selon ce que vous essayez d'accomplir en termes de votre version mobile, je vérifierais également jQTouch - qui permet des fonctionnalités spécifiques au mobile, telles que "tap" (au lieu de "click" "), à titre d'exemple - mais dispose également d'une option de compatibilité avec les ordinateurs de bureau, de sorte qu'il revient pour les navigateurs de bureau.

Une note, avec l'une ou l'autre de ces bibliothèques, vous aurez toujours besoin de la bibliothèque racine jquery.

J'espère que cela t'aides.

26
TNC

Tout d'abord, vous devrez considérer que les flux de travail pour mobile et ordinateur de bureau diffèrent considérablement. Essayer de basculer entre la version de bureau et la version mobile ne sera pas seulement un basculement entre les ressources.

Deuxièmement, les deux cadres d'interface utilisateur diffèrent considérablement dans la façon dont ils sont utilisés. jQuery UI est une collection de widgets que vous pouvez invoquer quand vous le souhaitez et où vous le souhaitez, c'est dans une bibliothèque de sens (ish) avec un framework CSS le soutenant. jQuery mobile fonctionne assez différemment cependant, par défaut, c'est un framework basé sur le balisage et pour le mettre en place et le faire fonctionner, il ne vous oblige pas à écrire même 1 ligne de Javascript.

Je vous conseille de considérer la couche de données comme votre code commun et le côté client comme 2 travaux complètement séparés. Personnellement, j'ai réussi à créer des applications en utilisant les services Web courants REST. J'utilise l'interface utilisateur jQuery pour consommer les services Web et créer des mashups pour le côté client. J'ai ensuite pour la version mobile consommer les services Web côté serveur pour produire des pages html jQuery-mobile à utiliser sur mobile.

Notez également que la génération de code HTML dynamique côté client à l'aide de jQuery Mobile vous causera très certainement d'énormes maux de tête. Jusqu'à ce que le projet arrive à maturité, je ne l'utiliserais que pour améliorer les cadres de balisage hautement sémantique. Créez une bonne couche de données solides et le reste sera très simple :)

26
martin

Voici le code source complet: https://github.com/ti-dev/Scrum-it pour un Scrum Board open source conçu pour les appareils de bureau et Apple iPad . Il est donc possible de combiner ces deux mondes dans une seule page Web.

6
TIM