取消选择scrollstart上的所有listview项目

时间:2012-08-29 22:12:45

标签: javascript jquery css jquery-mobile javascript-events

当您滚动页面并按下列表视图按钮开始滚动时,按钮将保持高亮显示滚动并在滚动完成后保持高亮显示。滚动开始时如何取消选择?

如果我这样做,它会起作用:

$(document).bind('scrollstart', function(ev) {
    $('*').blur();
});

但是这效率很低并导致页面在滚动开始之前滞后,我尝试了aliui-btnui-li,但这不是不要强调它。

1 个答案:

答案 0 :(得分:2)

当您点击jQuery Mobile伪页面上的列表项时,您基本上将ui-btn-down-*类添加到列表项(*表示主题之一字母)。

一旦用户开始滚动,您就可以删除此类,这是一个示例:

$(document).on("scrollstart", function () {
    setTimeout(function () {
        $.mobile.activePage.find('.ui-li').removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e');
    }, 100);
});​

<强>更新

在我的Droid X上进行测试我发现超时有助于更加一致地消除突出显示的状态。你可以根据自己的目的搞乱超时的持续时间。

以下是演示:http://jsfiddle.net/WrqbG/7/

<强>更新

我也意识到应用了.ui-btn-hover-*类,所以要返回未突出显示的列表,您也必须删除这些类。

.removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e')

只需更改为:

.removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e ui-btn-hover-a  ui-btn-hover-b  ui-btn-hover-c  ui-btn-hover-d  ui-btn-hover-e')