2009.12.28——jQuery ui 之选项卡

2009.12.28——jQuery ui 之选项卡
发现了新大陆 jquery ui 呵呵 很强大,小试了一下,如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>jQuery UI Tabs - Default functionality</title>
	<link type="text/css" href="jquery-ui-1.7.2.custom/development-bundle/themes/ui-lightness/ui.all.css" rel="stylesheet" />        //引入ui的css
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>//引入jquery
	<script type="text/javascript" src="jquery-ui-1.7.2.custom/development-bundle/ui/jquery-ui-1.7.2.custom.js"></script>   //引入ui的js
	<script type="text/javascript">
	$(function() {
		/*$("#tabs").tabs(); //点击鼠标来切换
		$("#tabs").tabs({
            		collapsible: true//可折叠的 就是点两下可以折叠
        	});*/
		$("#tabs").tabs({
			event: "mouseover"  //鼠标滑过来切换
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">标签一</a></li>
		<li><a href="#tabs-2">标签二</a></li>
		<li><a href="#tabs-3">标签三</a></li>
	</ul>
	<div id="tabs-1">
		<p>唐僧</p>
	</div>
	<div id="tabs-2">
		<p>悟空</p>
	</div>
	<div id="tabs-3">
		<p>悟净</p>
		<p>悟能</p>
	</div>
</div>

</div><!-- End demo -->

</body>
</html>
路径见jauery-ui.bmp

你可能感兴趣的:(html,jquery,UI,css)