Menu
I am working on a project that will have hundreds of pages into on html page.
I am very concern about navigating this sub-pages using <a href=#ID" > to move forward between sub-pages. Is there a way to use one button into every sub-page that will take me to the next sub-page in a way that I dont have to write every sub-page ID into every "Next" button ?
497
asked Jan 29 '26 19:01
jQuery Mobile has out of box solution for a back button on every page.
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
This code must be placed before jQuery Mobile initialization, like this:
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
This one is a little bit tricky, auto generated next button will only work if you have 1 html with multiple pages solution. This will provide you with an information of a next page in line, so to create next button use this code:
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
}
});
Here's a working example of this solution: http://jsfiddle.net/Gajotres/BnB7X/
If you have more questions feel free to ask.
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
