JavaScript++かも日記

【jQuery】jQuery UI/Accordion

【jQuery , ライブラリ , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

    $("#jqexample").accordion({alwaysOpen: false});

    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(){$("#jqexample .ui-accordion-body").fadeIn();},
        hideAll:function(){$("#jqexample .ui-accordion-body").fadeOut();}
    });

    $("#jqexample").accordion.hideAll() ;

    $("#jqshowall:checkbox").click(function(e){ 
       if($("#jqshowall:checkbox").get(0).checked){
         $("#jqexample").accordion.showAll() ;
       } else {
         $("#jqexample").accordion.hideAll() ;
       }
    });

//で、さらに修正f^^;;;

    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //インスタンスにメソッドを2つ追加コピーします
    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(targets){$(targets).fadeIn();},
        hideAll:function(targets){$(targets).fadeOut();}
    });

    //全部フェイドアウト ここは、フェイドは無駄なのでhide()で良いかも
    $("#jqexample").accordion.hideAll("#jqexample .ui-accordion-body") ;

    //チェックボックスクリック来たら判定して2つのメソッドをトグル動作させる
    $("#jqshowall:checkbox").click(function(e){ 
       if($("#jqshowall:checkbox").get(0).checked){
         $("#jqexample").accordion.showAll("#jqexample .ui-accordion-body") ;
       } else {
         $("#jqexample").accordion.hideAll("#jqexample .ui-accordion-body") ;
       }
    });


    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //インスタンスのaccordionにshowAllメソッドを追加コピーします
    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(target){$(target).fadeIn();}
    });

    //ボタンクリック来たらshowAllメソッドを動作させる
    $("#jqshowall:button").click(function(e){ 
         $("#jqexample").accordion.showAll("#jqexample .ui-accordion-body") ;
    });

でも、拡張使ってみたかったというだけのことなので普通は下記で良いかも(笑)。

    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //ボタンクリック来たら#jqexample 内の.ui-accordion-bodyをすべてfadeInする
    $("#jqshowall:button").click(function(e){ 
         $("#jqexample .ui-accordion-body").fadeIn();
    });

それにしても、jQueryだと、なんて簡単に書けるんだろう！

---

---

【コメント】(←clickで入力欄open)