Вертикальные вкладок с помощью JQuery мобильной навигационной панели

Я использую вкладки в JQuery мобильной навигационной панели в виде вкладок, как указано в ссылкеВертикальные вкладок с помощью JQuery мобильной навигационной панели

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

Однако мое требование, чтобы создать вертикальные вкладки, как следующее, но с помощью JQuery мобильного

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

Мой код выглядит следующим образом, где я хочу язычки быть вертикальными, как и выше http://jsfiddle.net/D424Z/1/

источник

2012-01-10 SoulMan

Пожалуйста, найдите код ниже для настраиваемых вертикальных баров Nav.

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

источник

2012-01-10 10:42:45

Я вижу изменен только в CSS, когда я их ставил, это не работает. Где я могу получить js/Common/jquery.mobile-1.0rc1.js? – SoulMan

Код работает отлично. Jquery.mobile-1.0rc1.js можно найти по ссылке http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/#download –

Спасибо нашел код. Теперь проблема y там, где есть более двух вкладок, она входит в следующий столбец, какое свойство css следует изменить? – SoulMan

Вертикальные вкладок с помощью JQuery мобильной навигационной панели

ответ

Смежные вопросы