CODEWITHSUNDEEP
jqueryjquery-mobile
Yesvinkumar
Yesvinkumar

Reputation: 559

jQuery Mobile - page and same page id links

Thanks in advance to sort out the problem...

Please find the following link ... http://jsfiddle.net/yesvin/KrKvb/

and the code ...

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <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>
        <script>
            $(function() {
                $('ul.tabs-v, ul.tabs').each(function() {
                    var $active, $content, $links = $(this).find('a');
                    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                    $active.addClass('ui-btn-active');
                    $content = $($active.attr('href'));

                    $links.not($active).each(function() {
                        $($(this).attr('href')).hide();
                    });

                    $(this).on('click', 'a', function(e) {
                        //alert($(this));
                        $active.removeClass('ui-btn-active');
                        $content.hide();
                        $active = $(this);
                        $content = $($(this).attr('href'));

                        $active.addClass('ui-btn-active');

                        $content.show();

                        e.preventDefault();
                    });
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page">

            <div data-role="header" class="hea"  data-position="fixed">
                <h2>Header</h2>
            </div>

            <div data-role="content">
                <div style="width: 20%; float: left;">
                    <ul class="tabs-v" data-role="listview">
                        <li><a href="#tab1"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 1</h3> </a></li>
                        <li><a href="#tab2"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 2</h3> </a></li>
                        <li><a href="#tab3"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 3</h3> </a></li>
                    </ul>
                </div>

                <div style="width: 77%; float: right;">
                    <div id="tab1">Tab 1 Content</div>
                    <div id="tab2">Tab 2 Content</div>
                    <div id="tab3">Tab 3 Content</div>
                </div>

            </div>

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#tab1">One</a></li>
                        <li><a href="#tab2">Two</a></li>
                        <li><a href="#tab3">Three</a></li>
                    </ul>
                </div>          
            </div>

        </div>      
    </body>
</html>

i had a jquery mobile tabbed template with header, footer, content left, right columns and nav bar. Here, the left column ul li working fine to show the tab content referenced by id using jquery function (ui-btn-active also works fine).

The same is not working in navbar component in jquery mobile/ or if it works current button is not replaced by ui-btn-active class.

Thus, i don't need to change the page for bottom navbar.

Can anyone help me to sort this out.

Upvotes: 1

Views: 836

Answers (1)

Omar
Omar

Reputation: 31732

It will work this way, in fact, this is how it worked for me.

First, you have to add class tabs to <ul> of the navbar.

<div data-role="navbar">
  <ul class="tabs">

Then, copy ui-btn-active CSS styling.

<style type="text/css">
.ui-btn-active-custom { /* any name */
border:1px solid #2373a5;
background:#5393c5;
font-weight:bold;
color:#fff;
cursor:pointer;
text-shadow:0 1px 1px #3373a5;
text-decoration:none;
background-image:-webkit-gradient(linear,left top,left bottom,from( #5393c5 ),to( #6facd5 ));
background-image:-webkit-linear-gradient( #5393c5,#6facd5 );
background-image:-moz-linear-gradient( #5393c5,#6facd5 );
background-image:-ms-linear-gradient( #5393c5,#6facd5 );
background-image:-o-linear-gradient( #5393c5,#6facd5 );
background-image:linear-gradient( #5393c5,#6facd5 );
font-family:Helvetica,Arial,sans-serif
}
</style>

In your JS code, replace all ui-btn-active with ui-btn-active-custom

Try it yourself: http://jsfiddle.net/KrKvb/7/

Upvotes: 1

Related Questions