Есть ли способ установить URL-адрес вручную, когда я пролистываю новую страницу, используя jquery-mobile? - PullRequest
Новая
       27

Есть ли способ установить URL-адрес вручную, когда я пролистываю новую страницу, используя jquery-mobile?

0 голосов
/ 13 января 2012

Я использую плагин Jquery Mobile pagination и пытаюсь превратить его в мой плагин.

Pagination позволяет перелистывать страницы на мобильных устройствах.

Мой плагин использует разделенный экран, поэтому я перелистываю страницы на одной из панелей, которые я использую.Поэтому мне нужно настроить оригинальный плагин, чтобы:

  1. изменение страниц панели при нажатии / нажатии клавиши = работает
  2. изменение страниц панели при пролистывании влево / вправо = не работает

Проблема заключается в том, что при перелистывании страница на самом деле не меняется, поэтому мне нужно имитировать все, что происходит во время обычного jQuery Mobile changePage.

Все работает нормально, за исключением установки URL-адреса для перелистываемой страницы.

Я могу получить идентификатор страницы, но не могу установить для нее URL-адрес.Я думаю, это полезно, используя dataURL, но я не могу заставить его работать.

Любая помощь с благодарностью!

Вот соответствующий код из модифицированного плагина: 

snapTo = function( newOffset, immediate ){
   var $newActive = newOffset === 0 ? $page : newOffset > 0 ? $prevPage : $nextPage,
       samePage = !$newActive || $newActive.is( $page ),
       newUrl = samePage && $page.jqmData( "url" ) || $newActive.jqmData( "url"),
       // so I have the new page and it's url when the page is "swiped in"

       // this fires when the swipe is done
       doneCB = function(){ 

           if( !samePage){
              // checking for panel
              if ( $('html').hasClass( "multiview") ) {
                  // ... stuff
                  // I need to set the URL here without triggering a transition

                  } else {
                  //this is how the plugin does it
                  $page.removeClass( $.mobile.activePageClass )

                  //disable hash listening
                  $.mobile.urlHistory.ignoreNextHashChange = true;

                  // pagination uses this but it triggers a changePage, which I don't want
                  $.mobile.path.set( newUrl );

                  //set "toPage" as activePage
                  $.mobile.activePage = $newActive;
                  ... 
                  }
              }

РЕШЕНИЕ
Не уверен, что кто-то его использует, но в любом случае это решение:

  • Вы должны вызвать changePage
  • аналогично настройке пагинации ignoreNextHashChange = true , мне нужно установить аналогичный блокировщик внутри моего плагина, чтобы остановить hashChangesот запуска нежелательного перехода.

Код внутри нумерации страниц: 

var fakeOptions = {};

fakeOptions.transition="none";
// set a blocker! 
$(_pluginTriggerElement_).plugin("option", "$blockPaginationHashChange", true);

// fire a transition
$.mobile.changePage( $newActive, fakeOptions );

Это запустит changePage без перехода.Мой плагин имеет процедуру, похожую на JQM, в которой каждый changePage также запускает последующий hashChange.Как и в случае с параметром JQM $ ignoreNextHashChange, я определяю свою собственную опцию $ blockPaginationhashChange и настраиваю блокировщик внутри подпрограммы Hashchange панели следующим образом: 

// block pagination hashChanges
if ( self.options.$blockPaginationHashChange == true ) {
     self.options.$blockPaginationHashChange = false;
     // stop here
     return;
     }

Таким образом, обратные переходы hashChange не запускаются, когдастраницы перелистываются.Очень мигающий, но это работает.

1 Ответ

0 голосов
/ 13 января 2012

Я не знаком с плагином, который вы используете, но если вы разместите ссылку на свой сайт, я, вероятно, могу помочь немного больше.

Тем не менее, jQuery Mobile предоставляет функцию $.mobile.changePage() для упрощения смены страниц. 

$(document).delegate('[data-role="page"]', 'swipeleft swiperight', function (event) {
    event.preventDefault();
    if (event.type == 'swipeleft') {
       $.mobile.changePage(<URL-BASED-ON-SWIPELEFT>, {<options>});
    } else {
       $.mobile.changePage(<URL-BASED-ON-SWIPERIGHT>, {<options>});
    }
});

Обратите внимание, что <URL-BASED-ON-*> также может быть объектом, который уже находится в DOM, например $('#some-page-id').

Документы для $.mobile.*: http://jquerymobile.com/demos/1.0/docs/api/methods.html

UPDATE

Как насчет запуска click событий на стрелках влево / вправо, когда пользователь проводит пальцем, таким образом вы можете сохранить ту же логику, которую использует плагин Pagination: 

$(document).bind('swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {

        //swipeleft
        $('.ui-pagination-next').children().trigger('click');
    } else {

        //swiperight
        $('.ui-pagination-prev').children().trigger('click');
    }
});
...