0

私は木から落ちたばかりのjqueryナットです。Yiiを使用してマルチフォームビューを作成しました。各フォームは互いに独立しており、すべてAJAXを使用して送信できます。

私はCJuiAccordionを使用して、さまざまなフォームをすべて保持し、画面スペースを節約しています。しかし、他のフォーム（折りたたまれたパネルでも）が邪魔になっているような気がします。そのため、「折りたたまれたパネルはすべて、アクティブなときにすべて非表示になる」ことを実現したいと思います。

activate( event, ui )またはを使用してこれを実現することはできますが、 slideDownbeforeActivate( event, ui )のようなものを使用して非アクティブなパネルを非表示にし、対応するパネルを繰り返してすべての折りたたまれたパネルを表示する方法がわかりません。アクティブパネルが折りたたまれている場合。

また、Yiiを使用してこれらのイベントを登録するにはどうすればよいですか？

4

1 に答える 1

0

さて、Yiiを使ってイベントをバインドする方法を研究した後...私は失敗しましたactivate( event, ui )。beforeActivate( event, ui )

ただし、htmlOptionsを使用してコールバックを引き出すための回避策を見つけました。これが私のCJuiAccordionレンダリングコードです。

$panels = array(
            "Panel a" =>
                    "content goes here",
            "Panel B" =>
                    "content goes here",
            "Panel C" =>
                    "content goes here"
        );
$cs = Yii::app()->clientScript;
    //my required jquery function is declared in this file
    $cs->registerScriptFile('js/accordion.js'); 
$this->widget('zii.widgets.jui.CJuiAccordion', array(
        'panels'=>$panels,
        'id'=>'inventory-accordion',
        'options'=>array(
            'collapsible'=>true,
            'active'=>-1,
            'heightStyle'=>'content',
         ),
         'htmlOptions'=>array(
             'style'=>'width:100%;',
             'onclick'=>'togglePanels("inventory-accordion","h3")',
         ),
     )
);

ここに素晴らしいコードjs/accordion.jsがあります

/**
 * Makes a jquery-ui-accordion hide all of its unactive panels whenver one is
 * selected and shows all the panels when the only active panel is collapsed
 */
function togglePanels(accordionId, headerSelector){
    var accordion = $("#"+accordionId);
    var accordionHeader = $("#"+accordionId+"> "+headerSelector);
    var active = accordion.accordion("option","active");

    if (active!==false) {
        //alert(active);
        accordionHeader.each(
            function(index){
                if (index!=active) $(this).slideUp('slow');
            }
        );
    } else{
        //alert("Show all the panels!");
        accordionHeader.each(
            function(){
                $(this).slideDown('slow');
            }
        );
    }       
}

このコードは、CJuiAccordionのYiiユーザーにとって有用であり、微調整できると確信しています。

于 2012-11-02T18:49:01.040 に答える