JQuery UI之(四)手风琴面板——accordion

一、          前言
手风琴面板我又叫他可折叠面板，可以使用户创建一组可折叠的面板
 
二、          开始动手
添加样式和js库：
    <link type="text/css" rel="Stylesheet" href="Css/redmond/jquery-ui-1.7.2.custom.css" />
    <script type="text/javascript" src="Js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="Js/jquery-ui-1.7.2.custom.min.js"></script>
      编写控件代码：
        <div id="divAccordionDefault" style=" width:300px; float:inherit;">
            <h3><a href="#">标题一</a></h3> //切记，标题要使用<h[1|2|3…]>否则显示时会出错
            <div>内容一<br/><br /><br /><br /><br /><br /><br />内容一</div>
            <h3><a href="#">标题二</a></h3>
            <div>内容二<br/><br /><br /><br /><br /><br /><br />内容二</div>
            <h3><a href="#">标题三</a></h3>
            <div>内容三<br/><br /><br /><br /><br /><br /><br />内容三</div>
        </div>
      编写JQuery代码：
    <script type="text/javascript">
        $(function(){
            $("#divAccordionDefault").accordion();
        });
    </script>
      默认手风琴面板
 
三、          其它加载方式
取消自动高度，可折叠：
    <script type="text/javascript">
        $(function(){
            $("#divAccordionDefault").accordion({autoHeight:false, collapsible:true});
        });
    </script>
 
      鼠标滑动触发切换：
    <script type="text/javascript">
        $(function(){
            $("#divAccordionDefault").accordion({event:"mouseover"});
        });
    </script>