0

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

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

我得到了使用activate( event, ui )orbeforeActivate( event, ui )来实现这一点的想法，但我不知道如何迭代手风琴面板以使用类似slideDown的东西来隐藏非活动面板，以及它们的对应物再次显示所有折叠的面板以防活动面板折叠。

另外，如何使用 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 回答