Créer sa première application jQuery Mobile JQuery Mobile : le sélecteur personnalisé jqmData()

jQuery Mobile dispose d'un nouveau sélecteur personnalisé qu'il emploie pour sélectionner des éléments présentant un attribut data-. Vous connaissez probablement déjà les autres sélecteurs personnalisés intégrés à jQuery, notamment :has(), :contains(), :eq(), etc. Vous pouvez les employer afin de sélectionner directement des éléments (par exemple $("div:contains('truc')")) ou pour filtrer d'autres sélecteurs (par exemple $("div").contains('true')).

Vous pouvez ainsi sélectionner tous les éléments disposant de l'attribut data-role="page" à l'aide du sélecteur standard de jQuery $("[data-role='page']"). Cette technique fonctionne parfaitement mais, dans la mesure où jQuery Mobile s'appuie largement sur des attributs data- personnalisés, il peut être intéressant de développer un sélecteur spécifique, jqmData().

Pour l'utiliser afin de sélectionner tous les éléments présentant un attribut data-role="page", vous déclarez $(":jqmData(role='page')"). Pour sélectionner tous les éléments avec un attribut data- personnalisé au sein de ces pages sélectionnées, vous pouvez alors employer $(":jqmData(role='page')").jqmData(role).

Le sélecteur jqmData() gère automatiquement les espaces de nommage. Comme jQuery Mobile s'appuie largement sur les attributs de données, vous devriez être en mesure de leur appliquer un espace de nommage afin d'éviter les conflits avec d'autres attributs de données qui ne sont pas utilisés par jQuery Mobile. (Par exemple, au lieu d'utiliser data-role="page", vous pourriez définir data-espace-role="page", où espace- correspond à une chaîne de caractères personnalisée.) Par défaut, jQuery Mobile n'applique pas d'espace de nommage, mais vous pouvez modifier sa configuration à l'aide de l'option $.mobile.ns. Reportez-vous à la section "Pour aller plus loin : les attributs des espaces de nommage" du Chapitre 5, pour de plus amples informations à ce sujet. Si vous configurez un espace de nommage, le sélecteur jqmData() le prendra automatiquement en compte. Comme vous le constaterez en parcourant les forums du GitHub officiel du projet, à l'adresse, la prise en charge des espaces de nommage a conduit les développeurs de jQuery Mobile à adapter la bibliothèque dans ce sens.