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

来源：互联网发布：双程2网络剧百度云盘编辑：程序博客网时间：2024/06/08 14:14

支持收缩和展开
缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。

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

20130424001

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>

20130424002

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>

20130424003