jQuery UI Accordion的使用
最近学习了一下jQuery 的一个插件Accordion的使用，把它记录下来。
来自：http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Html 页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script><!--jquery库，这里可以用新版本 -->
<script type="text/javascript" src="Scripts/jquery.accordion.js"></script><!--accordion插件 -->
<script type="text/javascript" src="Scripts/jquery.accordion.easing.js"></script><!--accordion插件：动态效果:原来名称是jquery.easing.js -->
<script type="text/javascript">
//http://jqueryui.com/demos/accordion/
//启动时加载方式1:
jQuery().ready(function() {
//jQuery('#list1a').accordion();
jQuery('#list1a').accordion({
autoheight: false,
event: 'mouseover'
});
});
//启动时加载方式2:
// window.onload = (function() {//加入载入时的函数
// //$("#list1a").accordion();
// jQuery('#list1a').accordion();
// });
</script>
</head>
<body>
<div class="basic" style="float:left;" id="list1a">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div>
</body>
</html>
Css文件
li { list-style-type: none; }
.basic
{
width: 500px;
font-family: verdana;
border: 1px solid #0000FF;
}
.basic div
{
background-color: #66CCFF;
}
.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
.basic a
{
cursor: pointer;
display: block;
padding: 5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
background-image: url("AccordionTab0.gif");
}
.basic a:hover
{
background-color: white;
background-image: url("AccordionTab2.gif");
}
.basic a.selected
{
color: black;
background-color: #80cfe2;
background-image: url("AccordionTab2.gif");
}
Demo页面及参数说明：http://jqueryui.com/demos/accordion/
