jQuery mobile et web(6)_jquery

Type d'événement mobile jquery pour les appareils mobiles.

　Événement 1.touch.

Appuyez rapidement sur l'écran et partez, comme pour une opération de clic complète.
Taphold Touchez l'écran et maintenez-le enfoncé pendant un certain temps.
​ ​ le balayage est déclenché lorsque le pixel de l'écran se déplace horizontalement de 30 pixels en 1 seconde.
​ ​ glisser vers la gauche Glisser vers la gauche
​ ​ glisser vers la droite, comme glisser vers la droite.

　2. Événement de changement de direction

La fonction d'événement de changement d'orientation est déclenchée lorsque l'orientation de l'appareil mobile change. Le deuxième paramètre de la fonction de rappel de l'événement renvoie un paramètre utilisé pour identifier l'orientation actuelle,
Ce paramètre a deux valeurs de retour : portrait (vertical) et landscarp (horizontal).

3. Événement de défilement,

scrollstart Cet événement est déclenché lorsque le défilement commence.
scrollend Cet événement est déclenché à la fin du défilement.

　4. Afficher/Masquer

L'événement Pagebeforeshow est déclenché avant que la vue ne commence à apparaître à l'écran via des effets d'animation.
Pagebeforehide déclenche un événement avant que la vue ne commence à se cacher grâce aux effets d'animation,
L'événement Pageshow est déclenché lorsque la vue est affichée à l'écran via des effets d'animation.
Le masquage de page est déclenché lorsque la vue est masquée par des effets d'animation.

Exemple de code :

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

　5. Simuler des événements de souris

vmouseover gère uniformément les événements tactiles et de survol de la souris.
vmousedown gère uniformément les événements tactiles et de pression de la souris.
vmousemove gère uniformément les événements tactiles et de mouvement de la souris.
vmouseup gère uniformément les événements de toucher et de relâchement des boutons de la souris.
vclick gère uniformément les événements tactiles et de clic de souris.
vmousecancel gère uniformément les événements tactiles et de sortie de la souris.

Aides à l'affichage des pages

　1.$.mobile.changePage

Modifiez l'effet de commutation entre deux vues grâce à la programmation fonctionnelle. Habituellement, l'effet de changement est personnalisé lorsque vous cliquez sur un lien hypertexte ou lorsque vous soumettez un formulaire.

　　 Grammaire : 　　

　$.mobile.changePage(to,options);
　　　　　　to 是必选参数， 可以传递的参数类型包括字符串，对象。
 　　　　　　options 可选，传递的是一个JSON 数据格式对象，
 　　　　　　用法： 以下实例将改变decondPage.html 的页面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

　Opération de soumission de formulaire　

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

　2.$.mobile.loaPage

La fonction principale est de charger des pages externes et de les insérer dans l'élément DOM de la page actuelle.
​​​$.mobile.loadPage(url,options);
L'URL est un paramètre obligatoire, transmettant une adresse URL absolue ou relative
Les options sont des paramètres facultatifs, transmettant un objet de données JSON.

　Exemple : 　

$.mobile.loadPage("secomdPage.html");
　　　　　提交表单并加载结果页面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

Stockage des données :

　 Méthode 1.jqmData() ;

Vous pouvez lier n'importe quelle donnée à l'élément.

　　$.mobile.jqmData(element,key,value)
Le paramètre element spécifie l'élément auquel les données doivent être liées
; La clé est le nom de l'attribut qui doit être lié aux données,
　　　Les données liées par valeur.

　Méthode 2.jqmRemoveData() :

Cette méthode consiste à supprimer les données liées à l'élément,
　　$.mobile.jqmRemoveData([nom])
Le nom est un paramètre facultatif qui spécifie quel attribut de données doit être supprimé. Si aucun paramètre n'est transmis, toutes les données de l'élément doivent être supprimées.

　 Méthode 3.jqmHasData()

Déterminez s'il existe des données liées sur l'élément,
　　　$.mobile.jqmHasData(element);
Le paramètre element est un élément DOM pour la vérification des données.

Aide au chemin d'adresse :

　1. Analyser l'adresse URL

La fonction $.mobile.path.parseUrl analyse une spécification d'URL et renvoie un objet contenant toutes les valeurs de paramètres, nous permettant d'accéder facilement aux propriétés des paramètres sur l'adresse Url.

　　La syntaxe de la fonction parseUrl

　　$.mobile.path.parseUrl(url);
Le paramètre url est une adresse URL relative ou absolue et le paramètre transmis est obligatoire.
La fonction parseUrl renvoie un objet contenant des propriétés riches.
Attribut : hash Description : Tout le contenu des caractères après le signe # est équivalent au hachage de l'emplacement
Attribut : host Description : Le nom d'hôte et le numéro de port de l'URL
Attribut : hostname Description : Renvoie le nom d'hôte contenant uniquement l'URL.
Attribut : href Description : renvoie l'adresse URL complète.
Attribut : pathname Description : Renvoie le chemin associé du fichier ou du répertoire
Attribut : port Description : Demande de renvoi du numéro de port de l'URL
Attribut : portocol Description : renvoie le protocole de l'adresse URL de la requête, tel que http https
Attribut : recherche Description : Les paramètres de la requête après "?" dans l'adresse de retour
Attribut : autorité Description : renvoie l'adresse composée du nom d'utilisateur, du mot de passe, du nom d'hôte et du numéro de port,
Attribut : directory Description : Renvoie le chemin du répertoire de l'adresse URL demandée,
Attribut : domain Description : Renvoie le chemin composé du protocole protocol et de l'autorité
Attribut : nom de fichier Description : Renvoie le nom du fichier Url demandé
Attribut : hrefOfHash Description : Renvoie le chemin de l'URL qui ne contient pas la valeur de hachage.
Attribut : hrefOfSearch Description : renvoie le chemin de l'URL qui ne contient pas de paramètres de requête ni de valeurs de hachage.
Attribut : password Description : Renvoie le mot de passe dans l'URL de la requête, tel que le mot de passe du protocole FTP.
Attribut : nom d'utilisateur Description : Renvoie le nom d'utilisateur dans l'URL de la requête, tel que le nom d'utilisateur du protocole ftp.

chargement afficher/masquer

La méthode pour afficher la boîte de dialogue de chargement est
　　　$.mobile.showPageLoadingMse();
La méthode pour masquer la boîte de dialogue de chargement est
　　　$.mobile.hidePageLoadingMse();

3 avantages de JQuery Mobile et HTML5

1. Démarrez vite et supportez une itération rapide : En un peu plus d'une semaine, en lisant la documentation de JQuery Mobile et le livre JQuery Mobile publié par O'Reilly, j'ai réalisé une version préliminaire de l'application qui fonctionne. Je n'avais aucune expérience en développement HTML5/JQuery Mobile avant cela. Par rapport à Android et iOS, la création de votre interface utilisateur et de votre logique à l'aide de JQuery Mobile et HTML5 sera beaucoup plus rapide que la création sous le système natif.

Annotation : Système natif : système d'exploitation d'origine, tel que le système natif Android, qui est un système non modifié publié par Google. Dans cet article, les applications natives font référence aux programmes développés directement à l'aide de l'API fournie par le système, correspondant aux programmes développés par JQuery Mobile.

J'ai trouvé que l'interface Builder d'Apple avait une courbe d'apprentissage abrupte, et que l'apprentissage du système de mise en page alambiqué d'Android prenait également beaucoup de temps. De plus, connecter une vue de liste à une source de données distante et avoir une belle apparence en utilisant du code natif est assez compliqué (ListView sur Android, UITableView sur iOS, j'ai pu le faire avec mes connaissances existantes en JavaScript et HTML/CSS). . Implémentez rapidement la même fonction sans apprendre de nouveaux concepts abstraits tels que l'adaptateur, le délégué, etc. Vous pouvez simplement écrire du code JQuery.

2. Évitez le processus d'approbation fastidieux de l'App Store et la douleur du débogage et de la création : le processus le plus pénible de développement d'applications pour téléphones mobiles, en particulier pour les téléphones mobiles iOS, consiste à obtenir l'approbation de l'App Store d'Apple. Pour qu'une application native soit disponible pour les utilisateurs iOS, vous devez attendre un processus assez long (cela peut prendre des jours, voire des semaines). Non seulement la première version d’un programme est une tribulation, mais chaque mise à niveau ultérieure l’est aussi. Cela complique le processus d’assurance qualité et de publication et ajoute du temps supplémentaire. Puisqu'une application JQuery Mobile n'est qu'une application web, elle hérite des avantages de tous les environnements web : lorsque les utilisateurs chargent votre site, ils sont immédiatement « mis à niveau » vers la dernière version. Les bugs peuvent être corrigés et de nouvelles fonctionnalités ajoutées immédiatement. Même dans le système Android - les exigences du marché des applications sont beaucoup plus souples que dans l'environnement Apple, c'est également une bonne chose d'effectuer des mises à niveau de produits à l'insu des utilisateurs.

Un autre avantage est qu'il sera plus facile de publier une version bêta ou de test. Dites simplement à l'utilisateur d'ouvrir votre URL dans son navigateur et c'est tout ! Il n’est pas nécessaire de considérer le DRM fou d’iOS, ni l’APK nécessaire d’Android.

3. Prend en charge le développement multiplateforme et multi-appareils : un énorme avantage est que mon application fonctionne immédiatement sur Android et IOS, ainsi que sur d'autres plates-formes. En tant que développeur indépendant, maintenir la base de code pour différentes plates-formes est une entreprise énorme. Écrire des applications mobiles de haute qualité pour une seule plate-forme mobile nécessite un travail à temps plein, et faire des choses similaires de manière répétée pour chaque plate-forme nécessite beaucoup de ressources. La possibilité pour l’application de fonctionner à la fois sur les appareils Android et iOS est un énorme bonus pour moi.

Pour aller plus loin, en particulier avec les appareils exécutant différentes versions d'Android, qui sont de toutes tailles et de toutes formes, il est très important de donner à votre application une belle apparence sur les téléphones présentant une grande variété de résolutions d'écran. Pour les développeurs Android exigeants, la configuration des divisions d'écran en fonction de la taille de l'écran (zoom de complètement réduit à maximisé) peut prendre beaucoup de temps de développement. Étant donné que le navigateur le restituera de la même manière sur chaque appareil, vous n'avez pas à vous soucier de cet aspect.