Question

我是一个刚从树上掉下来的jquery坚果。我用Yii创建了一个multiform-view。每个表单都是相互独立的，所有表单都可以使用AJAX提交。

我正在使用CJuiAccordion来保存所有不同的表单并节省屏幕空间。但我只是觉得其他形式（即使在倒塌的面板中）只是妨碍了。因此，我希望实现“只要一个人处于活动状态，所有折叠的面板都会隐藏”。

我想到使用activate( event, ui )或beforeActivate( event, ui )来实现这一点，但我不知道如何迭代手风琴面板以便使用类似slideDown的内容为了隐藏非活动面板，以及它们的对应部分，以便在活动面板折叠时再次显示所有折叠面板。

另外，如何使用Yii注册这些事件？

Answer 1

好吧，在研究了我如何使用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用户进行调整。

当一个人活跃时，隐藏一个Jiu手风琴的所有非活动面板

1 个答案: