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

Question

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

EDIT:

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

        $('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 (), который был предложен на другом сайте. Но это казалось еще более нестабильным, вызывая всевозможные странные прыжки.

Answer 1

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

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

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

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

Answer 2

Вы можете использовать jQuery .live события «swipe left» и «swipe right».

Пример:

 $(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

Answer 3

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

Следовательно, установите переход по умолчанию на «слайд» и установите для всех ссылок с атрибутом перехода данных значение «исчезать», а затем присоедините 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");

Answer 4

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

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 текущей страницы.

Answer 5

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

$. Mobile.changePage ('topage', {transition: "slide", обратное: верно, });

Answer 6

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

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

Answer 7

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

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