Navigation Tabs with Jquery Mobile Similar to Google Play Store

Navigation tabs with jQuery mobile similar to Google Play store

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

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.

How do I mimick Google Play's horizontal div scrolling using jQuery mobile?

It can be done but you will be sadly disappointed.

It can be achieved like this:

Multiple page's inside one single HTML. Every page will have swipeleft and swipe right binded to it. When event is triggered changePage() function will make a transition to previous/next page. This sounds excellent and works just fine on desktop browser but fails miserable when executed with phonegap on android phones. Transitions are still a huge problem on android phones, iOS fares better but not to much.
Something like this:
```
$('#page-two').on('#page-two', 'swipeleft', function () {
    //next page
    $.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
    //prev page
    $.mobile.changePage($('#page-one'), { reverse : true });
});
```
Swipe events are supported with jQuery Mobile so no need for 3rd party plugins.
Use a jQuery Mobile carousel plugin like this example: http://jsfiddle.net/blackdynamo/yxhzU/
Original plugin: https://github.com/blackdynamo/jQuery-Mobile-Carousel
Unlike page transitions this plugin will give you much better feeling on mobile phones.

What ever path you choose android tab look will be achieved with navbar inside a second header:

<div data-theme="a" data-role="header">
    <h3>
        First Page
    </h3>
    <a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-theme="a" data-role="header">
    <div data-role="navbar">
        <ul>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
            <li><a href="#">Page Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div>

jQuery Mobile bottom navigation bar

Try the following working example, using custom icons (using jQuery Mobile 1.2.0):

Create a css file mycss.css and include the following in it:

.ui-icon-custom {
    background: url("../img/run.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

where run.png is the name of your custom icon.

Then, in your html file, include the following:

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <!-- LOAD YOUR CSS FILE WHILE PAYING ATTENTION TO ITS PATH! -->
    <link rel="stylesheet" type="text/css" href="./css/mycss.css"/>

</head>    

<body>

    <div data-role="page">      

        <div data-role="content">
            <h1>This is my content</h1>
        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-icon="custom">Entry</a></li>
                    <li><a href="#two" data-icon="custom">Winner</a></li>
                    <li><a href="#three" data-icon="custom">Gallery</a></li>
                </ul>
            </div><!-- /navbar -->                             
        </div> 

    </div>

</body>
</html>

Screenshot (iPhone 5):

screenshot

PS: Pay attention to the paths of your css / png files!

Let me know if this works for you.

Cannot be redirected to another page from jquery Mobile navigation bar

Problem fixed. Apparently it was just some JS conflict.

Google Play Store Security Alert Says that your app contains Vulnerable JavaScript libraries how to remove the security warning?

This issue refers to an old vulnerability of jquery from your res/raw/jquery_min.js file.

Just updated the jquery_min.js to v3.4.1 and fix it.

You can fix it manually in your file change in the code:

From:

if(null!=(e=arguments[s]))for(t in e)n=a[t],a!==(r=e[t])&&(l&&r&&(w.isPlainObject(r)||

To:

if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(k.isPlainObject(r)||

I found this solution in https://www.privacy-wise.com/mitigating-cve-2019-11358-in-old-versions-of-jquery/ and worked for me.

Navigation Tabs with Jquery Mobile Similar to Google Play Store