Проведите, чтобы вернуться в jQuery Mobile?

Я пытаюсь использовать jQuery Mobile, потому что я не смог получить салфетки, чтобы вернуться к странице, чтобы хорошо работать в jQTouch. Но, будучи новичком в jQuery Mobile, я понятия не имею, как идти о реализации салфетки, и как сделать салфетку правой причиной возврата к предыдущей странице. Я работал в Google и искал документы, но не могу найти его, поэтому я бы очень признателен за помощь.

EDIT:

Я нашел это решение, когда Googling немного больше:

        $('body').live('pagecreate', function (event) {
            $('div.ui-page').live("swipeleft", function () {
                var nextpage = $(this).next('div[data-role="page"]');
                // swipe using id of next page if exists
                if (nextpage.length > 0) {
                    $.mobile.changePage(nextpage, 'slide');
                }
            });
            $('div.ui-page').live("swiperight", function () {
                var prevpage = $(this).prev('div[data-role="page"]');
                // swipe using id of previous page if exists
                if (prevpage.length > 0) {
                    $.mobile.changePage(prevpage, 'slide', true);
                }
//                history.back();
//                return false;
            });
        });

Это работает, но не кажется очень стабильным. Он прыгает немного назад и вперед, когда вы садитесь. Я также попытался прокомментировать код в конце - history.back(), который был предложен на другом сайте. Но это казалось еще более неустойчивым, вызывая всевозможные странные прыжки.

Ответ 1

Вы можете использовать jQuery.live "проведите по экрану влево" и "проведите по экрану вправо".

Пример:

 $(document).ready(function() {

      $('.yourPage').live('swipeleft swiperight',function(event){
          if (event.type == "swiperight") {
              var prev = $("#previndex",$.mobile.activePage);
              var previndex = $(prev).data("index");
              if(previndex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+previndex},"slide",true);
              }
          }
          if (event.type == "swipeleft") {
              var next = $("#nextindex",$.mobile.activePage);
              var nextindex = $(next).data("index");
              if(nextindex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+nextindex});
              }
          }
          event.preventDefault();
      });
});

Кроме того, это видео YouTube может помочь вам. http://www.youtube.com/watch?v=Ij1RYI1p7rM

Ответ 2

Ответ от Тимоти выглядит нормально, но кто-то может предпочесть это похожее и готовое решение:

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/

Опубликован сегодня в доме 2 основных членов команды jQuery Mobile Framework.

Это плагин, который позволяет пользователю легко прокручивать страницы. Может быть, не подходит для каждого случая использования, но все же хорошо сделано (кто еще знал бы, как что-то сделать с jqm, если не эти парни?:))

Ответ 3

Правильное решение - использовать объект истории и позволить JQM выбирать правильный (левый или правый) переход в зависимости от того, в каком направлении мы отправляем браузер.

Следовательно, установите переход по умолчанию на "слайд" и установите для всех ссылок с атрибутом перехода данных значение "fade", затем привяжите history.back/forward к событиям салфетки:

$.mobile.defaultPageTransition = 'slide';
$( "body" ).on( 'swiperight', function() {history.back()}); 
$( "body" ).on( 'swipeleft', function() {history.forward()});   
$("a").attr("data-transition", "fade");

Если вы создаете динамический контент (и я очень надеюсь, что вы молодой человек), обязательно установите атрибут data-transition = "fade" на всех ссылках после запуска события "create".

например:

$("#mydiv")
.html("<a href="#page-somewhere"></a>")
.trigger("create")
.find("a").attr("data-transition", "fade");

Ответ 4

В jquery.mobile-1.0-rc2 прокрутка назад упоминается как

$. mobile.changePage('topage', {переход: "слайд", reverse: true, });

Ответ 5

Просто поделитесь своим кодом. Я тоже занимаюсь этим, и у меня получилось:

var allowGlobalSwipe = true; // If you want to disable it at some point

$(function() {
  $(window).on("swipeleft", jqmForward).on("swiperight", jqmBack);

  // This is an example of where you may want to disable the swipe
  $('#slideContainer').swiper({
    onTouchStart: function () { allowGlobalSwipe = false; },
    onTouchEnd: function () { allowGlobalSwipe = true; }
  });
});

function jqmBack(e) {
  if (!allowGlobalSwipe) return;
  var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
  if (prevpage.length > 0)
    $.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}
function jqmForward(e) {
  if (!allowGlobalSwipe) return;
  var nextpage = $('div.ui-page-active').nextAll('div[data-role="page"]');
  if (nextpage.length > 0)
    $.mobile.changePage($(nextpage[0]), { transition: "slide" }, false, true);
}

Обратите внимание, что я использую prevAll и nextAll, потому что предыдущий div страницы не всегда может быть непосредственно перед текущей страницей div.

Ответ 6

В jquery.mobile-1.0-rc2, проведите пальцем по спине, чтобы упомянуть как

$.mobile.changePage('topage', {  transition: "slide", 
                             reverse: true,
                           });

Ответ 7

function ChangePage(pageId,iPageIndex) {
    var forward = iCurrCardIndex < iPageIndex;
    iCurrCardIndex = iPageIndex;

    $.mobile.changePage("#" + pageId, "slide", !forward, true);
}