1

我对 Jquery/Jquery Mobile 很陌生。我正在尝试使用 jquery 动态获取上一页。我试过了，但它不能正常工作，任何人都可以帮助我解决这个问题。

我的小提琴代码

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

任何人都可以帮助我正常工作。

提前致谢。

更新的问题：

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

在这张图片中是一个像这样的网格视图，但在瓷砖中，我们不会一次显示所有标题。

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

4

3 回答 3

2

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

演示

动态创建页面

$(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();
 }
});
于 2013-05-15T07:47:22.753 回答
-1

尝试这个

  $(document).ready(function() {
    var referrer =  document.referrer;
  });
于 2013-05-15T05:15:42.570 回答
-1

这将起作用。:)

<a href="#" data-rel="back" data-role="button">Go back</a>
于 2013-05-15T06:17:39.913 回答