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

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

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

文章标签：

本文深入探讨了使用jQuery实现标签页的动态加载功能，并展示了如何通过Ajax方法加载页面内容。同时，文章还介绍了如何利用jQuery设置标签页的布局，包括标签页的展开与收缩、鼠标悬停激活、以及将标签头显示在底部或左侧的技术。通过实践这些方法，开发者可以创建更灵活、交互性更强的网页应用。

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

<script> 

$(function () { 

$("#tabs").tabs({ 

collapsible: true 

}); 

}); 

</script>

Ajax支持
jQuery 的标签页也支持通过Ajax方法来加载页面，这是通过设置href属性来实现，href指向其它页面，这是jQuery通过Ajax方法读取指定页面，如果加载时间过长，则页面显示Loading(加载中），如果无法加载，也可以通过配置beforeLoad 设置错误信息。

<script> 

$(function() { 

$( "#tabs" ).tabs({ 

beforeLoad: function( event, ui ) { 

ui.jqXHR.error(function() { 

ui.panel.html( 

"Couldn't load this tab. We'll try to fix this as soon as possible. " + 

"If this wouldn't be a demo." ); 

}); 

} 

}); 

}); 

</script> 

</head> 

<body> 



<divid="tabs"> 

<ul> 

<li><ahref="#tabs-1">Preloaded</a></li> 

<li><ahref="ajax/content1.html">Tab 1</a></li> 

<li><ahref="ajax/content2.html">Tab 2</a></li> 

<li><ahref="ajax/content3-slow.php">Tab 3 (slow)</a></li> 

<li><ahref="ajax/content4-broken.php">Tab 4 (broken)</a></li> 

</ul> 

<divid="tabs-1"> 

<p>Proin elit arcu, rutrum commod</p> 

</div> 

</div>

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

<script> 

$(function() { 

$( "#tabs" ).tabs({ 

event: "mouseover" 

}); 

}); 

</script>

在底部和左边显示标签头

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

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<script> 

$(function () { 

$("#tabs").tabs(); 

    12

// fix the classes 

$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") 

.removeClass("ui-corner-all ui-corner-top") 

.addClass("ui-corner-bottom"); 

    17

// move the nav to the bottom 

$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); 

}); 

</script> 

<style> 

/* force a height so the tabs don't jump as content height changes */ 

#tabs .tabs-spacer { 

float: left; 

height: 200px; 

} 

    28

.tabs-bottom .ui-tabs-nav { 

clear: left; 

padding: 0 .2em .2em .2em; 

} 

    33

.tabs-bottom .ui-tabs-nav li { 

top: auto; 

bottom: 0; 

margin: 0 .2em 1px 0; 

border-bottom: auto; 

border-top: 0; 

} 

    41

.tabs-bottom .ui-tabs-nav li.ui-tabs-active { 

margin-top: -1px; 

padding-top: 1px; 

} 

</style> 

</head> 

<body> 

    49

<divid="tabs"class="tabs-bottom"> 

<ul> 

<li><ahref="#tabs-1">Nunc tincidunt</a></li> 

<li><ahref="#tabs-2">Proin dolor</a></li> 

<li><ahref="#tabs-3">Aenean lacinia</a></li> 

</ul> 

<divid="tabs-1"> 

<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p> 

</div> 

<divid="tabs-2"> 

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p> 

</div> 

<divid="tabs-3"> 

<p>Mauris eleifend est et turpis. Duis id erat. </p> 

<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p> 

</div> 

</div> 

    67

    68

</body> 

</html>

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<script> 

$(function () { 

$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 

$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 

}); 

</script> 

<style> 

.ui-tabs-vertical { 

width: 55em; 

} 

    19

.ui-tabs-vertical .ui-tabs-nav { 

padding: .2em .1em .2em .2em; 

float: left; 

width: 12em; 

} 

    25

.ui-tabs-vertical .ui-tabs-nav li { 

clear: left; 

width: 100%; 

border-bottom-width: 1px !important; 

border-right-width: 0 !important; 

margin: 0 -1px .2em 0; 

} 

    33

.ui-tabs-vertical .ui-tabs-nav li a { 

display: block; 

} 

    37

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 

padding-bottom: 0; 

padding-right: .1em; 

border-right-width: 1px; 

border-right-width: 1px; 

} 

    44

.ui-tabs-vertical .ui-tabs-panel { 

padding: 1em; 

float: right; 

width: 40em; 

} 

</style> 

</head> 

<body> 

    53

<divid="tabs"> 

<ul> 

<li><ahref="#tabs-1">Nunc tincidunt</a></li> 

<li><ahref="#tabs-2">Proin dolor</a></li> 

<li><ahref="#tabs-3">Aenean lacinia</a></li> 

</ul> 

<divid="tabs-1"> 

<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p> 

</div> 

<divid="tabs-2"> 

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p> 

</div> 

<divid="tabs-3"> 

<p>Mauris eleifend est et turpis. Duis id erat. </p> 

<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p> 

</div> 

</div> 

    71

    72

</body> 

</html>