jQuery Mobile Fixed Toolbar Fade Out на прокрутке

Question

Я пытаюсь имитировать следующую страницу с точки зрения фиксированной функциональности заголовка. http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html

Однако, с более поздним выпуском jquerymobile, я считаю, что они удалили, что затухают в функциональности прокрутки.

Есть ли способ с новым выпуском jquerymobile для имитации этого поведения?

Answer 1

Если вы используете data-position="fixed" панели инструментов, то вы должны быть в состоянии добавить пару data-attributes в тег, чтобы «переключая» на панели инструментов:

<div data-role="footer" data-tap-toggle="true" data-transition="fade"> 
    ... 
</div> 

Документация: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

Это будет работать для кранов , для прокрутки я считаю, вы должны использовать свой собственный обработчик события:

//when a user starts to scroll, hide the toolbar(s) 
$(window).bind('scrollstart', function() { 
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide'); 

//when a user stops a scroll, show the toolbar(s) 
}).bind('scrollstop', function() { 
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show'); 
}); 

Вот демо: http://jsfiddle.net/BCTpK/

После создания демо я понял, что установка тайм-аут, так что scrollstart и scrollstop события не сгореть слишком часто является хорошей идеей:

var timer = null; 

//when a user starts to scroll, hide the toolbar(s) 
$(window).bind('scrollstart', function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide'); 
    }, 100); 

//when a user stops a scroll, show the toolbar(s) 
}).bind('scrollstop', function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show'); 
    }, 100); 
});​ 

Answer 2

Вы хотите использовать это поведение для панелей инструментов?

Затем вы также можете проверить JQM 1.1. release notes, он содержит ссылку на полиполк, чтобы использовать старое поведение фиксированной панели.

Вот preview URL и Github репо

Если вы хотите использовать поведение для некоторых других элементов (верхний/нижний колонтитул любой элемент вам нравится), я взял функцию от polyfill изменить положение на шоу() и я использую это так:

// reposition before showing - based on JQM fixedtoolbar polyfill 
var $popPanel = YOUR_ELEMENT(S) to be repositioned 
$popPanel.jqmData("fixed") == "top" ? 
    $popPanel.css("top", $(window).scrollTop() + "px") : 
     $popPanel.css("bottom", $wrap.outerHeight() - $(window).scrollTop() - $.mobile.getScreenHeight() + "px"); 

Это repositon элементы, которые нужно добавить данных фиксированной = «верх/низ».

Для перехода в элементах я использую:

// show $popPanel 
$popPanel 
    // add transition class - this is using slide 
    .addClass('in') 
    .show('fast') 
// clean up 
window.setTimeout(function() { 
    $popPanel.removeClass('in'); 
    }); 

мне понравилась эта функциональность в JQM 1.0, но я думаю, что polyfill еще лучше, потому что я получаю от этого только с одним фрагментом vs. требуется полный обработчик старой-фиксированной панели инструментов.