jQuery 入门教程(42): jQuery UI Tab 示例（二）
不点
阅读：571
2021-04-01 09:57:31
评论：0
支持收缩和展开
缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。
1 |
<script> |
2 |
$(function () {
|
3 |
$("#tabs").tabs({
|
4 |
collapsible: true |
5 |
}); |
6 |
}); |
7 |
</script> |
Ajax支持
jQuery 的标签页也支持通过Ajax方法来加载页面，这是通过设置href属性来实现，href指向其它页面，这是jQuery通过Ajax方法读取指定页面，如果加载时间过长，则页面显示Loading(加载中），如果无法加载，也可以通过配置beforeLoad 设置错误信息。
1 |
<script> |
2 |
$(function() {
|
3 |
$( "#tabs" ).tabs({
|
4 |
beforeLoad: function( event, ui ) {
|
5 |
ui.jqXHR.error(function() {
|
6 |
ui.panel.html( |
7 |
"Couldn't load this tab. We'll try to fix this as soon as possible. " + |
8 |
"If this wouldn't be a demo." ); |
9 |
}); |
10 |
} |
11 |
}); |
12 |
}); |
13 |
</script> |
14 |
</head> |
15 |
<body> |
16 |
|
17 |
<div id="tabs"> |
18 |
<ul> |
19 |
<li><a href="#tabs-1">Preloaded</a></li> |
20 |
<li><a href="ajax/content1.html">Tab 1</a></li> |
21 |
<li><a href="ajax/content2.html">Tab 2</a></li> |
22 |
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> |
23 |
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> |
24 |
</ul> |
25 |
<div id="tabs-1"> |
26 |
<p>Proin elit arcu, rutrum commod</p> |
27 |
</div> |
28 |
</div> |
鼠标移动自动激活页面
可以通过设置 event:mouseover 来实现，这样当鼠标移动到某个页面，该页面则自动展开。
1 |
<script> |
2 |
$(function() {
|
3 |
$( "#tabs" ).tabs({
|
4 |
event: "mouseover" |
5 |
}); |
6 |
}); |
7 |
</script> |
在底部和左边显示标签头
通过CSS和一些JavaScript可以把标签页的标题显示在底部或是左边
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<script> |
10 |
$(function () {
|
11 |
$("#tabs").tabs(); |
12 |
13 |
// fix the classes |
14 |
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") |
15 |
.removeClass("ui-corner-all ui-corner-top") |
16 |
.addClass("ui-corner-bottom"); |
17 |
18 |
// move the nav to the bottom |
19 |
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); |
20 |
}); |
21 |
</script> |
22 |
<style> |
23 |
/* force a height so the tabs don't jump as content height changes */ |
24 |
#tabs .tabs-spacer {
|
25 |
float: left; |
26 |
height: 200px; |
27 |
} |
28 |
29 |
.tabs-bottom .ui-tabs-nav {
|
30 |
clear: left; |
31 |
padding: 0 .2em .2em .2em; |
32 |
} |
33 |
34 |
.tabs-bottom .ui-tabs-nav li {
|
35 |
top: auto; |
36 |
bottom: 0; |
37 |
margin: 0 .2em 1px 0; |
38 |
border-bottom: auto; |
39 |
border-top: 0; |
40 |
} |
41 |
42 |
.tabs-bottom .ui-tabs-nav li.ui-tabs-active {
|
43 |
margin-top: -1px; |
44 |
padding-top: 1px; |
45 |
} |
46 |
</style> |
47 |
</head> |
48 |
<body> |
49 |
50 |
<div id="tabs" class="tabs-bottom"> |
51 |
<ul> |
52 |
<li><a href="#tabs-1">Nunc tincidunt</a></li> |
53 |
<li><a href="#tabs-2">Proin dolor</a></li> |
54 |
<li><a href="#tabs-3">Aenean lacinia</a></li> |
55 |
</ul> |
56 |
<div id="tabs-1"> |
57 |
<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p> |
58 |
</div> |
59 |
<div id="tabs-2"> |
60 |
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p> |
61 |
</div> |
62 |
<div id="tabs-3"> |
63 |
<p>Mauris eleifend est et turpis. Duis id erat. </p> |
64 |
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p> |
65 |
</div> |
66 |
</div> |
67 |
68 |
69 |
</body> |
70 |
</html> |
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<script> |
10 |
$(function () {
|
11 |
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); |
12 |
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); |
13 |
}); |
14 |
</script> |
15 |
<style> |
16 |
.ui-tabs-vertical {
|
17 |
width: 55em; |
18 |
} |
19 |
20 |
.ui-tabs-vertical .ui-tabs-nav {
|
21 |
padding: .2em .1em .2em .2em; |
22 |
float: left; |
23 |
width: 12em; |
24 |
} |
25 |
26 |
.ui-tabs-vertical .ui-tabs-nav li {
|
27 |
clear: left; |
28 |
width: 100%; |
29 |
border-bottom-width: 1px !important; |
30 |
border-right-width: 0 !important; |
31 |
margin: 0 -1px .2em 0; |
32 |
} |
33 |
34 |
.ui-tabs-vertical .ui-tabs-nav li a {
|
35 |
display: block; |
36 |
} |
37 |
38 |
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
|
39 |
padding-bottom: 0; |
40 |
padding-right: .1em; |
41 |
border-right-width: 1px; |
42 |
border-right-width: 1px; |
43 |
} |
44 |
45 |
.ui-tabs-vertical .ui-tabs-panel {
|
46 |
padding: 1em; |
47 |
float: right; |
48 |
width: 40em; |
49 |
} |
50 |
</style> |
51 |
</head> |
52 |
<body> |
53 |
54 |
<div id="tabs"> |
55 |
<ul> |
56 |
<li><a href="#tabs-1">Nunc tincidunt</a></li> |
57 |
<li><a href="#tabs-2">Proin dolor</a></li> |
58 |
<li><a href="#tabs-3">Aenean lacinia</a></li> |
59 |
</ul> |
60 |
<div id="tabs-1"> |
61 |
<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p> |
62 |
</div> |
63 |
<div id="tabs-2"> |
64 |
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p> |
65 |
</div> |
66 |
<div id="tabs-3"> |
67 |
<p>Mauris eleifend est et turpis. Duis id erat. </p> |
68 |
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p> |
69 |
</div> |
70 |
</div> |
71 |
72 |
73 |
</body> |
74 |
</html> |
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
