jQuery UI 的API手册地址：http://api.jqueryui.com/
jQuery UI 实现百叶窗效果、菜单、Tab导航；最后组合 百叶窗效果 + 菜单，实现二级菜单。案例如下：
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验10-3 jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/>
<style>
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
padding: 20px 30px 200px;
}
.title {
text-indent: 2em;
/* color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.5); */
}
</style>
</head>
<body>
<h2 class="title">1.百叶窗效果</h2>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
Quisque lobortis.Phasellus pellentesque purus in massa.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<h2 class="title">2.菜单</h2>
<ul id="menu" style="width:100px;">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
<ul>
<li>
<div>Item 3-1</div>
</li>
<li>
<div>Item 3-2</div>
</li>
<li>
<div>Item 3-3</div>
</li>
</ul>
</li>
<li>
<div>Item 4</div>
</li>
<li>
<div>Item 5</div>
</li>
</ul>
<h2 class="title">3.Tab导航</h2>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2 class="title">4.组合 百叶窗效果 + 菜单 => 实现二级菜单的制作</h2>
<div class="accordion">
<h3>Section 1</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
<li>
<div>Item 4</div>
</li>
<li>
<div>Item 5</div>
</li>
</ul>
</div>
<h3>Section 2</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
</ul>
</div>
<h3>Section 3</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
<li>
<div>Item 4</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script>
//初始化 百叶窗效果
$( "#accordion" ).accordion({
active: 2,
animate: 200,
classes: {
"ui-accordion": "highlight"
},
/*disabled: true,*/
heightStyle: "fill",
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});
//初始化 菜单
$( "#menu" ).menu({
classes: {
"ui-menu": "highlight"
},
position: { my: "left top", at: "right-5 top-5" }
});
//初始化 Tab导航
$( "#tabs" ).tabs();
//组合 百叶窗效果 + 菜单 => 实现二级菜单的制作
$( ".accordion>h3" ).css('padding', ".8em");
$( ".accordion>h3" ).css('padding-left', "2em");
$( ".accordion>div" ).css('padding', 0);
$( ".accordion" ).accordion({
heightStyle: "content"
});
$( ".menu>li>div" ).css('padding', 8);
$( ".menu" ).menu();
</script>
</body>
</html></span>
效果如下：
二级菜单的效果：
点击其他菜单项可进行切换，如：
当然也可以修改成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验10-3 jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/>
<style>
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
padding: 20px 30px 200px;
}
.title {
text-indent: 2em;
/* color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.5); */
}
/* 组合 百叶窗效果 + 菜单 => 实现二级菜单的制作 */
.accordion>h3 {
padding: .8em;
padding-left: 2em;
}
.accordion>div {
padding: 0 !important;
overflow: hidden !important;
}
.menu>li>div {
padding: 8px;
}
</style>
</head>
<body>
<h2 class="title">1.百叶窗效果</h2>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
Quisque lobortis.Phasellus pellentesque purus in massa.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<h2 class="title">2.菜单</h2>
<ul id="menu" style="width:100px;">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
<ul>
<li>
<div>Item 3-1</div>
</li>
<li>
<div>Item 3-2</div>
</li>
<li>
<div>Item 3-3</div>
</li>
</ul>
</li>
<li>
<div>Item 4</div>
</li>
<li>
<div>Item 5</div>
</li>
</ul>
<h2 class="title">3.Tab导航</h2>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2 class="title">4.组合 百叶窗效果 + 菜单 => 实现二级菜单的制作</h2>
<div class="accordion">
<h3>Section 1</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
<li>
<div>Item 4</div>
</li>
<li>
<div>Item 5</div>
</li>
</ul>
</div>
<h3>Section 2</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
</ul>
</div>
<h3>Section 3</h3>
<div>
<ul class="menu">
<li>
<div>Item 1</div>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
<li>
<div>Item 4</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script>
//初始化 百叶窗效果
$( "#accordion" ).accordion({
active: 2,
animate: 200,
classes: {
"ui-accordion": "highlight"
},
/*disabled: true,*/
heightStyle: "fill",
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});
//初始化 菜单
$( "#menu" ).menu({
classes: {
"ui-menu": "highlight"
},
position: { my: "left top", at: "right-5 top-5" }
});
//初始化 Tab导航
$( "#tabs" ).tabs();
//组合 百叶窗效果 + 菜单 => 实现二级菜单的制作
$( ".accordion" ).accordion({
heightStyle: "content"
});
$( ".menu" ).menu();
</script>
</body>
</html>
