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

不点 阅读:161 2021-04-01 09:57:31 评论:0


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

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号