我在 JQuery 移动导航栏中使用选项卡作为引用中给出的选项卡
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
但是，我的要求是创建如下所示的垂直选项卡，但使用的是 JQuery Mobile
http://jquery-ui.googlecode.com/svn/tags/1.8.2/demos/tabs/vertical.html
我的代码如下所示，我希望选项卡像上面一样垂直 http://jsfiddle.net/D424Z/1/
最佳答案
请在下面找到自定义垂直导航栏的代码。
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"> </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"> </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(主.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();
});
关于jquery - 使用 JQuery 移动导航栏的垂直选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8799447/