Question

我是Jquery / Jquery Mobile的新手。我正在尝试使用jquery动态获取上一页。我试过但是它不能正常工作可以帮助我摆脱这个问题。

我在fiddle

中的代码

当我点击Next & Prev按钮时，它第一次工作正常但是当我再次做同样的第二次“prev”按钮工作正常“下一步”按钮不能自动工作转到下一个链接，并且文件第一次没有加载。

任何人都可以帮我正确地工作。

先谢谢。

更新了问题：

Tiles也像网格视图，但是瓷砖与网格有些不同。

在这张图片中只有这样的网格视图，但在图块中我们不会同时显示所有标题。

例如：考虑这个图像我们在这里使用网格view.consider在图块中有相同的标题我们也有A到F标题，我们显示标题取决于屏幕尺寸。如果我们有超过A到F的标题，那么我们有“一个按钮”它显示我们拥有的标题数量。当我们点击它然后它必须打开其他剩余的标题。

Answer 1

使用$.mobile.changePage()在页面之间移动，并检索先前[data-role=page]和下一个.prev()页面的.next() ID。

<强> Demo

动态创建页面

$(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);
});

<强>导航

// 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
 });
});

显示/隐藏导航按钮

$(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();
 }
});

Answer 2

试试这个

  $(document).ready(function() {
    var referrer =  document.referrer;
  });

Answer 3

这会奏效。：）

<a href="#" data-rel="back" data-role="button">Go back</a>

如何使用jquery动态转到上一页？

3 个答案: