jQuery 入门教程(42): jQuery UI Tab 示例(二)

支持收缩和展开
缺省情况下,标签页是展开的,可以通过设置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 <divid="tabs">
18 <ul>
19 <li><ahref="#tabs-1">Preloadeda>li>
20 <li><ahref="ajax/content1.html">Tab 1a>li>
21 <li><ahref="ajax/content2.html">Tab 2a>li>
22 <li><ahref="ajax/content3-slow.php">Tab 3 (slow)a>li>
23 <li><ahref="ajax/content4-broken.php">Tab 4 (broken)a>li>
24 ul>
25 <divid="tabs-1">
26 <p>Proin elit arcu, rutrum commodp>
27 div>
28 div>

鼠标移动自动激活页面
可以通过设置 event:mouseover 来实现,这样当鼠标移动到某个页面,该页面则自动展开。

1 <script>
2 $(function() {
3 $( "#tabs" ).tabs({
4 event: "mouseover"
5 });
6 });
7 script>

在底部和左边显示标签头

通过CSS和一些JavaScript可以把标签页的标题显示在底部或是左边

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <divid="tabs"class="tabs-bottom">
51 <ul>
52 <li><ahref="#tabs-1">Nunc tincidunta>li>
53 <li><ahref="#tabs-2">Proin dolora>li>
54 <li><ahref="#tabs-3">Aenean laciniaa>li>
55 ul>
56 <divid="tabs-1">
57 <p>Proin elit arcu, rutrum commodo, vehicula tempus, p>
58 div>
59 <divid="tabs-2">
60 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, p>
61 div>
62 <divid="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
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <divid="tabs">
55 <ul>
56 <li><ahref="#tabs-1">Nunc tincidunta>li>
57 <li><ahref="#tabs-2">Proin dolora>li>
58 <li><ahref="#tabs-3">Aenean laciniaa>li>
59 ul>
60 <divid="tabs-1">
61 <p>Proin elit arcu, rutrum commodo, vehicula tempus, p>
62 div>
63 <divid="tabs-2">
64 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, p>
65 div>
66 <divid="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>

你可能感兴趣的:(jQuery 入门教程(42): jQuery UI Tab 示例(二))