最近学习了一下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/