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>