Jquery mobile splitview $ .mobile.changePage не работает

Question

Привет! Я использую Jquery для мобильных устройств, как указано в библиотеке https://github.com/asyraf9/jquery-mobile/.

У меня две страницы на левой панели A и B и две страницы C и D на правой панели. Сначала я отображаю страницы A и C на левой и правой панели соответственно. Теперь, нажав на ссылку, я хочу изменить левую панель с A на B, а на правой панели C на D

.

Изменение не работает полностью, оно только изменяет левую панель, а не страницу в правой панели, где находится вышеуказанный якорь.

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

Answer 1

есть опция загрузки контекста в splitview. Почему бы не использовать это?

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

1) укажите атрибуты контекста ваших ссылок:

<a href="#some" data-panel="menu" data-context="#otherPage" data-context-panel="main">click me</a>

2) Прослушайте клики по этим контекстным ссылкам, например:

$(document).bind( "click", function( event ) {
  console.log("click registered");
  var link = $( self.findClosestLink(event.target) );

  if ( !link || event.which > 1) {
     return;
     }

  console.log( link );
  console.log( link.jqmData('context') );

  // context routine fires with context links
  if ( link.length === 1 && link.jqmData('context') ) {
     // fire your context function, RENAME THIS
     console.log("firing context routine");
     self.context( link );
     }

3) Поместите где-нибудь контекстную функцию:

 context: function( object ) {

       var self = this,
           $context = object,
           $targetPanelID = $context.jqmData('context-panel');

       console.log("contextpage="+$context.href+"  contextPanel="+targetPanelID);

       // make sure the pageContainer is correctly set for the 2nd transition
       $.mobile.pageContainer = $('div:jqmData(panel="'+$targetPanelID+'")');

       // context changePage
       $.mobile.changePage( $( $context.jqmData('context') ), { transition:'slide', changeHash:true, fromHashChange: false, pageContainer: $.mobile.pageContainer });
       };

4) Добавить функцию findclosestLink JQM (я забыл)

  findClosestLink: function (ele) {
     var self = this;
     while (ele){
     if (ele.nodeName.toLowerCase() == "a"){
        break;
        }
    ele = ele.parentNode;
    return ele;
    }

Ваша ссылка запустит первый changePage, ваша контекстная функция запустит второй changePage. В зависимости от того, где вы используете это, ваш вызов changePage контекста также вызовет другое событие hashChange, которое JQM может не блокировать (каждое changePage также запускает hashChange, который блокируется JQM с использованием ignoreNextHashChange - проверьте источник).

Поэтому после второго вызова вам, возможно, придется сделать что-то подобное, чтобы убедиться, что hashChange заблокирован:

  $.mobile.ignoreNextHashChange = true; 

Все работает в моем плагине multiview , НО плагин не закончен, глючит, и у меня не было времени поработать над ним в последнее время. Однако контекст работает, поэтому вы можете просто извлечь его и использовать по мере необходимости.

Ура!

Answer 2

сделать .refresh () после щелчка по ссылке / что-нибудь, что вызывает изменение в splitview.