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