xml - How to go to the previous page dynamically using jquery? -
i'm new jquery/jquery mobile.i'm trying previous page dynamically using jquery. tried not working can me out problem.
my code in fiddle
when click on next & prev
buttons working fine first time when i'm again same second time "prev" button working fine "next" button not working automatically going next links , file not loading first time.
can me work properly.
thanks in advance.
updated question:
tiles grid view tiles different grid.
in picture grid view in tiles wont show titles @ time.
for example:consider image have f titles here using grid view.consider same in tiles have f titles show titles depends on screen size. if have more f titles have "one button" displays count of titles have.when click on has open other remaining titles.
move between pages using $.mobile.changepage()
, retrieving [data-role=page]
id of previous .prev()
, next .next()
pages.
create pages dynamically
$(document).on('pageshow', '#chapter', function () { var length = $('#chapter [data-role=listview] li a').length; $('#chapter [data-role=listview] li a').each(function (i) { var file = $(this).attr('file'); var content = $(this).text(); var seq = $(this).data('sequence'); if ($('[data-role=page]#' + seq).length === 0) { $($.mobile.pagecontainer).append('<div data-role="page" id="' + seq + '" class="listitems"><div data-role="header"><a href="#" data-role="button" class="prev" data-icon="arrow-l">prev</a><h1 id="header2">' + content + '</h1><a href="#" data-role="button" class="next" data-icon="arrow-r">next</a></div><div data-role="content"></div><div data-role="footer" data-position="fixed"><a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a></div></div>'); $('[data-role=page]#' + seq + ' [data-role=content]').load(file); if (i === 0) { $('[data-role=page]#' + seq).addclass('first'); } if (length == (i + 1)) { $('[data-role=page]#' + seq).addclass('last'); } } }); }); $(document).on('click', '#chapter [data-role=listview] li a', function () { var goto = '#' + $(this).data('sequence'); $.mobile.changepage(goto); });
navigation
// next page $(document).on('click', '.next', function () { var next = '#' + $.mobile.activepage.next('[data-role=page]')[0].id; $.mobile.changepage(next, { transition: 'slide' }); }); // previous page $(document).on('click', '.prev', function () { var prev = '#' + $.mobile.activepage.prev('[data-role=page]')[0].id; $.mobile.changepage(prev, { transition: 'slide', reverse: true }); });
show/hide navigation buttons
$(document).on('pagebeforeshow', '[data-role=page].listitems', function () { if ($(this).hasclass('first')) { $('.prev').hide(); $('.next').show(); } else if ($(this).hasclass('last')) { $('.prev').show(); $('.next').hide(); } else { $('.next, .prev').show(); } });
Comments
Post a Comment