Home/ Questions/Q 7059683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:15:43+00:00

I am using tabs in JQuery mobile navbar as tabs as given in the

  • 0

I am using tabs in JQuery mobile navbar as tabs as given in the reference

http://jquerymobile.com/test/docs/toolbars/docs-navbar.html

However , my requirement is to create vertical tabs like the following but using JQuery mobile

http://jquery-ui.googlecode.com/svn/tags/1.8.2/demos/tabs/vertical.html

My code looks like the following , where I want the tabs to be vertical like above
http://jsfiddle.net/D424Z/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please find the code below for customized Vertical Nav Bars.

    HTML(index.html)

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0rc1.css" />
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="js/Common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/Common/jquery.mobile-1.0rc1.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-role="page" id="header">
        <div data-role="header">
            <h1>Sale Order</h1>
        </div>
        <div data-role="content">
            <!-- top level navigation bar -->
            <div data-role="navbar" id="nav1">
                <ul class="nav">

                    <li><a href="#" data-href="header" class="ui-btn-active">Header</a>
                    </li>
                    <li><a href="#" data-href="line">Lines</a>
                    </li>
                </ul>
            </div>
            <!-- /navbar -->
            <!-- top level header div which will also contain a navigation bar which will act as subtab menu for the header tab -->
           <div id="lns"> <!--here-->
           <div class="def_content_div" id="header">

                <div data-role="navbar" id="nav2">
                    <ul>
                        <li><a href="#" data-href="main" class="ui-btn-active">h1</a>
                        </li>
                        <li><a href="#" data-href="others">h2</a>
                        </li>
                    </ul>
                </div>
                <div style="border-top: 0px" class="ui-btn-active">&nbsp</div>
                <!-- DIVs associated with the header tab -->
                <div class="def_sub_content_div" id="main">
                    <p>Main fields</p>
                </div>
                <div class="sub_content_div" id="others">
                    <p>Others fields</p>
                </div>
            </div>
            <!-- Lines tab's DIV which also contains a navigation bar which acts as subtab -->
            <div class="content_div" id="line">
                <div data-role="navbar" id="nav2">
                    <ul >
                        <li><a href="#" data-href="linemain" class="ui-btn-active">LineMain</a>
                        </li>
                        <li><a href="#" data-href="l1">l1</a>
                        </li>
                        <li><a href="#" data-href="l2">l2</a>
                        </li>
                        <li><a href="#" data-href="l3">l3</a>
                        </li>

                    </ul>
                    <div style="border-top: 0px" class="ui-btn-active">&nbsp</div>
                </div>
                <!-- DIV elements for the Lines TAB's subtab -->
                <div class="def_sub_content_div" id="l1">
                    <p>l1</p>
                </div>
                <div class="sub_content_div" id="l2">
                    <p>l2</p>
                </div>
                <div class="sub_content_div" id="l3">
                    <p>l3</p>
                </div>
            </div>
        </div>
        </div> <!--here-->
        <div data-role="footer">
            <h4>Footer</h4>
        </div>

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

    CSS(main.css)

    /*This class of div will contain the subtab be hidden by default*/
.content_div {
    display: none;
}
/*This is the default subtab of a tab*/
.def_content_div {
    display: block;
}
/*This is the leaf div which will contain the form and the fields*/
.sub_content_div {
    display: none;
}
/*This is the leave div associated with the default subtab*/
.def_sub_content_div {
    display: block;
}
/*Following commented out as does not work*/
/*
.sub_content_div:first-child {
    display: block;
}

.content_div:first-child {
    display: block;
}
*/
.ui-btn {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 0px;
}

#lns {
    margin-left: 113px;
    margin-top: -91px;
}


ul.nav,
.nav ul{

margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
}

ul.nav{
width: 200px;
float: left;
margin-right: 1px;
}

ul.nav a{
color: #FFF;
}
ul.nav a:hover{
color: #FF0;
}
ul.nav>li{
margin: 0;
color: #FFF;
background-color: #900;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
font-family: Arial, Helvetica, sans-serif;
}
ul.nav li>ul>li{
margin: 0;
color: #900;
background-color: #979700;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
}
ul.nav li>ul>li a{
color: #FFF;
}
ul.nav li>ul>li a:hover{
color: #FF0;
}
ul.nav li:hover {
background-color: #000000;
color: #FF0;
background-image: url(../images/hover.jpg);
}

ul.nav li:hover>ul{
display : block;
color: #000;
}
ul.nav li>ul{
display: none;
position: absolute;
width: 200px;
left: 200px;
margin-top: -5px;
margin-left: 11px;
color: #FFFF00;
background-color: #000000;
}

ul.nav ul>li>ul{
display: none;
position: absolute;
width: 200px;
left: 191px;
margin-top: -5px;
color: #FFFFFF;
background-color: #333333;
margin-left: 9px;
}
ul.nav ul>li>ul>li{
margin: 0;
color: #FFF;
background-color: #000;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
}
ul.nav ul>li>ul>li a{
color: #FFF;
}
ul.nav ul li ul li a:hover {
color: #FF0;
}
ul{
border: 1px solid #000;
}
.nav a{
text-decoration: none;
}

    Javascript(main.js)

    //Following event is added to the top level navigation bars/tabs
$('div[id="nav1"] a').live(
        'click',
        function() {
            $(this).addClass('ui-btn-active');
            $('div.content_div').hide();
            $('div.def_content_div').hide();
            $('div#' + $(this).attr('data-href')).show();
            //The following line will show the div associated with the default subtab of the current tab (which was clicked)
            //e.g "main" is the default subtab for the "headers" tab.
            $('div#' + $(this).attr('data-href')).children(
                    '[class="def_sub_content_div"]').show();

        });
//Following event is addred to the subtabs navigation bar which will show the div associated with it when clicked.
$('div[id="nav2"] a').live('click', function() {
    $(this).addClass('ui-btn-active');
    $('div.sub_content_div').hide();
    $('div.def_sub_content_div').hide();
    $('div#' + $(this).attr('data-href')).show();
});
    • 0