jQuery Mobile固定工具栏在Scroll上淡出

时间:2012-04-26 18:51:26

标签: jquery jquery-mobile

我试图在固定标题功能方面模仿以下页面。 http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html

然而,随着jquerymobile的更新发布,我相信他们删除了滚动中的淡入/淡出功能。

新的jquerymobile版本是否有办法模仿这种行为?

2 个答案:

答案 0 :(得分: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/

在进行演示后,我意识到设置超时以便scrollstartscrollstop事件不会经常发生,这是一个好主意:

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);
});​

答案 1 :(得分:0)

您是否希望将此行为用于工具栏?

然后你也可以查看JQM 1.1。 release notes,它包含指向polyfill的链接,以使用旧的固定工具栏行为。

以下是preview URLGithub回购

如果你想对某些其他元素使用行为(页眉/页脚你喜欢的任何元素),我从polyfill中取一个函数来重新定位show()并使用它如下:

// 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元素,您需要添加 data-fixed =“top / bottom”

转换我正在使用的元素:

// 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更好,因为我只需要这个片段而不是需要完整的旧固定工具栏处理程序。