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

最新推荐文章于 2023-04-11 08:46:50 发布

引路蜂

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量4.4k

点赞数 1

分类专栏： jQuery 教程 JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

支持收缩和展开
缺省情况下，标签页是展开的，可以通过设置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>