jquery mobile et web(5)_jquery

Liste commandée

 　　<div data-role="content">
　　　　<ol data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ol>
 　　</div>

Liste en lecture seule

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

Liste des boutons séparables

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

Contient la liste du nombre de bulles

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

Options de configuration.

Lorsque jquery Mobile démarre, il déclenchera un événement mobileinit sur l'objet document. Nous pouvons remplacer la fonction correspondante par défaut via cet événement. Configurez divers paramètres d'attribut.

Comment l'utiliser :

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

Fournir aux développeurs un objet : $.mobile Le but de cet objet est de configurer diverses options et configurations par défaut.

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

　　Options configurables :

1.ns

Type : Chaîne, la valeur par défaut est une chaîne non vide.
Utilisation : $.mobile.ns="monespace de noms"
Description : personnalisez l'espace de noms et évitez les espaces de noms.

2.autolinitializePage

Type : type booléen, la valeur par défaut est vraie.
Utilisation : $.mobile.autoInitializePage = false
Description : Par défaut, lorsque l'élément DOM de la page est prêt, le programme chargera automatiquement la fonction $.mobile.initializePage si elle est définie sur

faux

La page ne sera pas créée et restera masquée.

3.subPageUrlKey

Type : chaîne, la valeur par défaut est ui-page.

Utilisation : $.mobile.subPageUrlkey = "page"

Description : Modifiez le nom du paramètre clé de la vue jQuery Mobile dans l'adresse URL. Lorsque le paramètre sélectionné est modifié en subPageUrlKey = "page", l'adresse URL

.

sera remplacé par

　　　example.html?page=subpage.

4.activePageClass

Type : chaîne, la valeur par défaut est ui-page-active

Utilisation : $.mobile.activePageClass = « ui-ns-page-active ».

Description : La fonction principale est de personnaliser le style CSS d'affichage de la page d'état actif et de l'état de transition.

5.activeBtnClass

Type : chaîne, la valeur par défaut est ui-btn-active

Utilisation : $.mobile.activeBtnClass = "ui-ns-page-active"

Description : La fonction principale de cette option est de personnaliser le style de la fille active.

6.ajaxEnabled

Type : valeur booléenne, la valeur par défaut est vraie

Utilisation : $.mobile.ajaxEnabled = false

Description : définissez s'il faut utiliser Ajax pour charger la page ou soumettre des données lorsque vous cliquez sur une connexion ou lorsque vous soumettez un formulaire ou un bouton.

　7.hashListeningEnabled

Type : valeur booléenne, la valeur par défaut est vraie

Utilisation : $.mobile.hashListeningEnabled = false

Description : définissez s'il faut surveiller et traiter automatiquement les modifications de location.hash. Si la valeur est définie sur false, vous pouvez utiliser des méthodes manuelles pour traiter les modifications de hachage, ou simplement utiliser la connexion

L'adresse sera redirigée.

8.defaultPageTransition

Type : chaîne, la valeur par défaut est slide

Utilisation : $.mobile.defaultPageTransition = « fondu »

Description : Ce paramètre d'option définit principalement l'effet par défaut du changement de page. S'il est défini sur aucun, il n'y aura aucun effet lors du changement de page. Le paramètre facultatif slideup (glisser vers la gauche et la droite)
.

Slideup (glisser de bas en haut) slidedown (de haut en bas) pop (du centre)

9.touchOverflowEnabled

Type : valeur booléenne, la valeur par défaut est fausse

Utilisation : $.mobile.touchOverflowEnabled = true

Description : s'il faut utiliser la fonction de défilement native de l'appareil.

　10.defaultDialogTransition

Type : chaîne, la valeur par défaut est pop

Utilisation : $.mobile.defaultDialogTransition = "none"

Description : définissez l'effet contextuel de la boîte de dialogue Ajax. Si la valeur est définie sur aucun, il n'y aura pas d'effet excessif.

　11.minScrollBack

Type : Chaîne, la valeur par défaut est 150

Utilisation : $.mobile.minScrollBack = « 200 »

Description : La fonction de mémoire de position de défilement ne sera déclenchée que lorsque le défilement dépasse la hauteur définie.

　12.loadingMessage

Type : StringLa valeur par défaut est en cours de chargement

Utilisation : $.mobile.loadingMessage = "Chargement"

Description : définissez le contenu du texte de l'état de chargement de la page. Si la valeur est false, rien ne sera affiché.

　13.pageLoadErrorMessage

Type : chaîne, la valeur par défaut est Erreur de chargement de la page

Utilisation : $.mobile.pageLoadErrorMessage = "Échec du chargement de la page"

Description : Définissez le contenu textuel de l'invite affichée lorsque la demande de page Ajax échoue

14.gradeA

Type : valeur booléenne, la valeur par défaut est la valeur de $.support.mediaquery

Utilisation : $.mobile.gradeA

Description : True sera renvoyé lorsque le navigateur remplit toutes les conditions prises en charge

.

3 inconvénients de JQuery Mobile et HTML5

1. Fonctionne plus lentement que les applications natives : le plus gros inconvénient à mon avis est que même sur les derniers matériels Android et iOS (téléphones Android Tegra 2 double cœur, tablettes iPad2 double cœur), les applications JQuery Mobile sont nettement plus lentes. 🎜>

Dans les programmes natifs. Surtout sur Android, le navigateur est plus lent et plus bogué que sur iOS (même si Google est une entreprise axée sur le Web). Je n'ai pas testé mon programme sur des appareils Android plus anciens, peut-être qu'il ne fonctionnera pas du tout (par exemple Android G1). Je pense qu'au cours des 12 à 24 prochains mois, la vitesse du matériel s'améliorera rapidement (par exemple, les appareils quadricœurs seront bientôt disponibles en 2011) et les performances ne seront peut-être pas un problème de sitôt. Mais aujourd'hui, c'est vraiment un inconvénient. Si vous vous concentrez uniquement sur iOS, vous pouvez vous attendre à des performances de navigateur, au moins il est fiable à cet égard (contrairement à Android, BlackBerry, etc.)

2. Bizarre (développement multi-navigateur, multi-plateforme) : JQuery Mobile est encore une version bêta, j'ai donc rencontré beaucoup de bugs. Cela dit, l'équipe JQuery continue de répondre activement aux problèmes soulevés sur GitHub. Je pense que l’un des plus gros problèmes est le comportement étrange des différents navigateurs sur différentes plates-formes mobiles. Cette question a toujours été critiquée. L'application peut paraître un peu bizarre - même si je pense que l'équipe JQuery Mobile a fait un excellent travail avec les widgets et les thèmes, elle est très différente des applications natives. On ne sait pas quel impact ce problème a sur les utilisateurs, mais il faut en être conscient.

3. Capacités limitées par rapport aux programmes natifs : De toute évidence, JavaScript exécuté dans le navigateur ne peut pas accéder pleinement à de nombreuses fonctionnalités de l'appareil. Un exemple typique est la caméra. Cependant, des outils comme PhoneGap peuvent aider à résoudre de nombreux problèmes courants. J'ai en fait commencé à déployer plusieurs versions de mon application sur iOS et Android via PhoneGap, en utilisant les liaisons natives de Facebook, et je suis impressionné par les résultats. J'écrirai mon expérience d'utilisation de PhoneGap dans un prochain blog.