关于css：使用JQuery移动导航栏的垂直标签

Vertical tabs using JQuery mobile nav bar

我在 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/

请在下面找到自定义垂直导航栏的代码。

HTML(index.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<!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 type=“text/javascript” src=“js/Common/jquery.mobile-1.0rc1.js”>
<script type=“text/javascript” src=“main.js”>
</head>
<body>

Sale Order

<!— top level navigation bar —>

<ul class=“nav”>

<li>
Header

</li>

<li>
Lines

</li>

</ul>

<!— /navbar —>
<!— top level header div which will also contain a navigation bar which will act as subtab menu for the header tab —>
<!–here–>

<ul>

</ul>

&nbsp
<!— DIVs associated with the header tab —>

<p>Main fields</p>

<p>Others fields</p>

<!— Lines tab‘s DIV which also contains a navigation bar which acts as subtab –>

<ul >

<li>
LineMain

</li>

</ul>

&nbsp

<!– DIV elements for the Lines TAB’s subtab —>

<p><center>[wp_ad_camp_2]</center></p><p>l1</p>

<p>l2</p>

<p>l3</p>

<!–here–>

<h4>Footer</h4>

</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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

Vertical tabs using JQuery mobile nav bar

猜你喜欢