JQueryUIプラグイン----アコーディオン効果(10級学生趙成挙教室ノート)

JQueryUIプラグイン----アコーディオン効果
今日はJQueryのUIプラグインのオルガンの効果を紹介します.効果図は以下の通りです.
このような展開と折り畳み可能なdivは、私たちのプロジェクトの開発でよく必要とされています.これにより、インタフェースをより美しくすることができ、このような効果でより明確に表示されるデータもあります.
この効果は多くのプラグイン(JQueryUI、ExtJSなど)で実現できますが、今日はJQueryUIで実現する方法を詳しくご紹介します.
JQueryUIでオルガン効果を実現する方法を詳しく説明します.
ステップ1:JQueryUIプラグインを使用するには、まずJQueryUIに必要なjsファイルとcssファイルをインポートする必要があります.
jquery-1.7.1.min.js//Jqueryのjsクラスライブラリです
jquery-ui-1.8.18.custom.min.js//JqueryUIに必要なjsクラスライブラリです
jquery-ui-1.8.18.custom.css//JqueryUIに必要なcssファイルです
 
ステップ2:アコーディオン効果を実現するdivをページのbodyに追加

<div>

       <h1><br></h1>

       <h1>       </h1>

    </div>

    <div id="accordion">

       <div>

           <h3><a href="#">First</a></h3>

           <div>         </div>

       </div>

       <div>

           <h3><a href="#">Secord</a></h3>

           <div>         </div>

       </div>

       <div>

           <h3><a href="#">Third</a></h3>

           <div>         </div>

       </div>
    </div>

ステップ3:JQueryUIコードの作成(今日はこれがポイントですよ)

<script type="text/javascript">$(document).ready(function() {

       $("#accordion").accordion({

           header:"h3",//       ，                h3   。

           animated : "slide",//           

           event : "click",//         mouseover      click         click

           autoHeight:true,//          

           icon:{

              header:"ui-accordion-header",

              headerSelected:"ui-accordion-header"

           },//         

           active:0//         ，   0

       });

       //         options    

       //var activeVal = $("#accordion").accordion("option","active");

       //    option    

       //activeVal = $("#accordion").accordion("option","active",2);
    });

</script>