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文件：

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/