2013-12-05 2 views
0

То, что я пытаюсь сделать, это отобразить неактивные страницы по умолчанию = "none;" но быть видимым (возможно, используя .show()), когда страница активна.jQuery .show() if class = "visible" для приложения JQM

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

<div data-role="page" style="display:none;" id="page2"> 
+0

Попробуйте http://stackoverflow.com/questions/16870713/jquery-mobile-white-screen-between-transitions – jpodwys

+0

Благодарим за быстрый ответ. Я тоже пробовал это, и это не решило мою проблему. – zb0t

ответ

1

Я не знаю, если это будет решить вашу белую вспышку проблемы, но вот как скрыть и показать страницу дивы: DEMO FIDDLE

Я создал класс с visibility:hidden; и применил его к невидимой странице (s) в разметке:

.hidePage { 
    visibility:hidden; 
} 

<div data-role="page" id="page2" class="hidePage">... 
<div data-role="page" id="page3" class="hidePage">... 

Тогда я обрабатывать pageshow событие для всех страниц и удалить или добавить класс в зависимости, который один в настоящее время показано ниже:

$(document).on("pageshow", function(e){  
    var curPageID = $(e.target).prop("id"); 
    $('[data-role="page"]').each(function(index) { 
     if ($(this).prop("id") == curPageID){ 
      $(this).removeClass("hidePage"); 
     } else { 
      if (!$(this).hasClass("hidePage")){ 
       $(this).addClass("hidePage");  
      } 
     }  
    }); 
}); 

Если вы все еще получаете вспышку, мы могли бы попробовать SetTimeout и задержать видимость на несколько миллисекунд ...

+0

Hm ... когда я реализую js в заголовке между jQuery и jQuery мобильных скриптов, он загружает начальный экран, но становится «статическим» для каждого. Для перехода на следующую страницу невозможно выбрать контент. Когда я реализую скрипт после загрузки jquery и jquery mobile, сценарий запускается, однако страницы остаются скрытыми. – zb0t

+0

Я обычно помещаю скрипты прямо перед закрывающим тегом тела, после всех других разметки. Можете ли вы сказать, добавляет/удаляет класс? – ezanker

+0

Ну, при перемещении сценария к телу я получаю тот же результат. Я знаю, что класс меняется, потому что, когда я перемещаюсь, следующая страница скрыта. Спасибо за вашу помощь! – zb0t

0

я, наконец, нашел решение!

Я реализовал fastclick.js, здесь: https://github.com/ftlabs/fastclick.

Я просто добавил

<script> 
    $(function() { 
     FastClick.attach(document.body); 
    }); 
</script> 

к головке моего документа.

При перемещении между страницами больше нет вспышки/мерцания.

Надеюсь, это поможет многим другим, которых я видел с мерцающим эффектом.

Смежные вопросы