JQueryUI（Accordion）

来源：互联网发布：用js统计网站的访客量编辑：程序博客网时间：2024/06/02 02:38

1：Accordion的结构，首先我们先看一个基本的例子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>A basic accordion implementation</title>
    <link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../css/redmond/ui.accordion.css" />
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../ui/ui.core.js"></script>
    <script type="text/javascript" src="../ui/ui.accordion.js"></script>
    <script type="text/javascript">
            $(document).ready(function () {
               $("#accordion").accordion({ header: "h3" });
            });
    </script>
    <style type="text/css">
        body
        {
            font: 62.5% "Trebuchet MS" , sans-serif;
            margin: 10px;
        }
    </style>
< /head>
< body>
    <div id="accordion">
        <div>
            <h3>
                <a href="#">First</a></h3>
            <div>
                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>
        <div>
            <h3>
                <a href="#">Second</a></h3>
            <div>
                Phasellus mattis tincidunt nibh.</div>
        </div>
        <div>
            <h3>
                <a href="#">Third</a></h3>
            <div>
                Nam dui erat, auctor a, dignissim quis.</div>
        </div>
    </div>
< /body>
< /html>