类似于 Google Play 商店的 jQuery 移动导航选项卡 [英] Navigation tabs with jQuery mobile similar to Google Play store

问题描述

我如何使用 jQuery mobile 实现这种类型的导航选项卡，类似于 Google Play 商店?

How can I do this type of navigation tabs with jQuery mobile, similar to the Google Play store?

推荐答案

你可以使用 swipe 事件和 jquery 在你的部分 html 之间动态切换，使用切换，或者使用 $.mobile.changePage(url)，例子

You can use swipe events and with jquery dynamically switch between parts of you html using toggle, or using $.mobile.changePage(url), example

$('div[data-role=page]').on('swipeleft, swiperight ', go);

function go(event) {
    switch(event.type) {
        case 'swiperight':
            console.log('swiperight');
            $('#divid2,#divid3').toggle(false);
            $('#divid1').toggle(true);
            break;
        case 'swipeleft':
            console.log('swipeleft');
            $('#divid1,#divid2').toggle(false);
            $('#divid3').toggle(true);
            break;
    }
}

类似的东西，或者您可以使用 jquery animate 来淡出 html 的部分，或者使用 $.mobile.changePage(url) 可以在不同页面之间转换，如果您有相同的页眉和页脚，它将看起来像标签.

Something like that or you can use jquery animate to fadeOut parts of the html, or use $.mobile.changePage(url) which can transition between different pages and it will look like tabs if you have same headers and footers.

这篇关于类似于 Google Play 商店的 jQuery 移动导航选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！