Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

Caractéristiques des méthodes par catégorie

Tutoriel publié le 29 Décembre 2011 et mis à jour le 20 Janvier 2012

jQuery Mobile propose plusieurs méthodes et propriétés sur l'objet $.mobile pour les utiliser dans vos applications.

$.mobile.changePage
$.mobile.loadPage
jqmData jqmRemoveData
$.mobile.showPageLoadingMsg
$.mobile.hidePageLoadingMsg
$.mobile.fixedToolbars.show
$.mobile.fixedToolbars.hide
$.mobile.path.parseUrl
$.mobile.path.makePathAbsolute
$.mobile.path.makeUrlAbsolute
$.mobile.path.isSameDomain
$.mobile.path.isRelativeUrl
$.mobile.path.isAbsoluteUrl
$.mobile.base
$.mobile.silentScroll
$.mobile.activePage

`$.mobile.changePage` (méthode)

Changer par programmation la transition d'une page à une autre. Cette méthode est utilisée en interne pour le chargement et la transition d'une page qui survient losrqu'on clique sur un lien ou lorsqu'on soumet un formulaire, à condition que ces fonctionnalités soient activées.

`·` Arguments

to (string ou object, obligatoire)
- String : URL absolut ou relative. ("about/us.html")
- Object : une collection d'objet jQuery. ($("#about"))
options (object, facultatif)
- Propriétés :
  - allowSamePageTransition (boolean, par défaut : false) Par défaut, changePage() ignore les requêtes pour changer la page actuellement active. Définir cette option à true, permet d'exécuter la requête. Les développeurs doivent noter que certains transitions de page suppose que le fromPage et le toPage d'une requête changePage soient différentes, de sorte qu'elles ne puissent pas s'animer comme prévu. Les développeurs sont responsables pour fournir soit une propre transition, ou d'éteindre cette transition pour ce cas spécifique.
  - changeHash (boolean, par défaul : true) Décide si le hash dans la barre d'emplacement doit être mis à jour.
  - data (object ou string, par défaut : undefined) Les données à envoyer avec une requête Ajax d'une page.
    - Utilisé uniquement lorsque l'argument 'to' de changePage() est une URL.
  - dataUrl (string, par défaut : undefined) L'URL à utiliser lors de la mise à jour de location du navigateur à la fin du changePage. S'il n'est pas spécifié, la valeur de l'attribut data-url de l'élément page est utilisée.
  - pageContainer (jQuery collection, par défaut : $.mobile.pageContainer) Indique l'élément qui doit contenir la page.
  - reloadPage (boolean, par défaut : false) Force le rechargement d'une page, même si elle est déjà dans le DOM du conteneur de la page.
    - Utilisé uniquement lorsque l'argument 'to' de changePage() est une URL.
  - reverse (boolean, par défaut : false) Décide dans quelle direction la transition se déroulera lors de l'affichage de la page.
  - showLoadMsg (boolean, par défaut : true) Décide ou non d'afficher le message de chargement lors du chargement des pages externes.
  - role (string, par défaut : undefined) La valeur du data-role à utiliser lors de l'affichage de la page. Par défaut, il est indéfini ce qui signifie qu'il s'appuit sur la valeur du @data-role défini sur l'élément.
  - transition (string, par défaut : $.mobile.defaultPageTransition) La transition à utiliser lors de l'affichage de la page.
  - type (string, par défaut : "get") Spécifie la méthode ("get" ou "post") à utiliser lors d'une requête d'une page.
    - Utilisé uniquement lorsque l'argument 'to' de changePage() est une URL.

Exemples :

/**
 * transition vers la page "about us",
 * avec une transition de type "slideup".
 */
	$.mobile.changePage( "about/us.html", { transition: "slideup"} );	

	/**
	 * transition vers la page "search results",
	 * en utilisant les données data d'un formulaire
	 * ayant pour ID "search".
	 */
	$.mobile.changePage( "searchresults.php", {
		type: "post", 
		data: $("form#search").serialize()
	});		

	/**
	 * transition vers la page "confirm",
	 * via une transition de type "pop",
	 * et sans suivi dans l'historique.
	 */
	$.mobile.changePage( "../alerts/confirm.html", {
		transition: "pop",
		reverse: false,
		changeHash: false
	});

`$.mobile.loadPage` (méthode)

Charge une page externe, améliore son contenu et l'insére dans le DOM. Cette méthode est appelée en interne par la fonction changePage() lorsque son premier argument est une URL. Cette fonction n'affecte pas la page active en cours, cela peut être utilisé pour charger les pages en arrière plan. La fonction retourne un objet "deferred promise" qui sera résolu (resolve) après l'amélioration et l'insertion de la page dans le document.

`·` Arguments

url (string ou object, obligatoires) Une URL relative ou absolue.
options (object, facultatif)
- Propriétés :
  - data (object ou string, par défaut : undefined) Les données à envoyer avec une requête Ajax d'une page.
  - loadMsgDelay (number (in ms), par défaut : 50) le délai avant que le message de chargement soit affiché. Cette disposition vise à laisser du temps pour qu'une page qui a déjà été visité, soit récupéré depuis le cache, sans voir apparaitre un message de chargement.
  - pageContainer (jQuery collection, par défaut: $.mobile.pageContainer) Indique l'élément qui doit contenir la page après son chargement.
  - reloadPage (boolean, par défaut : false) Force le rechargement d'une page, même si elle est déjà dans le DOM du conteneur de la page.
  - role (string, par défaut : undefined) La valeur du data-role à utiliser lors de l'affichage de la page. Par défaut, il est indéfini ce qui signifie qu'il s'appuit sur la valeur du @data-role défini sur l'élément.
  - type (string, par défaut : "get") Spécifie la méthode ("get" ou "post") à utiliser lors d'une requête d'une page.

Exemples :

	/**
	 * charge la page "about us" dans le DOM
	 */
	$.mobile.loadPage( "about/us.html" );	

	/**
	 * charge la page "search results",
	 * en utilisant les données data d'un formulaire
	 * ayant pour ID "search"
	 */
	$.mobile.loadPage( "searchresults.php", {
		type: "post", 
		data: $("form#search").serialize()
	});

`jqmData(), jqmRemoveData()` (méthode)

Lorsque vous travaillez avec jQuery Mobile, jqmData et jqmRemoveData devrait être utilisée à la place des méthodes de base de jQuery data et removeData (à noter que cela inclut $.fn.data, $.fn.removeData et les utilitaires $.data, $.removeData et $.hasData), car ils les intègrent automatiquement pour obtenir et définir des attributs de données d'espace de nommage (même si aucun espace de nommage est en cours d'utilisation).

`·` Arguments :

Voir les méthodes jQuery data et removeData

Remarque : L'appel de jqmData() sans argument retournera undefined. Ce comportement est sujet à changement dans les futures versions.

`·` Aussi :

Lors de la recherche d'éléments par leur attribut data jQuery Mobile, veuillez utiliser le sélecteur :jqmData(), car il intégre automatiquement les attributs de données d'espace de nommage dans la recherche quand ils sont en utilisés. Par exemple, au lieu d'appeler $("div[data-role='page']"), vous devez utiliser $("div:jqmData(role='page')"), qui en interne retrouve $("div[data-"+ $.mobile.ns +"role='page']") sans vous obliger manuellement à concaténer un espace de nommage dans votre sélecteurs.

`$.mobile.showPageLoadingMsg` ()

Affiche le message de chargement de page, qui est configurable via $.mobile.loadingMessage.

Exemple :

/**
 * Affiche le message de chargement de page
 */
$.mobile.showPageLoadingMsg();

`$.mobile.hidePageLoadingMsg` ()

Masque le message de chargement de page, qui est configurable via $.mobile.loadingMessage.

Exemple :

/**
 * Masque le message de chargement de page
 */
$.mobile.hidePageLoadingMsg();

`$.mobile.fixedToolbars.show` (méthode)

Méthode utile pour afficher l'entête et/ou le bas de page fixes de la page active en cours au sein de la fenêtre. Notez que les entêtes/pieds de page fixes ne sont jamais vraiment caché. Le basculement de l'état afficher/masquer de la barre d'outils est vraiment basculer s'ils sont oui ou non alignés dans le contenu de la page, ou affichés dans la fenêtre comme s'ils étaient fixes.

`·` Arguments

immediately (boolean, facultatif) Si c'est à true, n'importe quel entête ou pied de page fixe pour la page active en cours est affiché immédiatement dans la fenêtre. Si c'est à false ou non défini, l'entête/pied de page fixe apparaîtra avec l'effet fade-in après un délai de 100 millisecondes. Notez que d'autres événements tels que l'événement resize ou scroll du document peut entraîner un délai supplémentaire avant le début de l'animation de l'affichage de l'entête/pied de page.

Exemple :

/**
 * Affiche entête/pied de page fixe avec une animation de type "fade".
 */
$.mobile.fixedToolbars.show();	

/**
 * Affiche entête/pied de page fixe immédiatement.
 */
$.mobile.fixedToolbars.show(true);

`$.mobile.fixedToolbars.hide` (méthode)

Méthode utilitaire pour masquer l'entête et/ou le bas de la page fixes de la page active en cours.

`·` Arguments

immediately (boolean, facultatifl) Si c'est à true, n'importe quelle entête ou pied de page fixé pour la page active en cours est immédiatement placé (après le flux) avec le contenu de la page, ce qui signifie que cela permet de faire défiler avec le contenu et ne sera visible que lorsque vous regardez le haut ou le bas de la page dans la fenêtre. Si c'est à false ou indéterminée, l'entête/pied de page fixe disparaîtra avec l'effet fade-out après un délai de 100 millisecondes. Notez que d'autres événements tels que l'événement resize ou scroll du document peut entraîner un délai supplémentaire avant le début de l'animation du masquage de l'entête/pied de page.

Exemple :

/** 
 * Masque entête/pied de page fixe avec une animation de type "fade".
 */
$.mobile.fixedToolbars.hide();	

/** 
 * Masque entête/pied de page fixe immédiatement.
 */
$.mobile.fixedToolbars.hide(true);

`$.mobile.path.parseUrl` (méthode)

Une méthode utile pour analyser une URL et ses variantes relatives à un objet qui rend l'accès à des composants de l'URL facilement. Lors de l'analyse des variantes relatives, l'objet résultant contiendra les valeurs vide pour les composants manquants (comme le protocole, l'hôte, etc...). Aussi, lors de l'analyse des URL qui n'ont pas authority, tels que : urls, la propriété pathname de l'objet contiendra les données après les deux points du protocol/scheme.

`·` Arguments

url (string, obligatoire) Une URL relative ou absolue.

`·` Valeur retournée

Cette fonction retourne un objet qui contient les différentes composantes de l'URL de type strings. Les propriétés de l'objet imitent l'objet location du navigateur :
hash
- Le composant fragment de l'URL, y comprisle caractère de séparation '#'.
host
- L'hôte et le numéro de port de l'URL.
hostname
- Le nom de l'hôte dans l'URL.
href
- L'URL d'origine qui a été analysée.
pathname
- Le chemin du fichier ou du répertoire référencé par l'URL.
port
- Le port spécifié dans l'URL. La plupart des URL qui dépendent du par défaut pour le protocole utilisé, cela peut donc être une chaîne vide pour la plupart du temps.
protocol
- Le protocole de l'URL, y comprisle caractère de séparation ':'.
search
- Le composant query de l'URL y compris le caractère '?'.
  
  Mais il contient aussi des propriétés supplémentaires qui fournissent des accès à des composants supplémentaires ainsi que certains formulaires courant d'URL accès pour les développeurs :
authority
- Les composants username, password et host de l'URL
directory
- Le composant directory du chemin d'accès sans le nom du fichier.
domain
- Les composants protocol et authority de l'URL.
filename
- Le nom du fichier dans le composant pathname sans le répertoire.
hrefNoHash
- L'URL d'origine moins le composant fragment (hash).
hrefNoSearch
- L'URL d'origine moins les composants query (search) et fragment (hash).
password
- Le mot de passe contenu dans le composant authority.
username
- Le nom d'utilisateur contenues dans le composant authority.

Exemples :

	/**
	 * Résultat de l'analyse d'une URL d'un objet
	 * qui est retourné avec les propriétés suivantes :
	 *
	 * obj.href:         http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
	 * obj.hrefNoHash:   http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
	 * obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
	 * obj.domain:       http://jblas:password@mycompany.com:8080
	 * obj.protocol:     http:
	 * obj.authority:    jblas:password@mycompany.com:8080
	 * obj.username:     jblas
	 * obj.password:     password
	 * obj.host:         mycompany.com:8080
	 * obj.hostname:     mycompany.com
	 * obj.port:         8080
	 * obj.pathname:     /mail/inbox
	 * obj.directory:    /mail/
	 * obj.filename:     inbox
	 * obj.search:       ?msg=1234&type=unread
	 * obj.hash:         #msg-content
	 */

	var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");

`$.mobile.path.makePathAbsolute` (méthode)

Méthode utilisée pour convertir le chemin relatif, d'un fichier ou d'un répertoire, en chemin absolu.

· Arguments
- relPath (string, obligatoire) un chemin relatif d'un fichier ou d'un répertoire.
- absPath (string, obligatoire) un fichier absolu ou un chemin relatif à utiliser.
· Valeur retournée
- Cette fonction retourne une chaîne qui est une version absolue du chemin relatif passé.

Exemples :

/** 
 * Retourne : /a/b/c/file.html
 */
var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");

/**
 * Retourne : /a/foo/file.html
 */
var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");

`$.mobile.path.makeUrlAbsolute` (méthode)

Méthode utilisée pour convertir une URL relative en une URL absolue.

· Arguments
- relUrl (string, obligatoire) une URL relative.
- absUrl (string, obligatoire) une URL absolue à utiliser.
· Valeur retournée
- Cette fonction retourne une chaîne qui est une version absolue de l'URL relative passée à la fonction.

Exemples :

/** 
 * Retourne : http://foo.com/a/b/c/file.html
 */
var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");

/**
 * Retourne : http://foo.com/a/foo/file.html
 */
var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");

/** 
 * Retourne : http://foo.com/bar/file.html
 */
var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");

/** 
 * Retourne : http://foo.com/a/b/c/test.html?a=1&b=2
 */
var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&b=2", "http://foo.com/a/b/c/test.html");

/**
 * Retourne : http://foo.com/a/b/c/test.html#bar
 */
var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");

`$.mobile.path.isSameDomain` (méthode)

Méthode utilisé pour comparer le domain de 2 URLs.

· Arguments
- url1 (string, obligatoire) une URL relative.
- url2 (string, obligatoire) une URL absolue à utiliser.
· Valeur retournée
- Cette fonction retourne un booléen à true si les domaines correspondent, sinon false.

Exemples :

/**
 * Retourne : true
 */
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

/**
 * Retourne : false
 */
var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

/**
 * Retourne : false
 */
var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

/**
 * Retourne : false
 */
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");

`$.mobile.path.isRelativeUrl` (méthode)

Méthode utilisée pour déterminer si une URL est une variante relative.

· Arguments
- url (string, obligatoire) Une URL relative ou absolue.
· Valeur retournée
- Cette fonction retourne un booléen à true si l'URL est relative, false, si elle est absolue.

Exemples :

/**
 * Retourne : false
 */
var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");

/**
 * Retourne : true
 */
var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");

/**
 * Retourne : true
 */
var isRel = $.mobile.path.isRelativeUrl("/a/file.html");

/**
 * Retourne : true
 */
var isRel = $.mobile.path.isRelativeUrl("file.html");

/** 
 * Retourne : true
 */
var isRel = $.mobile.path.isRelativeUrl("?a=1&b=2");

/**
 * Retourne : true
 */
var isRel = $.mobile.path.isRelativeUrl("#foo");

`$.mobile.path.isAbsoluteUrl` (méthode)

Méthode utiliser pour déterminer si une URL est absolue.

· Arguments
- url (string, obligatoire) Une URL relative ou absolue.
· Valeur retournée
- Cette fonction retourne un booléen true si l'URL est absolue, false, si elle est relative.

Exemples :

/**
 * Retourne : true
 */
var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");

/**
 * Retourne : false
 */
var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");

/**
 * Retourne : false
 */
var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");

/**
 * Retourne : false
 */
 var isAbs = $.mobile.path.isAbsoluteUrl("file.html");

/**
 * Retourne : false
 */
var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&b=2");

/**
 * Retourne : false
 */
var isAbs = $.mobile.path.isAbsoluteUrl("#foo");

`$.mobile.base` (méthodes, propriétés)

Utilitaires pour travailler avec l'élément de base générée. TODO: document as public API is finalized.

`$.mobile.silentScroll` (méthode)

Faites défiler jusqu'à une position particulière Y, sans déclencher l'écouteurs d'événement scroll.

· Arguments :
- yPos (number, defaults to 0). Passez un certain nombre pour faire défiler vers cet emplacement Y.

Exemples :

/**
 * scroll de 100px
 */
 
$.mobile.silentScroll(100);

`$.mobile.activePage` (propriété)

Référence à la page actuellement visualisée.

$.mobile.changePage (méthode)

· Arguments

$.mobile.loadPage (méthode)

· Arguments

jqmData(), jqmRemoveData() (méthode)

· Arguments :

· Aussi :

$.mobile.showPageLoadingMsg ()

$.mobile.hidePageLoadingMsg ()

$.mobile.fixedToolbars.show (méthode)

· Arguments

$.mobile.fixedToolbars.hide (méthode)

· Arguments

$.mobile.path.parseUrl (méthode)

· Arguments

· Valeur retournée

hash

host

hostname

href

pathname

port

protocol

search

authority

directory

domain

filename

hrefNoHash

hrefNoSearch

password

username

$.mobile.path.makePathAbsolute (méthode)

· Arguments

· Valeur retournée

$.mobile.path.makeUrlAbsolute (méthode)

· Arguments

· Valeur retournée

$.mobile.path.isSameDomain (méthode)

· Arguments

· Valeur retournée

$.mobile.path.isRelativeUrl (méthode)

· Arguments

· Valeur retournée

$.mobile.path.isAbsoluteUrl (méthode)

· Arguments

· Valeur retournée

$.mobile.base (méthodes, propriétés)

$.mobile.silentScroll (méthode)

· Arguments :

$.mobile.activePage (propriété)

`$.mobile.changePage` (méthode)

`·` Arguments

`$.mobile.loadPage` (méthode)

`·` Arguments

`jqmData(), jqmRemoveData()` (méthode)

`·` Arguments :

`·` Aussi :

`$.mobile.showPageLoadingMsg` ()

`$.mobile.hidePageLoadingMsg` ()

`$.mobile.fixedToolbars.show` (méthode)

`·` Arguments

`$.mobile.fixedToolbars.hide` (méthode)

`·` Arguments

`$.mobile.path.parseUrl` (méthode)

`·` Arguments

`·` Valeur retournée

`hash`

`host`

`hostname`

`href`

`pathname`

`port`

`protocol`

`search`

`authority`

`directory`

`domain`

`filename`

`hrefNoHash`

`hrefNoSearch`

`password`

`username`

`$.mobile.path.makePathAbsolute` (méthode)

`·` Arguments

`·` Valeur retournée

`$.mobile.path.makeUrlAbsolute` (méthode)

`·` Arguments

`·` Valeur retournée

`$.mobile.path.isSameDomain` (méthode)

`·` Arguments

`·` Valeur retournée

`$.mobile.path.isRelativeUrl` (méthode)

`·` Arguments

`·` Valeur retournée

`$.mobile.path.isAbsoluteUrl` (méthode)

`·` Arguments

`·` Valeur retournée

`$.mobile.base` (méthodes, propriétés)

`$.mobile.silentScroll` (méthode)

`·` Arguments :

`$.mobile.activePage` (propriété)