Yii Framework Forum: How to make a CJuiAccordion sortable? - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

How to make a CJuiAccordion sortable? Rate Topic: -----

#1 User is offline   andyk 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 07-May 10

Posted 07 May 2010 - 04:11 PM

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
0

#2 User is offline   thiromi 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 17-March 11

Posted 26 October 2011 - 04:33 PM

View Postandyk, on 07 May 2010 - 04:11 PM, said:

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
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users