Comment créer un lien vers une partie spécifique d’une page dans jQuery Mobile?

Je crée dynamicment des boutons dans jQM, comme ceci:

return '' + match + '';

Cela fonctionne très bien pour la création de boutons – ils ont le même id que le texte du bouton et ils se lient parfaitement à la page de glossaire.

Ce que je dois faire, c’est créer un lien vers un endroit spécifique dans la page du glossaire.

Maintenant normalement tu ferais

Mais jQM je devrais faire

et cela ne semble pas fonctionner. Je crée un href avec #glossary#target qui ne fonctionne pas.

Y a-t-il un moyen de faire ça?

La solution simple consiste à append un atsortingbut personnalisé à Anchor , par exemple, data-subpage="#sectionOne" , et à stocker cette valeur dans une variable pour la récupérer ultérieurement lorsque vous passez à la page de glossary .

 Section two

Dans la page #glossary , ajoutez l’atsortingbut id à sectioin div correspondant à data-subpage dans le lien mais sans le hachage # .

   Section one

Lier un événement de clic sur les ancres avec la classe subPage aide de pagecreate . Une fois cliqué, stockez data-subpage valeur data-subpage dans une variable globale .

 var subPage; $(document).on("pagecreate", "#pageID", function () { $(".subpage").on("click", function () { subPage = $(this).data("subpage"); }); });

Une fois que vous avez la valeur de la sous – page stockée, vous devez écouter pagecontainershow afin de faire défiler jusqu’à une div avec un id stocké dans une variable de sous-page.

Vous devez d’abord définir si la page active est un glossary ou non avec getActivePage . Vérifiez également que la variable de sous-page n’est ni null ni undefined . Sinon, la page s’ouvrira normalement.

Si la page active est un glossary et que la sous- subPage est définie, récupérez .offset().top de cette div et faites-la défiler avec animation ou sans animation.

De plus, notez que vous devez setTimeout pour exécuter la fonction de défilement afin de vous assurer que la page est entièrement chargée et que la transition est terminée.

 $(document).on("pagecontainershow", function () { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id; if ( !! subPage && activePage == "glossary") { var scrollTo = $(subPage).offset().top; setTimeout(function () { /* $.mobile.silentScroll(scrollTo); without animation */ $("body").animate({ scrollTop: scrollTo }, 500, function () { /* 500ms animation speed - it's up to you */ subPage = null; /* reset variable */ }); }, 300); /* scroll after 300ms - it's up to you */ } });

Démo ⁽¹⁾

⁽¹⁾ testé sur iPhone 5 – Safari Mobile