How to make a CJuiAccordion sortable?

Hi,

I see that you can make a Jui Accordion sortable (see JUI docs), but I don’t see how to do it using Yii CJuiAccordion. Can anyone explain how to do this? Sorry if this is dumb, I’m new to this environment.

Thanks,

Andy

Hi Andy,

it’s been a long wait, huh?

I’ve struggled with this problem and found a not-so-clean solution using the example from jQuery ui website.


$cs = Yii::app()->getClientScript();

$cs->registerScript('rules-widget', <<<JS

    var stop = false; 

    (function($){

        $("#rules h3").click(function(event){

            if (stop) {

                event.stopImmediatePropagation();

                event.preventDefault();

                stop = false;

            }

        });

    })(jQuery);

JS

, CClientScript::POS_END);


$this->widget(

    'zii.widgets.jui.CJuiSortable', 

    array(

        'id'=>'rules', 

        'itemTemplate'=>'<div id="{id}">{content}</div>',

        'items'=>array(

            'panel 1'=>'<h3>panel 1</h3><div>text1</div>',

            'panel 2'=>'<h3>panel 2</h3><div>text2</div>',

            // panel 3 contains the content rendered by a partial view

            //'panel 3'=>$this->renderPartial('_partial',null,true),

        ),

        'options'=>array(

            'handle'=>'h3',

            'start'=>'js:function() {console.info(this)}',

            'stop'=>'js:function() {stop = true;}',

        ),

    )

); 

$this->widget(

    'zii.widgets.jui.CJuiAccordion', 

    array(

        'id'=>'rules',

        'panels'=>array(

        ),

        // additional javascript options for the accordion plugin

        'options'=>array(

            'icons'=>false,

            'collapsible'=>true,

            'header'=>'> div > h3',

        ),

    ), 

    true // getting rid of widget output

);



See the “‘id’=>‘rules’” in both widget parameters. this forces yii to generate the code to element with an id equals “rules”.

the third parameter “true” on the CJuiAccordion don’t output it because we just need the js code after outputting the CJuiSortable widget.

this let you have a sortable accordion.

Sorry for the late on answer.

Regards